From 88bcdc19369b15d22829df5f881b2e82305cfda0 Mon Sep 17 00:00:00 2001
From: Fery Wardiyanto <ferywardiyanto@gmail.com>
Date: Sun, 24 Dec 2023 19:06:54 +0700
Subject: [PATCH] test: move service-worker scopes to `/` instead of `/build/`

By default the `laravel-vite-plugin` will overwrite the sw build directory
to `public/build` dir, and someone find it incorrect, see vite-pwa/vite-plugin-pwa#547
or even couldn't get it working at all vite-pwa/vite-plugin-pwa#431. wandering
around the community I come across the `vite.config.js` [^1] to move the build
scope to root folder, as consequence we need to configure our server to allow
service worker to run on root public directory while the `sw.js` located in
`build` directory.

As of now, I still need to ensure how it works while I learn and make the service worker
working in the first place

[^1]: https://github.com/sfreytag/laravel-vite-pwa/blob/ecbdb05c1935040737b2c57ee0e2690f784e7a2c/vite.config.js\#L62-L154

Signed-off-by: Fery Wardiyanto <ferywardiyanto@gmail.com>
---
 scripts/deploy/nginx.conf |  4 ++
 vite.config.ts            | 95 ++++++++++++++++++++++++---------------
 2 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/scripts/deploy/nginx.conf b/scripts/deploy/nginx.conf
index 005b5c7d..24d4b1e8 100644
--- a/scripts/deploy/nginx.conf
+++ b/scripts/deploy/nginx.conf
@@ -50,6 +50,10 @@ server {
 		}
 	}
 
+	location ~ sw.js {
+		add_header 'Service-Worker-Allowed' '/';
+	}
+
 	location ~ \.php$ {
 		try_files $uri =404;
 
diff --git a/vite.config.ts b/vite.config.ts
index 6a743766..52226fdc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,6 +26,45 @@ export default defineConfig(({ mode }) => {
     messagingSenderId: env.FIREBASE_MESSAGING_SENDER_ID,
   }
 
+  /**
+   * Define the icons that:
+   * 1. We want to include in the webmanifest, and
+   * 2. We want to service worker to pre-cache for offline use.
+   */
+  const manifestIcons = [
+    {
+      src: '/vendor/creasico/favicon.svg',
+      sizes: '512x512',
+      type: 'image/svg+xml',
+    },
+    {
+      src: '/vendor/creasico/icon-192x192.png',
+      sizes: '192x192',
+      type: 'image/png',
+    },
+    {
+      src: '/vendor/creasico/icon-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+    },
+    {
+      src: '/vendor/creasico/icon-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+      purpose: 'maskable',
+    },
+  ]
+
+  /**
+   * Define the icons that:
+   * 1. We don't need in the webmanifest, and
+   * 2. We want to service worker to pre-cache for offline use.
+   */
+  const publicIcons = [
+    { src: '/favicon.ico' },
+    { src: '/vendor/creasico/apple-touch-icon.png' },
+  ]
+
   return {
     resolve: {
       alias: {
@@ -152,19 +191,11 @@ export default defineConfig(({ mode }) => {
        * @see https://vite-pwa-org.netlify.app/guide
        */
       pwa({
+        buildBase: '/build/',
         devOptions: {
           // enabled: (mode !== 'production' && !!env.APP_DEBUG),
-          type: mode !== 'production' ? 'classic' : 'module',
-        },
-        filename: 'sw.ts',
-        srcDir: rootDir,
-        registerType: 'prompt',
-        strategies: 'injectManifest',
-        workbox: {
-          mode,
-          globPatterns: ['**/*.{css,ico,js,jpeg,png,svg,woff2}'],
-          navigateFallback: '/',
         },
+        includeAssets: [],
         manifest: {
           id: '/',
           name: env.APP_NAME,
@@ -173,33 +204,25 @@ export default defineConfig(({ mode }) => {
           lang: env.APP_LOCALE || 'id',
           scope: '/',
           orientation: 'any',
-          icons: [
-            {
-              src: '/favicon.ico',
-              sizes: '48x48',
-            },
-            {
-              src: '/vendor/creasico/favicon.svg',
-              sizes: '512x512',
-              type: 'image/svg+xml',
-            },
-            {
-              src: '/vendor/creasico/icon-192x192.png',
-              sizes: '192x192',
-              type: 'image/png',
-            },
-            {
-              src: '/vendor/creasico/icon-512x512.png',
-              sizes: '512x512',
-              type: 'image/png',
-            },
-            {
-              src: '/vendor/creasico/icon-512x512.png',
-              sizes: '512x512',
-              type: 'image/png',
-              purpose: 'maskable',
-            },
+          icons: manifestIcons,
+        },
+        scope: '/',
+        srcDir: rootDir,
+        workbox: {
+          additionalManifestEntries: [
+            // Cache the root URL to get hold of the PWA HTML entrypoint
+            // https://github.com/vite-pwa/vite-plugin-pwa/issues/431#issuecomment-1703151065
+            { url: '/', revision: `${Date.now()}` },
+
+            // Cache the icons defined above for the manifest
+            ...manifestIcons.map(i => ({ url: i.src, revision: `${Date.now()}` })),
+
+            // Cache the other offline icons defined above
+            ...publicIcons.map(i => ({ url: i.src, revision: `${Date.now()}` })),
           ],
+          globPatterns: ['**/*.{css,ico,js,jpeg,png,svg,woff2}'],
+          navigateFallback: '/',
+          skipWaiting: true,
         },
       }),
     ],