pwa much

microsofthackathons · Sep 15, 2023 · ea3f42c · ea3f42c
1 parent 615306b
commit ea3f42c
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 49 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Remy AI</title>

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -2,19 +2,19 @@
     "name": "Remy the AI Chef Assistant",
     "short_name": "Remy AI",
     "icons": [
-      {
-        "src": "logo192.png",
-        "sizes": "192x192",
-        "type": "image/png"
-      },
-      {
-        "src": "logo512.png",
-        "sizes": "512x512",
-        "type": "image/png"
-      }
+        {
+            "src": "logo192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "logo512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
     ],
     "start_url": ".",
     "display": "standalone",
     "theme_color": "#000000",
     "background_color": "#ffffff"
-  }
+}
diff --git a/frontend/public/offline.html b/frontend/public/offline.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Remy AI Chef Assistant</title>
+</head>
+<body>
+    <div className="App">
+        <header className="App-header">
+            <img src="logo512.png" className="App-logo" alt="logo" />
+            <p>
+                Please go ONLINE
+            </p>
+        </header>
+    </div>
+</body>
+</html>
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -9,9 +9,12 @@ import Layout from "./pages/layout/Layout";
 import NoPage from "./pages/NoPage";
 import Chat from "./pages/chat/Chat";
 import { AppStateProvider } from "./state/AppProvider";
+import * as ServiceWorkerRegistration from "./serviceWorkerRegistration";
 
 initializeIcons();
 
+ServiceWorkerRegistration.unregister();
+
 export default function App() {
     return (
         <AppStateProvider>

diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -739,8 +739,7 @@ const Chat = () => {
                     )}
                     {(appStateContext?.state.isChatHistoryOpen && appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured) && <ChatHistoryPanel />}
                 </Stack>
-            )
-            }
+            )}
             <Stack horizontal className={styles.bottomNav}>
                 <Stack.Item className={styles.bottomNavButtonContainer}>
                     <IconButton

diff --git a/frontend/src/service-worker.ts b/frontend/src/service-worker.ts
@@ -0,0 +1,36 @@
+export {};
+
+const CACHE_NAME = "my-cache";
+
+//install service worker
+self.addEventListener("install", (event: any) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) =>
+            cache.addAll(["/", "/index.html", "/styles.css", "/app.js"])
+        )
+    );
+});
+
+//activate service worker
+self.addEventListener("activate", (event: any) => {
+    event.waitUntil(
+        caches.keys().then((keyList) =>
+            Promise.all(
+                keyList.map((key) => {
+                    if (key !== CACHE_NAME) {
+                        return caches.delete(key);
+                    }
+                })
+            )
+        )
+    );
+});
+
+//listen for requests
+self.addEventListener("fetch", (event: any) => {
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request);
+        })
+    );
+});
diff --git a/frontend/src/serviceWorkerRegistration.ts b/frontend/src/serviceWorkerRegistration.ts
@@ -0,0 +1,26 @@
+export function register() {
+    if ("serviceWorker" in navigator) {
+        window.addEventListener("load", () => {
+            navigator.serviceWorker
+                .register("/service-worker.js")
+                .then((registration) => {
+                    console.log("Service worker registered:", registration);
+                })
+                .catch((error) => {
+                    console.error("Service worker registration failed:", error);
+                });
+        });
+    }
+}
+
+export function unregister() {
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.ready
+            .then((registration) => {
+                registration.unregister();
+            })
+            .catch((error) => {
+                console.error("Service worker unregistration failed:", error);
+            });
+    }
+}
diff --git a/static/assets/index-b1382f32.js → static/assets/index-58c579a4.js b/static/assets/index-b1382f32.js → static/assets/index-58c579a4.js
diff --git a/static/assets/index-58c579a4.js.map b/static/assets/index-58c579a4.js.map
diff --git a/static/assets/index-b1382f32.js.map b/static/assets/index-b1382f32.js.map
diff --git a/static/index.html b/static/index.html
@@ -2,10 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="manifest" href="/manifest.json" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Remy AI</title>
-    <script type="module" crossorigin src="/assets/index-b1382f32.js"></script>
+    <script type="module" crossorigin src="/assets/index-58c579a4.js"></script>
     <link rel="stylesheet" href="/assets/index-48efc6bf.css">
   </head>
   <body>

diff --git a/static/manifest.json b/static/manifest.json
@@ -2,19 +2,19 @@
     "name": "Remy the AI Chef Assistant",
     "short_name": "Remy AI",
     "icons": [
-      {
-        "src": "logo192.png",
-        "sizes": "192x192",
-        "type": "image/png"
-      },
-      {
-        "src": "logo512.png",
-        "sizes": "512x512",
-        "type": "image/png"
-      }
+        {
+            "src": "logo192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "logo512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
     ],
     "start_url": ".",
     "display": "standalone",
     "theme_color": "#000000",
     "background_color": "#ffffff"
-  }
+}
diff --git a/static/offline.html b/static/offline.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Remy AI Chef Assistant</title>
+</head>
+<body>
+    <div className="App">
+        <header className="App-header">
+            <img src="logo512.png" className="App-logo" alt="logo" />
+            <p>
+                Please go ONLINE
+            </p>
+        </header>
+    </div>
+</body>
+</html>