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 <[email protected]>
creasico · Dec 24, 2023 · 88bcdc1 · 88bcdc1
1 parent d3c4ce4
commit 88bcdc1
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 36 deletions.
diff --git 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
@@ -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,
         },
       }),
     ],