add pwa
This commit is contained in:
lei.jiang
parent
ce87fff20a
commit
3cd673b9af
12
index.html
12
index.html
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<link rel="manifest" href="./manifest.json">
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<title>vue-element-admin</title>
|
<title>vue-element-admin</title>
|
||||||
|
|
@ -12,4 +13,15 @@
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
|
<script>
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.register('sw.js').then(function(registration) {
|
||||||
|
// Registration Success
|
||||||
|
console.log('[serviceWorker]: registration successful with scope: ', registration.scope)
|
||||||
|
}).catch(function(err) {
|
||||||
|
// Registration failed :(
|
||||||
|
console.log('[serviceWorker] registration failed', err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
|
@ -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(
|
||||||
|
'<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
|
||||||
|
{ headers: {
|
||||||
|
'Content-Type': 'image/svg+xml',
|
||||||
|
'Cache-Control': 'no-store'
|
||||||
|
}}
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// return page
|
||||||
|
return `<html><body>disconnect to the server</body></html>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
)
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue