diff --git a/index.html b/index.html index 489d1a53..44e2d764 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + vue-element-admin @@ -12,4 +13,15 @@
+ diff --git a/manifest.json b/manifest.json new file mode 100644 index 00000000..121a866e --- /dev/null +++ b/manifest.json @@ -0,0 +1,15 @@ +{ + "name": "VUE-ELEMENT-ADMIN", + "short_name": "VEAPWA", + "icons": [ + { + "src": "./build/logo.png", + "sizes": "200x200", + "type": "image/png" + } + ], + "start_url": "http://localhost:9527", + "display": "standalone", + "background_color": "#2d3a4b", + "theme_color": "#3d5165" +} diff --git a/sw.js b/sw.js new file mode 100644 index 00000000..29bbc505 --- /dev/null +++ b/sw.js @@ -0,0 +1,114 @@ +// configuration +`use strict` + +const version = '2.0.0' +const CACHE = version + '::PWAsite' +const offlineURL = '/offline/' +const installFilesEssential = [ + '/', + './static/tinymce4.7.5/*', + // './dist/css/*', + // './dist/fonts/*', + // './dist/img/*', + './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( + 'offlineoffline', + { 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)) + }) + }) + + ) +})