fix: extract service worker setup to Svelte app initialization

lib/frontend/components/Status.svelte

@@ -14,7 +14,7 @@
 </style>
 
 <script>
-  import { parseStatusStore, requestStore } from '../stores'
+  import { parseStatusStore, requestStore, swStatusStore } from '../stores'
 
   $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
   $: pendingRequest = Boolean($requestStore && !$requestStore.error)
@@ -36,4 +36,9 @@
       {$parseStatusStore}
     </div>
   {/if}
+  {#if $swStatusStore}
+    <div class='status-item'>
+      {$swStatusStore}
+    </div>
+  {/if}
 </div>

lib/frontend/index.js

@@ -2,11 +2,14 @@ import App from './components/App.svelte'
 
 import * as stores from './stores'
 import * as services from './services'
+import serviceWorkerBoot from './sw-boot'
 
 const boot = () => {
 
   services.storageListener.register()
 
+  serviceWorkerBoot()
+
   new App({
     target: document.querySelector('#root'),
   })

lib/frontend/stores/index.js

@@ -2,10 +2,12 @@ import configStore from './configStore'
 import eventStore from './eventStore'
 import parseStatusStore from './parseStatusStore'
 import requestStore from './requestStore'
+import swStatusStore from './swStatusStore'
 
 export {
   configStore,
   eventStore,
   parseStatusStore,
   requestStore,
+  swStatusStore,
 }

lib/frontend/stores/swStatusStore.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export default writable(null)

lib/frontend/sw-boot.js

@@ -0,0 +1,40 @@
+import { swStatusStore } from './stores'
+
+export default () => {
+  if (!window.navigator || !window.navigator.serviceWorker) {
+    return
+  }
+
+  const { serviceWorker } = window.navigator
+
+  serviceWorker.register('sw.js', {
+    scope: './',
+  }).then((registration) => {
+    swStatusStore.set(`Service worker registered with scope ${registration.scope}`)
+    setTimeout(() => {
+      swStatusStore.set(null)
+    }, 4500)
+
+    registration.addEventListener('updatefound', () => {
+      console.info('Service worker will be updated...')
+      const newWorker = registration.installing
+
+      newWorker.addEventListener('statechange', () => {
+        if (newWorker.state === 'installed') {
+          newWorker.postMessage({ action: 'skipWaiting' })
+        }
+      })
+    })
+  }).catch((err) => {
+    swStatusStore.set(`Service worker error: ${err.toString()}`)
+  })
+
+  let refreshing
+  serviceWorker.addEventListener('controllerchange', () => {
+    if (refreshing) {
+      return
+    }
+    window.location.reload()
+    refreshing = true
+  })
+}