Service worker for offline usage w/ workbox (https://developer.chrome.com/docs/workbox/modules/workbox-cli; https://github.com/openscad/openscad-playground/issues/56)

package.json

@@ -24,9 +24,10 @@
     "react-widgets": "^5.8.4"
   },
   "scripts": {
-    "start": "concurrently 'npx webpack serve --mode=development' 'NODE_ENV=development npx rollup --config openscad-worker.rollup.config.js --watch'",
+    "start": "concurrently 'npm run generateSW' 'npx webpack serve --mode=development' 'NODE_ENV=development npx rollup --config openscad-worker.rollup.config.js --watch'",
     "start:prod": "PUBLIC_URL=http://localhost:3000/dist/ npm run build && npx serve",
-    "build": "NODE_ENV=production npx rollup --config openscad-worker.rollup.config.js && webpack --mode=production"
+    "generateSW": "workbox generateSW workbox-config.js",
+    "build": "NODE_ENV=production npx rollup --config openscad-worker.rollup.config.js && webpack --mode=production && npm run generateSW"
   },
   "eslintConfig": {
     "extends": [
@@ -71,6 +72,7 @@
     "tslib": "^2.5.0",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.2"
+    "webpack-dev-server": "^4.15.2",
+    "workbox-cli": "^7.1.0"
   }
 }

src/index.tsx

@@ -32,7 +32,32 @@ if (process.env.NODE_ENV !== 'production') {
 declare var BrowserFS: BrowserFSInterface
 
 
-(async () => {
+
+window.addEventListener('load', async () => {
+  //*
+  if ('serviceWorker' in navigator) {
+      try {
+          const registration = await navigator.serviceWorker.register('./sw.js');
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+
+          registration.onupdatefound = () => {
+              const installingWorker = registration.installing;
+              if (installingWorker) {
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                        // Reload to activate the service worker and apply caching
+                        window.location.reload();
+                        return;
+                    }
+                };
+              }
+          };
+      } catch (err) {
+          console.log('ServiceWorker registration failed: ', err);
+      }
+  }
+  //*/
+  
   registerCustomAppHeightCSSProperty();
 
   const fs = await createEditorFS({prefix: '/', allowPersistence: isInStandaloneMode});
@@ -73,6 +98,6 @@ declare var BrowserFS: BrowserFSInterface
       <App initialState={initialState} statePersister={statePersister} fs={fs} />
     </React.StrictMode>
   );
-})();
+});
 
 

workbox-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	globDirectory: 'dist/',
+	globPatterns: [
+		'**/*.{js,txt,wav,ico,eot,svg,ttf,woff,woff2,css,html,zip,png,json,wasm,jpg}'
+	],
+	swDest: 'dist/sw.js',
+	ignoreURLParametersMatching: [
+		/^utm_/,
+		/^fbclid$/
+	]
+};