Additional Details:
Add the below class to your webpage's form tag for finshWorking to work
To get all page specific offline records, call the below function.
This function is asynchronous, so add your sync function with the records param in the body of the function.
There are comments to let you know where your function will go.
finishWorking.getRecordsForSync();
After a successful sync, call the below function to delete all of the page specific records
finishWorking.deleteRecordsAfterSuccessfulSync();
Add a JavaScript service worker to your page for complete offline access.
In short, create a JavaScript file called sw.js, for example, and place it in your html (root) folder
of your application. Add the below contents to your sw.js file. For more information about JS service workers,
go
here.
// Change the version number whenever you want to update the cache
const CACHE_NAME = 'sitecache-v1';
// List of pages you want to cache
const CACHED_RESOURCES = [
'./' // Cache all public resources (i.e. entire website)
];
// Install
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(CACHED_RESOURCES))
.then(self.skipWaiting())
);
});
// Activate
self.addEventListener('activate', event => {
const currentCaches = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
// Search for older cached version names
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
}).then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
// Delete the older caches
return caches.delete(cacheToDelete);
}));
}).then(() => self.clients.claim())
);
});
// Fetch
self.addEventListener('fetch', event => {
event.respondWith(
caches.open(CACHE_NAME).then(cache => {
return cache.match(event.request).then(resp => {
// Request found in current cache, or fetch the file
return resp || fetch(event.request).then(response => {
// Cache the newly fetched file for next time
cache.put(event.request, response.clone());
return response;
// Fetch failed, user is offline
}).catch(() => {
// Look in the whole cache to load a fallback version of the file
return caches.match(event.request).then(fallback => {
return fallback;
});
});
});
})
);
});