diff --git a/ui/src/routes/+layout.ts b/ui/src/routes/+layout.ts index 16f09e4..fc322da 100644 --- a/ui/src/routes/+layout.ts +++ b/ui/src/routes/+layout.ts @@ -9,12 +9,12 @@ export const ssr = false; const sw_state = { triedUpdate: false, hasUpdate: false }; -function onSWupdate(sw_state: {hasUpdate: boolean}) { +function onSWupdate(sw_state: {hasUpdate: boolean}, installingWorker: ServiceWorker) { if (!sw_state.hasUpdate) { toasts.addToast({ title: get_store_value(t)('upgrade.title'), message: get_store_value(t)('upgrade.content'), - onclick: () => location.reload(), + onclick: () => installingWorker.postMessage('SKIP_WAITING'), }); } sw_state.hasUpdate = true; @@ -29,29 +29,34 @@ export const load: Load = async({ fetch, route, url }) => { if (MODE == 'production' && 'serviceWorker' in navigator) { navigator.serviceWorker.ready.then((registration) => { - if (registration.waiting) { - onSWupdate(sw_state); - } - registration.onupdatefound = () => { - const installingWorker = registration.installing + const installingWorker = registration.installing; if (installingWorker === null) return; installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed' && navigator.serviceWorker.controller) { - onSWupdate(sw_state); + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + onSWupdate(sw_state, installingWorker); + } } } } if (!sw_state.triedUpdate) { sw_state.triedUpdate = true; - console.log("try sw update"); registration.update(); setInterval(function (reg) { reg.update() }, 36000000, registration); } }); + + let refreshing = false; + navigator.serviceWorker.addEventListener('controllerchange', () => { + if (!refreshing) { + window.location.reload(); + refreshing = true; + } + }); } // Load user session if any diff --git a/ui/src/service-worker.ts b/ui/src/service-worker.ts index a15b020..89cfeda 100644 --- a/ui/src/service-worker.ts +++ b/ui/src/service-worker.ts @@ -18,6 +18,13 @@ self.addEventListener('install', (event) => { event.waitUntil(addFilesToCache()); }); +self.addEventListener('message', (event) => { + if (event.data === 'SKIP_WAITING') { + console.log("SKIP_WAITING"); + self.skipWaiting(); + } +}); + self.addEventListener('activate', (event) => { console.log(`%c SW ${version} `, 'background: #ddd; color: #0000ff')