adds sw

giacomorebonato · Jun 28, 2023 · f33389c · f33389c
1 parent 72660c3
commit f33389c
Show file tree

Hide file tree

Showing 9 changed files with 2,056 additions and 14 deletions.
diff --git a/client/features/reload-prompt.css b/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;
+}
diff --git a/client/features/reload-prompt.tsx b/client/features/reload-prompt.tsx
@@ -0,0 +1,54 @@
+import './reload-prompt.css'
+
+// eslint-disable-next-line import/no-unresolved
+import { useRegisterSW } from 'virtual:pwa-register/react'
+
+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>
+  )
+}
diff --git a/client/main.tsx b/client/main.tsx
@@ -4,10 +4,12 @@ import ReactDOM from 'react-dom/client'
 import { CollabEditor } from './features/collab-editor.js'
 import './features/monaco-worker.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>,
 )
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title>collab-editor</title>
     <link rel="icon" type="image/x-icon" href="/client/assets/favicon.ico" />
   </head>
-  <body class="bg-neutral pb-8">
+  <body style="background-color: #1e1e1e">
     <input
       id="csrf-token"
       type="hidden"

diff --git a/package.json b/package.json
@@ -72,7 +72,9 @@
     "tsx": "^3.12.7",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "vite-plugin-pwa": "^0.16.4",
+    "vitest": "^0.32.2",
+    "workbox-window": "^7.0.0"
   },
   "packageManager": "[email protected]",
   "engines": {