Fix service worker to enable it to replace old one (#389)

* fix: add cleanupOutdatedCaches option * use custom sw & force update * skipWaiting and claim before cleanupOutdatedCaches * add ts files to NetworkFirst cache * remove ts from cache * register sw on index.html * change sw from ts to js * test updates to trigger build * registerSW in index.html * remove unused code and comment of registering sw * update files to trigger build
wasedatime · May 20, 2022 · 7c6cd35 · 7c6cd35
1 parent 5d47e3c
commit 7c6cd35
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 50 deletions.
diff --git a/root/package.json b/root/package.json
@@ -62,11 +62,7 @@
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-html-env": "^1.1.2",
     "vite-plugin-import-maps": "^0.1.2",
-    "vite-plugin-pwa": "^0.12.0",
-    "workbox-core": "6.5.1",
-    "workbox-precaching": "6.5.1",
-    "workbox-routing": "6.5.1",
-    "workbox-window": "^6.5.3"
+    "vite-plugin-pwa": "^0.12.0"
   },
   "dependencies": {
     "@aws-amplify/auth": "4.5.0",
@@ -116,8 +112,12 @@
     "single-spa-react": "4.6.1",
     "styled-components": "5.3.3",
     "workbox-cacheable-response": "6.5.1",
+    "workbox-core": "6.5.1",
     "workbox-expiration": "6.5.1",
-    "workbox-strategies": "6.5.1"
+    "workbox-precaching": "6.5.1",
+    "workbox-routing": "6.5.1",
+    "workbox-strategies": "6.5.1",
+    "workbox-window": "^6.5.3"
   },
   "peerDependencies": {
     "@babel/plugin-syntax-flow": "^7.16.7",

diff --git a/root/pnpm-lock.yaml b/root/pnpm-lock.yaml
diff --git a/root/src/index.html b/root/src/index.html
@@ -71,6 +71,13 @@
       <link rel="preload" href="/campus/assets/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
       <noscript><link rel="stylesheet" href="/campus/assets/style.css"></noscript>
     <% } %>
+    <script type="module">
+      import { registerSW } from "virtual:pwa-register";
+      if ('serviceWorker' in navigator) {
+        registerSW();
+      }
+    </script>
+
     <link rel="preload" as="font" href="/fonts/segoe-ui.ttf" type="font/ttf" crossorigin="anonymous" />
     <link rel="preload" as="font" href="/fonts/yugothic-medium.otf" type="font/otf" crossorigin="anonymous" />
     <link rel="preload" as="font" href="/fonts/Lato-Regular.ttf" type="font/ttf" crossorigin="anonymous" />

diff --git a/root/src/sw.js b/root/src/sw.js
@@ -0,0 +1,54 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-restricted-globals */
+import { clientsClaim, setCacheNameDetails } from "workbox-core";
+import { precacheAndRoute, cleanupOutdatedCaches } from "workbox-precaching";
+import { registerRoute } from "workbox-routing";
+import { NetworkFirst, StaleWhileRevalidate } from "workbox-strategies";
+
+self.__WB_DISABLE_DEV_LOGS = true;
+
+self.skipWaiting();
+clientsClaim();
+
+cleanupOutdatedCaches();
+precacheAndRoute(self.__WB_MANIFEST);
+
+setCacheNameDetails({
+  prefix: "wasedatime-cache",
+  precache: "precache",
+  runtime: "runtime",
+});
+
+registerRoute(
+  ({ event }) => event.request.mode === "navigate",
+  new NetworkFirst({
+    fetchOptions: {
+      credentials: "same-origin",
+    },
+  })
+);
+
+registerRoute(
+  /.*\.(?:js|css)/,
+  new NetworkFirst({
+    fetchOptions: {
+      credentials: "same-origin",
+    },
+  })
+);
+
+registerRoute(
+  /.*\.(?:png|jpg|jpeg|svg|gif|woff|woff2|eot|ttf|otf)/,
+  new StaleWhileRevalidate({
+    fetchOptions: {
+      credentials: "same-origin",
+    },
+  })
+);
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+    clientsClaim();
+  }
+});
diff --git a/root/src/wasedatime-root-config.ts b/root/src/wasedatime-root-config.ts
@@ -36,7 +36,6 @@ const applications = constructApplications({
     ),
 });
 const layoutEngine = constructLayoutEngine({ routes, applications });
-
 applications.forEach(registerApplication);
 layoutEngine.activate();
 start();

diff --git a/root/tsconfig.json b/root/tsconfig.json
@@ -30,6 +30,7 @@
       "es2016.array.include",
       "es2018",
       "esnext",
+      "WebWorker",
     ],
   },
   "include": ["src"],

diff --git a/root/vite.config.ts b/root/vite.config.ts
@@ -62,7 +62,11 @@ export default defineConfig(({ mode }) => {
       reactRefresh(),
       dynamicImport(),
       VitePWA({
+        strategies: "injectManifest",
+        srcDir: ".",
+        filename: "sw.js",
         registerType: "autoUpdate",
+        useCredentials: mode === "staging",
         includeAssets: [
           "favicon.svg",
           "favicon.ico",
@@ -94,40 +98,6 @@ export default defineConfig(({ mode }) => {
             },
           ],
         },
-        workbox: {
-          runtimeCaching: [
-            {
-              urlPattern: ({ event }) => event.request.mode === "navigate",
-              handler: 'NetworkFirst',
-              options: {
-                cacheName: "navigate-cache",
-                fetchOptions: {
-                  credentials: "same-origin",
-                },
-              },
-            },
-            {
-              urlPattern: /.*\.(?:js|ts|css)/,
-              handler: 'NetworkFirst',
-              options: {
-                cacheName: "js-css-cache",
-                fetchOptions: {
-                  credentials: "same-origin",
-                },
-              },
-            },
-            {
-              urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif|woff|woff2|eot|ttf|otf)/,
-              handler: "StaleWhileRevalidate",
-              options: {
-                cacheName: "image-font-cache",
-                fetchOptions: {
-                  credentials: "same-origin",
-                },
-              },
-            },
-          ],
-        },
       }),
     ],
     assetsInclude: ["**/*.png", "**/*.jpg", "**/*.svg"],