Merge pull request #398 from jiep/235-add-pwa-offline

PWA offline

netlify.toml

@@ -0,0 +1,21 @@
+[build]
+  publish = "dist"
+  command = "npm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[[headers]]
+  for = "/manifest.webmanifest"
+  [headers.values]
+    Content-Type = "application/manifest+json"
+
+[[headers]]
+  for = "/assets/*"
+  [headers.values]
+    cache-control = '''
+    max-age=31536000,
+    immutable
+    '''

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-metro",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

vite.config.ts

@@ -4,6 +4,8 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { VitePWA } from 'vite-plugin-pwa'
+import { version } from './package.json'
+
 
 
 // https://vite.dev/config/
@@ -12,27 +14,78 @@ export default defineConfig({
     vue(),
     vueDevTools(),
     VitePWA({
-      devOptions: {
-        enabled: true
+      registerType: 'autoUpdate',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json}'],
+        navigateFallback: '/index.html',
+        runtimeCaching: [
+          {
+            urlPattern: ({ request }) => request.destination === 'document',
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'html-cache',
+            },
+          },
+          {
+            urlPattern: ({ request }) => ['script', 'style'].includes(request.destination),
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'assets-cache',
+            },
+          },
+          {
+            urlPattern: ({ request }) => request.destination === 'image',
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'image-cache',
+            },
+          },
+          {
+            urlPattern: ({ url }) => url.pathname.endsWith('.json'),
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'data-cache',
+            },
+          },
+        ],
       },
-      includeAssets: ['img/icons/favicon.ico', 'img/icons/apple-touch-icon.png'],
       manifest: {
         name: 'ts-metro',
         short_name: 'ts-metro',
         description: 'Busca la ruta más corta entre estaciones del metro de Madrid',
         theme_color: '#2563eb',
+        "background_color": "#2563eb",
+        "display": "standalone",
+        "scope": "/",
+        "start_url": "/",
         icons: [
           {
             src: 'img/icons/android-chrome-192x192.png',
             sizes: '192x192',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: 'img/icons/android-chrome-512x512.png',
             sizes: '512x512',
-            type: 'image/png'
+            type: 'image/png',
+          },
+          {
+            src: 'img/icons/android-chrome-maskable-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: ['any', 'maskable'],
+          },
+          {
+            src: 'img/icons/android-chrome-maskable-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: ['any', 'maskable'],
           }
-        ]
+        ],
+        ...{ version },
+      },
+      devOptions: {
+        enabled: true
       }
     })
   ],