feat: PWA test

Signed-off-by: Colton Wolkins (Laptop) <colton@indicio.tech>
wyvern-cloud · Mar 17, 2024 · da5d0f2 · da5d0f2
1 parent cd74dcc
commit da5d0f2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 0 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,35 @@
+{
+	"short_name": "Wyvern",
+	"name": "Wyvern: Where communities thrive~",
+	"display": "standalone",
+	"display_override": ["window-controls-overlay"],
+	"theme_color": "#3367D6",
+	"start_url": "/wyvern/",
+	"icons": [
+		{
+			"src": "/pwa/icons-vector.svg",
+			"type": "image/svg+xml",
+			"sizes": "512x512"
+		}
+	],
+	"id": "/wyvern/?source=pwa",
+	"background_color": "#3367D6",
+	"scope": "/wyvern/",
+	"shortcuts": [
+		{
+			"name": "How's the weather today?",
+			"short_name": "Today",
+			"description": "View weather information for today",
+			"url": "/wyvern/today?source=pwa",
+			"icons": [{ "src": "/wyvern/images/today.png", "sizes": "192x192" }]
+		},
+		{
+			"name": "How's the weather tomorrow?",
+			"short_name": "Tomorrow",
+			"description": "View weather information for tomorrow",
+			"url": "/wyvern/tomorrow?source=pwa",
+			"icons": [{ "src": "/wyvern/images/tomorrow.png", "sizes": "192x192" }]
+		}
+	],
+	"description": "Weather forecast information"
+}
diff --git a/public/pwa-script.js b/public/pwa-script.js
@@ -0,0 +1,13 @@
+// Initialize deferredPrompt for use later to show browser install prompt.
+let deferredPrompt;
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent the mini-infobar from appearing on mobile
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI notify the user they can install the PWA
+  showInstallPromotion();
+  // Optionally, send analytics event that PWA install promo was shown.
+  console.log(`'beforeinstallprompt' event was fired.`);
+});
diff --git a/public/pwa/icons-vector.svg b/public/pwa/icons-vector.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,6 +17,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <link rel="manifest" href="/manifest.json" />
+        <script src="/pwa-script.js" />
+      </head>
       <body className={inter.className}>{children}</body>
     </html>
   );