Better service worker

package.json

@@ -10,12 +10,17 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-replace": "^2.4.1",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0"
+    "rollup-plugin-workbox": "^6.1.1",
+    "svelte": "^3.0.0",
+    "workbox-precaching": "^6.1.1",
+    "workbox-routing": "^6.1.1",
+    "workbox-strategies": "^6.1.1"
   },
   "dependencies": {
     "howler": "^2.2.1",

public/service-worker.js

@@ -1,44 +0,0 @@
-self.addEventListener('install', function (event) {
-    event.waitUntil(
-        caches.open("main").then(function (cache) {
-            return cache.addAll(
-                [
-                    "/",
-                    "/global.css",
-                    "/times.woff2",
-                    "/icon.png",
-                    "/build/bundle.css",
-                    "/build/bundle.js",
-
-                    "/sound/success.wav",
-                    "/sound/thought_patterns.m4a",
-
-                    "/sprite/backg.webp",
-                    "/sprite/button1.webp",
-                    "/sprite/button2.webp",
-                    "/sprite/death1.webp",
-                    "/sprite/death2.webp",
-                    "/sprite/death3.webp",
-                    "/sprite/death4.webp",
-
-                    "/sprite/michael_happy.webp",
-                    "/sprite/michael_normal.webp",
-                    "/sprite/michael_wings.webp",
-
-                    "/sprite/uriel_bat.webp",
-                    "/sprite/uriel_normal.webp",
-                    "/sprite/uriel_side_happy.webp",
-                    "/sprite/uriel_side_normal.webp",
-                ]
-            );
-        })
-    );
-});
-
-self.addEventListener('fetch', function (event) {
-    event.respondWith(
-        caches.match(event.request).then(function (response) {
-            return response || fetch(event.request);
-        })
-    );
-});

rollup.config.js

@@ -4,6 +4,8 @@ import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
+import workbox from 'rollup-plugin-workbox';
+import replace from "@rollup/plugin-replace";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -28,7 +30,7 @@ function serve() {
 	};
 }
 
-export default {
+export default [{
 	input: 'src/main.js',
 	output: {
 		sourcemap: true,
@@ -73,4 +75,51 @@ export default {
 	watch: {
 		clearScreen: false
 	}
-};
+}, {
+	input: "src/service-worker.js",
+	output: {
+		sourcemap: true,
+		format: "iife",
+		name: "app",
+		file: "public/build/service-worker.js"
+	},
+	plugins: [
+		resolve({
+			browser: true
+		}),
+		// Generates the file list to precache in service worker
+		workbox.injectManifest({
+			swDest: "./public/build/service-worker.js",
+			swSrc: "./public/build/service-worker.js",
+			globDirectory: "./public",
+//			navigateFallback: "/",
+//			directoryIndex: "index.html",
+			globPatterns: [
+				"**.{js,css,html,png,json,woff2,wav,m4a,webp}",
+				"**/*.{js,css,html,png,json,woff2,wav,m4a,webp}",
+			],
+			manifestTransforms: [
+				manifestEntries => {
+					const manifest = manifestEntries.map(entry => {
+						entry.url = "/" + entry.url;
+						return entry;
+					});
+				  	return {manifest, warnings: []};
+				}
+			],
+			mode: production ? "production" : "development"
+		}, function render({ swDest, count, size }) {
+			console.log(
+			  'Service worker',
+			  '#️⃣', count, "files",
+			  '🐘', size, "bytes"
+			);
+		}),
+		replace({
+			values: {
+				'process.env.NODE_ENV': production ? "\"production\"" : "\"development\""
+			},
+			preventAssignment: true
+		})
+	]
+}];

src/main.js

@@ -5,7 +5,7 @@ const app = new App({
 });
 
 if ('serviceWorker' in navigator) {
-	navigator.serviceWorker.register('/service-worker.js');
+	navigator.serviceWorker.register('/build/service-worker.js');
 }
 
 export default app;

src/service-worker.js

@@ -0,0 +1,15 @@
+import { precacheAndRoute } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  ({request}) => request.destination !== 'script' && request.destination !== "document",
+  new CacheFirst()
+);
+
+registerRoute(
+  ({ request }) => request.destination === "script" || request.destination === "document",
+  new StaleWhileRevalidate()
+);