Add versioning to UI

src/components/menu.tsx

@@ -1,4 +1,4 @@
-import { pigmicePurple } from '@/colors'
+import { offBlack, pigmicePurple, textGrey } from '@/colors'
 import Icon from '@/components/icon'
 import { Scrim, scrimHiddenClass } from '@/components/scrim'
 import {
@@ -11,6 +11,7 @@ import {
   mdiLoginVariant,
   mdiLogoutVariant,
   mdiCloudUpload,
+  mdiAutorenew,
 } from '@mdi/js'
 import { logout, useJWT } from '@/jwt'
 import { createShadow } from '@/utils/create-shadow'
@@ -22,8 +23,10 @@ import { darken, lighten, rgba } from 'polished'
 import { ComponentChildren } from 'preact'
 import IconButton from './icon-button'
 import { useSavedReports } from '@/api/report/submit-report'
+
 import { useSavedTeams } from '@/api/save-teams'
 import { useEventInfo } from '@/cache/event-info/use'
+import { useEffect, useState } from 'preact/hooks'
 
 const spacing = '0.3rem'
 
@@ -232,8 +235,101 @@ export const Menu = ({ onHide, visible }: Props) => {
               </>
             )}
           </ul>
+          <VersionInfo />
         </nav>
       </aside>
     </Scrim>
   )
 }
+
+const versionInfoStyle = css`
+  font-family: monospace;
+  text-align: center;
+  font-size: 0.8rem;
+  padding: 0.3rem;
+  color: ${textGrey};
+`
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.addEventListener('message', (event) => {
+    if (event.data === 'refresh') {
+      location.reload()
+    }
+  })
+}
+
+const VersionInfo = () => {
+  const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  useEffect(() => {
+    if (!('serviceWorker' in navigator)) return
+    const checkForNewVersion = () => {
+      navigator.serviceWorker.getRegistration().then((registration) => {
+        setIsNewVersionAvailable(
+          registration ? registration.waiting !== null : false,
+        )
+      })
+    }
+    checkForNewVersion()
+    const listenForNewVersion = (event: MessageEvent) => {
+      if (event.data !== 'new version') return
+      checkForNewVersion()
+    }
+    navigator.serviceWorker.addEventListener('message', listenForNewVersion)
+    return () =>
+      navigator.serviceWorker.removeEventListener(
+        'message',
+        listenForNewVersion,
+      )
+  }, [])
+
+  return (
+    <>
+      {process.env.BRANCH && process.env.COMMIT_REF && (
+        <div class={versionInfoStyle}>{`${
+          process.env.BRANCH
+        }-${process.env.COMMIT_REF.slice(0, 7)}`}</div>
+      )}
+      {isNewVersionAvailable && (
+        <button
+          class={newVersionButtonStyle}
+          disabled={isRefreshing}
+          onClick={async () => {
+            setIsRefreshing(true)
+            const registration = await navigator.serviceWorker.getRegistration()
+            if (!registration) return
+            registration.waiting?.postMessage('refresh')
+          }}
+        >
+          {isRefreshing ? 'Updating...' : 'New Version Available'}
+          {!isRefreshing && (
+            <Icon class={updateButtonIconStyle} icon={mdiAutorenew} />
+          )}
+        </button>
+      )}
+    </>
+  )
+}
+
+const newVersionButtonStyle = css`
+  border: 0;
+  background: transparent;
+  text-decoration: underline;
+  color: #3976b7;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  &[disabled] {
+    color: ${offBlack};
+    text-decoration: none;
+    cursor: default;
+  }
+`
+
+const updateButtonIconStyle = css`
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+`

src/sw.ts

@@ -24,15 +24,30 @@ const setupCache = async () => {
   })
 }
 
-self.addEventListener('install', function (event) {
+self.addEventListener('install', async (event) => {
   event.waitUntil(setupCache())
-  // If there is not an existing service worker installed
-  // And the browser supports skipWaiting, call skipWaiting
-  if (!self.registration.installing) {
+  if (self.registration.installing) {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    const tabs = await self.clients.matchAll({ includeUncontrolled: true })
+    tabs.forEach((tab) => {
+      tab.postMessage('new version')
+    })
+  } else {
+    // If there is not an existing service worker installed
+    // And the browser supports skipWaiting, call skipWaiting
     self.skipWaiting()
   }
 })
 
+self.addEventListener('message', async (event) => {
+  if (event.data !== 'refresh') return
+  await self.skipWaiting()
+  const tabs = await self.clients.matchAll()
+  tabs.forEach((tab) => {
+    tab.postMessage('refresh')
+  })
+})
+
 // When the new SW activates, delete any old caches
 self.addEventListener('activate', () => {
   caches.keys().then((cacheKeys) =>