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
+  })
+}

lib/static/index.js

@@ -13,12 +13,6 @@ import { requestStore } from '../frontend/stores'
 import { Request } from '../frontend/records'
 
 (() => {
-  let request = null
-
-  requestStore.subscribe((updatedRequest) => {
-    request = updatedRequest
-  })
-
   document.addEventListener('DOMContentLoaded', boot)
 
   const configureLogger = (logger) => {
@@ -34,57 +28,5 @@ import { Request } from '../frontend/records'
     logger.setRemoteLogging(shouldTrack)
   }
 
-  const clearStatuses = () => {
-    document.querySelectorAll('.status-item').forEach((item) => {
-      item.classList.remove('show')
-    })
-  }
-
-  const setServiceWorkerStatus = (status) => {
-    clearStatuses()
-    const sw = document.querySelector('#service-worker')
-    sw.innerText = status
-    status ? sw.classList.add('show') : sw.classList.remove('show')
-  }
-
-  const form = document.querySelector('form')
-  const submitButton = document.querySelector("#submit")
-  const input = document.querySelector("#url")
-  const link = document.querySelector("#current-download")
-
-  if (window.navigator && window.navigator.serviceWorker) {
-    const serviceWorker = window.navigator.serviceWorker
-    serviceWorker.register('sw.js', {
-      scope: './',
-    }).then((registration) => {
-      setServiceWorkerStatus(`Service worker registered with scope ${registration.scope}`)
-      setTimeout(() => {
-        setServiceWorkerStatus('')
-      }, 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) => {
-      setServiceWorkerStatus(`Service worker error: ${err.toString()}`)
-    })
-
-    let refreshing
-    serviceWorker.addEventListener('controllerchange', () => {
-      if (refreshing) {
-        return
-      }
-      window.location.reload()
-      refreshing = true
-    })
-  }
-
   configureLogger(logger)
 })()