Lets see how this goes.

placeAtlas · Jul 30, 2022 · 3ea5b5d · 3ea5b5d
1 parent aa87d37
commit 3ea5b5d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 35 deletions.
diff --git a/web/index.html b/web/index.html
@@ -50,7 +50,7 @@
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
 
 		<link rel="manifest" href="./manifest.webmanifest">
-
+		<script type="module" src="./pwabuilders-sw-register"></script>
 		<script src="./_js/favicon.js" defer></script>
 		<script type="application/ld+json">
 			{

diff --git a/web/manifest.webmanifest b/web/manifest.webmanifest
@@ -1,35 +1,34 @@
 {
-	"background_color": "#111111",
-	"display": "minimal-ui",
-	"scope": "/",
-	"start_url": "/",
-	"name": "r/place Atlas",
-	"short_name": "placeAtlas2",
-	"description": "The atlas for the r/place event from 2022",
-	"icons": [
-		{
-			"src": "_img/pwa/logo-round-192x192.png",
-			"sizes": "192x192",
-			"type": "image/png",
-			"purpose": "any"
-		},
-		{
-			"src": "_img/pwa/logo-maskable-192x192.png",
-			"sizes": "192x192",
-			"type": "image/png",
-			"purpose": "maskable"
-		},
-		{
-			"src": "_img/pwa/logo-round-512x512.png",
-			"sizes": "512x512",
-			"type": "image/png",
-			"purpose": "any"
-		},
-		{
-			"src": "_img/pwa/logo-maskable-512x512.png",
-			"sizes": "512x512",
-			"type": "image/png",
-			"purpose": "maskable"
-		}
-	]
-}
+    "background_color": "#111111",
+    "display": "minimal-ui",
+    "scope": "/",
+    "start_url": "/",
+    "name": "r/place Atlas",
+    "short_name": "placeAtlas2",
+    "description": "The atlas for the r/place event from 2022",
+    "icons": [{
+            "src": "/_img/logo-round-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/_img/logo-maskable-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "/_img/logo-round-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/_img/logo-maskable-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/web/pwabuilder-sw.js b/web/pwabuilder-sw.js
@@ -0,0 +1,26 @@
+// This is the "Offline copy of assets" service worker
+
+const CACHE = "pwabuilder-offline";
+const QUEUE_NAME = "bgSyncQueue";
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+self.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "SKIP_WAITING") {
+        self.skipWaiting();
+    }
+});
+
+const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(QUEUE_NAME, {
+    maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
+});
+
+workbox.routing.registerRoute(
+    new RegExp('/*'),
+    new workbox.strategies.StaleWhileRevalidate({
+        cacheName: CACHE,
+        plugins: [
+            bgSyncPlugin
+        ]
+    })
+);
diff --git a/web/pwabuilders-sw-register.js b/web/pwabuilders-sw-register.js
@@ -0,0 +1,14 @@
+// This is the "Background Sync" service worker
+
+// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
+// If you get an error about not being able to import, double check that you have type="module" on your <script /> tag
+
+/*
+ This code uses the pwa-update web component https://github.com/pwa-builder/pwa-update to register your service worker,
+ tell the user when there is an update available and let the user know when your PWA is ready to use offline.
+*/
+
+import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
+
+const el = document.createElement('pwa-update');
+document.body.appendChild(el);