Merge pull request #44 from openpatch/copilot/integrate-vitepwa

Integrate VitePWA prompt mode with ReloadPrompt component

Author: mikebarkmin

platforms/web/src/App.tsx

@@ -4,6 +4,7 @@ import { LearningMapEditor } from '@learningmap/learningmap';
 import "@learningmap/learningmap/index.css";
 import Learn from './Learn';
 import Landing from './Landing';
+import ReloadPrompt from './ReloadPrompt';
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
         <Route path="/create" element={<LearningMapEditor jsonStore="https://json.openpatch.org" />} />
         <Route path="/learn" element={<Learn />} />
       </Routes>
+      <ReloadPrompt />
     </BrowserRouter>
   )
 }

platforms/web/src/ReloadPrompt.css

@@ -0,0 +1,68 @@
+.ReloadPrompt-container {
+    padding: 0;
+    margin: 0;
+    width: 0;
+    height: 0;
+}
+
+.ReloadPrompt-toast {
+    position: fixed;
+    transition: all 0.3s ease;
+    right: 0;
+    bottom: 0;
+    margin: 32px;
+    padding: 12px;
+    border: 1px solid #8885;
+    border-radius: 8px;
+    z-index: 1;
+    text-align: left;
+    box-shadow: 3px 4px 5px 0 #8885;
+}
+
+.ReloadPrompt-toast.info {
+    background-color: #F0FFFF;
+    border-color: #4682B4;
+    color: #4682B4;
+
+    button {
+        transition: all 0.3s ease;
+        background-color: #4682B4;
+        color: #F0FFFF;
+    }
+
+    button:hover {
+        background-color: #315f7d;
+        border-color: #315f7d;
+    }
+
+    button.close {
+        background-color: transparent;
+        color: #4682B4;
+        border: 1px solid #4682B4;
+    }
+
+    button.close:hover {
+        background-color: #315f7d;
+        color: #F0FFFF;
+        border-color: #315f7d;
+    }
+}
+
+.ReloadPrompt-message {
+    margin-bottom: 8px;
+}
+
+.ReloadPrompt-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+.ReloadPrompt-toast-button {
+    border: 1px solid #8885;
+    outline: none;
+    margin-right: 5px;
+    border-radius: 8px;
+    padding: 6px 12px;
+    cursor: pointer;
+}

platforms/web/src/ReloadPrompt.tsx

@@ -0,0 +1,52 @@
+import './ReloadPrompt.css'
+
+import { useRegisterSW } from 'virtual:pwa-register/react'
+
+const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000 // Check for updates every hour
+
+function ReloadPrompt() {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      console.log(`SW Registered: ${r}`)
+      // Implement periodic SW updates (check every hour)
+      if (r) {
+        setInterval(() => {
+          r.update()
+        }, UPDATE_CHECK_INTERVAL_MS)
+      }
+    },
+    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 info">
+          <div className="ReloadPrompt-message">
+            {offlineReady
+              ? <span>App ready to work offline</span>
+              : <span>New content available, click on reload button to update.</span>
+            }
+          </div>
+          <div className="ReloadPrompt-buttons">
+            {needRefresh && <button className="ReloadPrompt-toast-button" onClick={() => updateServiceWorker(true)}>Reload</button>}
+            <button className="ReloadPrompt-toast-button close" onClick={() => close()}>Close</button>
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
+
+export default ReloadPrompt

platforms/web/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />

platforms/web/tsconfig.app.json

@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-pwa/react"],
     "skipLibCheck": true,
 
     /* Bundler mode */

platforms/web/vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   plugins: [
     react(),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       includeAssets: ['logo.svg', 'concert_one_latin.woff2'],
       manifest: {
         name: 'Learningmap - Interactive Visual Maps for Teaching and Learning',

pnpm-workspace.yaml

@@ -2,3 +2,7 @@ packages:
   - packages/*
   - platforms/*
   - '!**/test/**'
+
+onlyBuiltDependencies:
+  - '@vscode/vsce-sign'
+  - keytar