offline

// configuration `use strict` const version = '2.0.0' const CACHE = version + '::PWAsite' const offlineURL = '/offline/' const installFilesEssential = process.env.NODE_ENV === 'production' ? [ '/', '../static/manifest.json', '../static/css/*', '../static/img/*', '../static/js/*', '../static/fonts/*', '../static/tinymce4.7.5/*', '../static/js/*' ].concat(offlineURL) : [ '/', './static/tinymce4.7.5/*', './manifest.json', './build/logo.png' ].concat(offlineURL) // install static assets function installStaticFiles() { return caches.open(CACHE) .then(cache => { // cache essential files return cache.addAll(installFilesEssential) }) } // clear old caches function clearOldCaches() { return caches.keys().then(keylist => { return Promise.all( keylist .filter(key => key !== CACHE) .map(key => caches.delete(key)) ) }) } // application installation self.addEventListener('install', event => { console.log('service worker: install') // cache core files event.waitUntil( installStaticFiles().then(() => self.skipWaiting()).catch(() => { console.error('service worker:cannot install') }) ) }) // application activated self.addEventListener('activate', event => { console.log('service worker: activate') // delete old caches event.waitUntil( clearOldCaches() .then(() => self.clients.claim()) ) }) // is image URL? const iExt = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp'] function isImage(url) { return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false) } // return offline asset function offlineAsset(url) { if (isImage(url)) { // return image return new Response( '', { headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' }} ) } else { // return page return `disconnect to the server` } } // application fetch network data self.addEventListener('fetch', event => { // abandon non-GET requests if (event.request.method !== 'GET') return const url = event.request.url event.respondWith( caches.open(CACHE) .then(cache => { return cache.match(event.request) .then(response => { if (response) { // return cached file console.log('cache fetch: ' + url) return response } // make network request return fetch(event.request) .then(newreq => { console.log('network fetch: ' + url) if (newreq.ok) cache.put(event.request, newreq.clone()) return newreq }) // app is offline .catch(() => offlineAsset(url)) }) }) ) })