fix service worker webpack assets not being found

This commit is contained in:
Nolan Lawson 2018-03-31 17:26:10 -07:00
parent 8c076622eb
commit 0779436714
2 changed files with 33 additions and 6 deletions

View File

@ -4,6 +4,10 @@ import '../routes/_utils/serviceWorkerClient'
import '../routes/_utils/historyEvents' import '../routes/_utils/historyEvents'
import '../routes/_utils/loadingMask' import '../routes/_utils/loadingMask'
console.log('1')
console.log('2')
console.log('3')
loadPolyfills().then(() => { loadPolyfills().then(() => {
console.log('init()') console.log('init()')
// `routes` is an array of route objects injected by Sapper // `routes` is an array of route objects injected by Sapper

View File

@ -1,19 +1,21 @@
const timestamp = '__timestamp__' const timestamp = '__timestamp__'
const ASSETS = `assets_${timestamp}` const ASSETS = `assets_${timestamp}`
const WEBPACK_ASSETS = `webpack_assets_${timestamp}`
const ON_DEMAND = `ondemand_${timestamp}` const ON_DEMAND = `ondemand_${timestamp}`
// `assets` is an array of everything in the `assets` directory // `assets` is an array of everything in the `assets` directory
const assets = __assets__ const assets = __assets__
.map(file => file.startsWith('/') ? file : `/${file}`) .map(file => file.startsWith('/') ? file : `/${file}`)
.filter(filename => !filename.startsWith('/apple-icon')) .filter(filename => !filename.startsWith('/apple-icon'))
.concat(['/index.html'])
// `shell` is an array of all the files generated by webpack // `shell` is an array of all the files generated by webpack
// also contains '/index.html' for some reason // also contains '/index.html' for some reason
const resources = __shell__ const webpackAssets = __shell__
.filter(filename => !filename.endsWith('.map')) .filter(filename => !filename.endsWith('.map'))
.filter(filename => filename !== '/index.html')
const toCache = [].concat(assets).concat(resources) const cacheSet = new Set([].concat(assets).concat(webpackAssets))
const cacheSet = new Set(toCache)
// `routes` is an array of `{ pattern: RegExp }` objects that // `routes` is an array of `{ pattern: RegExp }` objects that
// match the pages in your app // match the pages in your app
@ -21,8 +23,10 @@ const routes = __routes__
self.addEventListener('install', event => { self.addEventListener('install', event => {
event.waitUntil((async () => { event.waitUntil((async () => {
let cache = await caches.open(ASSETS) await Promise.all([
await cache.addAll(toCache) caches.open(WEBPACK_ASSETS).then(cache => cache.addAll(webpackAssets)),
caches.open(ASSETS).then(cache => cache.addAll(assets))
])
self.skipWaiting() self.skipWaiting()
})()) })())
}) })
@ -33,11 +37,30 @@ self.addEventListener('activate', event => {
// delete old asset/ondemand caches // delete old asset/ondemand caches
for (let key of keys) { for (let key of keys) {
if (key !== ASSETS && key !== ON_DEMAND) { if (key !== ASSETS &&
key !== ON_DEMAND &&
!key.startsWith('webpack_assets_')) {
await caches.delete(key) await caches.delete(key)
} }
} }
// for webpack assets, keep the two latest builds because we may need
// them when the service worker has installed but the page has not
// yet reloaded (e.g. when it gives the toast saying "please reload"
// but then you don't refresh and instead load an async chunk)
let webpackKeysToDelete = keys
.filter(key => key.startsWith('webpack_assets_'))
.sort((a, b) => {
let aTimestamp = parseInt(a.substring(15), 10)
let bTimestamp = parseInt(b.substring(15), 10)
return bTimestamp < aTimestamp ? -1 : 1
})
.slice(2)
for (let key of webpackKeysToDelete) {
await caches.delete(key)
}
await self.clients.claim() await self.clients.claim()
})()) })())
}) })