test VitePWA new config

vite.config.js

@@ -4,47 +4,92 @@ import react from '@vitejs/plugin-react';
 import copy from "rollup-plugin-copy";
 import { VitePWA } from 'vite-plugin-pwa'
 
+export default () => {
+    const manifestIcons = [
+        {
+            src: '/pwa-64x64.png',
+            sizes: '64x64',
+            type: 'image/png'
+        },
+        {
+            src: '/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+        },
+        {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any'
+        },
+        {
+            src: '/maskable-icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable'
+        },
+    ]
+    const publicIcons = [
+        { src: '/favicon.ico' },
+        { src: '/favicon.svg' },
+        { src: '/apple-touch-icon-180x180.png' }
+    ]
+    const additionalImages = []
 
-export default defineConfig({
-    plugins: [
-        laravel({
-            input: 'resources/js/app.tsx',
-            refresh: true,
-        }),
-        react(),
-        copy({
-            targets: [
-                { src: 'resources/images/*', dest: 'public/images' },
-            ]
-        }),
-        VitePWA({
-            registerType: 'autoUpdate',
-            includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
-            manifest: {
-                name: 'Bermite',
-                short_name: 'Bermite',
-                lang: "fr",
-                description: 'Application de suivi météo',
-                theme_color: '#ffffff',
-                display: "standalone",
-                icons: [
-                    {
-                        src: '/pwa-64x64.png',
-                        sizes: '64x64',
-                        type: 'image/png'
-                    },
-                    {
-                        src: '/pwa-192x192.png',
-                        sizes: '192x192',
-                        type: 'image/png'
-                    },
-                    {
-                        src: '/pwa-512x512.png',
-                        sizes: '512x512',
-                        type: 'image/png'
-                    }
+    return defineConfig({
+        plugins: [
+            laravel({
+                input: 'resources/js/app.tsx',
+                refresh: true,
+            }),
+            react(),
+            copy({
+                targets: [
+                    { src: 'resources/images/*', dest: 'public/images' },
                 ]
-            }
-        })
-    ],
-});
+            }),
+            VitePWA({
+                buildBase: '/build/',
+                scope: '/',
+                base: '/',
+                registerType: 'prompt',
+                devOptions: {
+                    enabled: false
+                },
+                includeAssets: [],
+                workbox: {
+                    globPatterns: ['**/*.{js,css,html,ico,jpg,png,svg,woff,woff2,ttf,eot}'],
+                    navigateFallback: '/',
+                    navigateFallbackDenylist: [/^\/horizon/],
+                    additionalManifestEntries: [
+                        { url: '/', revision: `${Date.now()}` },
+                        ...manifestIcons.map((i) => {
+                            return { url: i.src, revision: `${Date.now()}` }
+                        }),
+                        ...publicIcons.map((i) => {
+                            return { url: i.src, revision: `${Date.now()}` }
+                        }),
+                        ...additionalImages.map((i) => {
+                            return { url: i.src, revision: `${Date.now()}` }
+                        })
+                    ],
+                    maximumFileSizeToCacheInBytes: 3000000
+                },
+                manifest: {
+                    name: 'Bermite',
+                    short_name: 'Bermite',
+                    lang: "fr",
+                    description: 'Application de suivi météo',
+                    theme_color: '#ffffff',
+                    display: "standalone",
+                    scope: '/',
+                    start_url: '/',
+                    id: '/',
+
+                    // These icons are used when installing the PWA onto a home screen
+                    icons: [...manifestIcons],
+                }
+            })
+        ],
+    })
+}