feat: use custom service worker

Signed-off-by: Pedro Lamas <[email protected]>
fluidd-core · Oct 11, 2023 · d5c3b9a · d5c3b9a
1 parent af23445
commit d5c3b9a
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
     <meta name="apple-mobile-web-app-title" content="fluidd" />
     <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon-180x180.png" />
     <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#000000" />
-    <meta name="msapplication-TileImage" content="/img/icons/mstile-150x150.png" />
+    <meta name="msapplication-TileImage" content="%BASE_URL%img/icons/mstile-150x150.png" />
     <meta name="msapplication-TileColor" content="#000000" />
 
     <script type="module" src="/src/main.ts"></script>

diff --git a/src/store/console/mutations.ts b/src/store/console/mutations.ts
@@ -4,12 +4,9 @@ import { MutationTree } from 'vuex'
 import { defaultState } from './state'
 import { Globals } from '@/globals'
 import { ConsoleEntry, ConsoleFilter, ConsoleFilterType, ConsoleState } from './types'
+import escapeRegExp from '@/util/escape-regexp'
 
 const _compileExpression = (filter: ConsoleFilter): RegExp => {
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
-  function escapeRegExp (s: string) {
-    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  }
   switch (filter.type) {
     case ConsoleFilterType.Contains:
       return new RegExp(`.*${escapeRegExp(filter.value)}.*`, 'i')

diff --git a/src/sw.ts b/src/sw.ts
@@ -0,0 +1,55 @@
+/// <reference lib="WebWorker" />
+
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute, PrecacheFallbackPlugin } from 'workbox-precaching'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { StaleWhileRevalidate } from 'workbox-strategies'
+import escapeRegExp from '@/util/escape-regexp'
+
+declare let self: ServiceWorkerGlobalScope
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting()
+  }
+})
+
+precacheAndRoute(self.__WB_MANIFEST)
+
+cleanupOutdatedCaches()
+
+const escapedBaseUrl = escapeRegExp(import.meta.env.BASE_URL)
+
+const denylist = import.meta.env.DEV
+  ? undefined
+  : [
+      'websocket',
+      '(printer|api|access|machine|server)/',
+      'webcam[2-4]?/'
+    ].map(item => new RegExp(`^${escapedBaseUrl}${item}`))
+
+const allowlist = import.meta.env.DEV
+  ? [/^\/$/]
+  : undefined
+
+registerRoute(
+  new NavigationRoute(createHandlerBoundToURL(`${import.meta.env.BASE_URL}index.html`), {
+    allowlist,
+    denylist
+  })
+)
+
+registerRoute(
+  ({ sameOrigin, url }) => sameOrigin && url.pathname === `${import.meta.env.BASE_URL}config.json`,
+  new StaleWhileRevalidate({
+    cacheName: 'config',
+    matchOptions: {
+      ignoreSearch: true
+    },
+    plugins: [
+      new PrecacheFallbackPlugin({
+        fallbackURL: `${import.meta.env.BASE_URL}config.json`
+      })
+    ]
+  }),
+  'GET'
+)
diff --git a/src/util/escape-regexp.ts b/src/util/escape-regexp.ts
@@ -0,0 +1,7 @@
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+
+const escapeRegExp = (value: string) => {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+export default escapeRegExp
diff --git a/vite.config.ts b/vite.config.ts
@@ -14,37 +14,20 @@ import version from './vite.config.inject-version'
 export default defineConfig({
   plugins: [
     VitePWA({
+      srcDir: 'src',
+      filename: 'sw.ts',
+      strategies: 'injectManifest',
       includeAssets: [
         '**/*.svg',
         '**/*.png',
         '**/*.ico',
         '*.json'
       ],
-      workbox: {
+      injectManifest: {
         globPatterns: [
           '**/*.{js,css,html,ttf,woff,woff2,wasm}'
         ],
-        maximumFileSizeToCacheInBytes: 4 * 1024 ** 2,
-        navigateFallbackDenylist: [
-          /^\/websocket/,
-          /^\/(printer|api|access|machine|server)\//,
-          /^\/webcam[2-4]?\//
-        ],
-        runtimeCaching: [
-          {
-            urlPattern: (options) => (options.sameOrigin && options.url.pathname.startsWith('/config.json')),
-            handler: 'StaleWhileRevalidate',
-            options: {
-              cacheName: 'config',
-              matchOptions: {
-                ignoreSearch: true
-              },
-              precacheFallback: {
-                fallbackURL: 'config.json'
-              }
-            }
-          }
-        ]
+        maximumFileSizeToCacheInBytes: 4 * 1024 ** 2
       },
       manifest: {
         name: 'fluidd',
@@ -54,23 +37,23 @@ export default defineConfig({
         background_color: '#000000',
         icons: [
           {
-            src: '/img/icons/android-chrome-192x192.png',
+            src: 'img/icons/android-chrome-192x192.png',
             sizes: '192x192',
             type: 'image/png'
           },
           {
-            src: '/img/icons/android-chrome-512x512.png',
+            src: 'img/icons/android-chrome-512x512.png',
             sizes: '512x512',
             type: 'image/png'
           },
           {
-            src: '/img/icons/android-chrome-maskable-192x192.png',
+            src: 'img/icons/android-chrome-maskable-192x192.png',
             sizes: '192x192',
             type: 'image/png',
             purpose: 'maskable'
           },
           {
-            src: '/img/icons/android-chrome-maskable-512x512.png',
+            src: 'img/icons/android-chrome-maskable-512x512.png',
             sizes: '512x512',
             type: 'image/png',
             purpose: 'maskable'
@@ -79,21 +62,21 @@ export default defineConfig({
         shortcuts: [
           {
             name: 'Configuration',
-            url: '/#/configure',
+            url: '#/configure',
             icons: [
               {
-                src: '/img/icons/shortcut-configuration-96x96.png',
+                src: 'img/icons/shortcut-configuration-96x96.png',
                 sizes: '96x96',
                 type: 'image/png'
               }
             ]
           },
           {
             name: 'Settings',
-            url: '/#/settings',
+            url: '#/settings',
             icons: [
               {
-                src: '/img/icons/shortcut-settings-96x96.png',
+                src: 'img/icons/shortcut-settings-96x96.png',
                 sizes: '96x96',
                 type: 'image/png'
               }
@@ -103,7 +86,8 @@ export default defineConfig({
       },
       devOptions: {
         enabled: true,
-        type: 'module'
+        type: 'module',
+        navigateFallback: 'index.html'
       }
     }),
     vue(),