test VitePWA new config

resources/js/components/rainfall/RainfallGraph.tsx

@@ -47,6 +47,7 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
         svg.append("g")
             .attr("transform", "translate(0," + gHeight + ")")
             .call(d3.axisBottom(x)
+                .ticks(8)
                 .tickFormat(
                     // @ts-ignore
                     d3.timeFormat("%d/%m/%Y")

resources/js/hooks/AuthUser.tsx

@@ -31,6 +31,9 @@ export const AuthUserProvider = ({children}: PropsWithChildren) => {
                 // @ts-ignore
                 if (e.response.status === 401) {
                     console.info('no user login')
+                    if (window.location.pathname !== '/connexion') {
+                        window.location.href = '/connexion'
+                    }
                 }
             } finally {
                 setLoadingAuthUser(false)

resources/js/pages/Rainfall.tsx

@@ -41,7 +41,7 @@ const Rainfall = () => {
         </div>
 
         {errorLabel()}
-        <form className="flex mb-2 mx-5 gap-2">
+        <form className="flex mb-2 mx-5 gap-2 flex-wrap">
             <Field name="start_date"
                    type="date"
                    value={graphDetails.start_date}

resources/views/app.blade.php

@@ -5,12 +5,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <link rel="icon" href="/favicon.ico">
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
-        <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
         <meta name="theme-color" content="#ffffff">
 
-        <link rel="manifest" href="/manifest.webmanifest" />
+        <link rel="icon" href="/favicon.ico" sizes="64x64">
+        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
+        <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">
+        <link rel="manifest" href="/build/manifest.webmanifest">
 
         <title>{{ config('app.name', 'Laravel') }}</title>
         <meta name="description" content="Application de suivi météo">

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({
+    return defineConfig({
-    plugins: [
+        plugins: [
-        laravel({
+            laravel({
-            input: 'resources/js/app.tsx',
+                input: 'resources/js/app.tsx',
-            refresh: true,
+                refresh: true,
-        }),
+            }),
-        react(),
+            react(),
-        copy({
+            copy({
-            targets: [
+                targets: [
-                { src: 'resources/images/*', dest: 'public/images' },
+                    { 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'
-                    }
                 ]
-            }
+            }),
-        })
+            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],
+                }
+            })
+        ],
+    })
+}