deploy sw

client/features/collab-editor.tsx

@@ -1,8 +1,8 @@
 import { HocuspocusProvider } from '@hocuspocus/provider'
 import Editor from '@monaco-editor/react'
+
 import { IndexeddbPersistence } from 'y-indexeddb'
 import { MonacoBinding } from 'y-monaco'
-
 import * as Y from 'yjs'
 
 const DOC_NAME = 'collab-editor'

client/features/reload-prompt.css

@@ -0,0 +1,29 @@
+.ReloadPrompt-container {
+  padding: 0;
+  margin: 0;
+  width: 0;
+  height: 0;
+}
+.ReloadPrompt-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 1;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.ReloadPrompt-toast-message {
+  margin-bottom: 8px;
+}
+.ReloadPrompt-toast-button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}

client/features/reload-prompt.tsx

@@ -0,0 +1,53 @@
+// eslint-disable-next-line import/no-unresolved
+import { useRegisterSW } from 'virtual:pwa-register/react'
+import './reload-prompt.css'
+
+export function ReloadPrompt() {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      // eslint-disable-next-line prefer-template
+      console.log('SW Registered: ' + r)
+    },
+    onRegisterError(error) {
+      console.log('SW registration error', error)
+    },
+  })
+
+  const close = () => {
+    setOfflineReady(false)
+    setNeedRefresh(false)
+  }
+
+  return (
+    <div className='ReloadPrompt-container'>
+      {(offlineReady || needRefresh) && (
+        <div className='ReloadPrompt-toast'>
+          <div className='ReloadPrompt-message'>
+            {offlineReady ? (
+              <span>App ready to work offline</span>
+            ) : (
+              <span>
+                New content available, click on reload button to update.
+              </span>
+            )}
+          </div>
+          {needRefresh && (
+            <button
+              className='ReloadPrompt-toast-button'
+              onClick={() => updateServiceWorker(true)}
+            >
+              Reload
+            </button>
+          )}
+          <button className='ReloadPrompt-toast-button' onClick={() => close()}>
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

client/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+
 import { CollabEditor } from './features/collab-editor.js'
+import { ReloadPrompt } from './features/reload-prompt.js'
 import './main.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
+    <ReloadPrompt />
     <CollabEditor />
   </React.StrictMode>,
 )

client/types/sw.d.ts

@@ -0,0 +1,14 @@
+declare module 'virtual:pwa-register/react' {
+  // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+  // @ts-expect-error ignore when react is not installed
+  import type { Dispatch, SetStateAction } from 'react'
+  import type { RegisterSWOptions } from 'vite-plugin-pwa/types'
+
+  export type { RegisterSWOptions }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>]
+    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>]
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>
+  }
+}

server/plugins/vite-plugin.ts

@@ -1,9 +1,9 @@
-import { env } from '../env.js'
 import appRoot from 'app-root-path'
 import { FastifyInstance } from 'fastify'
 import Fs from 'node:fs/promises'
 import Path from 'node:path'
 import { ViteDevServer } from 'vite'
+import { env } from '../env.js'
 
 const htmlFilePath =
   env.NODE_ENV === 'production'
@@ -25,6 +25,14 @@ export const vitePlugin = async (
       root,
       prefix: '/assets/',
     })
+
+    app.get('/manifest.webmanifest', function (req, reply) {
+      reply.sendFile('manifest.webmanifest', Path.join(appRoot.path, 'dist'))
+    })
+    app.get('/sw.js', function (req, reply) {
+      reply.sendFile('sw.js', Path.join(appRoot.path, 'dist'))
+    })
+
     app.get('*', async (request, reply) => {
       const token = reply.generateCsrf()
       const template = htmlFile.replace('<!--csrf-token-->', token)

tsconfig.json

@@ -10,7 +10,7 @@
     "experimentalDecorators": false,
     "emitDecoratorMetadata": false,
     "jsx": "react-jsx",
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-pwa/react"],
     "declaration": true,
     "outDir": "./dist",
     "removeComments": true,