try to implement pwa (#5)

* feature: generate icons && add manifest && update vite.config.js * fix: move icons
nogorka · May 5, 2024 · 8c2774a · 8c2774a
1 parent 7fbaa09
commit 8c2774a
Show file tree

Hide file tree

Showing 20 changed files with 521 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.svg">
+    <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,9 +20,7 @@
     "lrm-graphhopper": "^1.3.0",
     "papaparse": "^5.4.1",
     "primeicons": "^7.0.0",
-    "vite-plugin-pwa": "^0.19.8",
     "vue": "^3.4.21",
-    "vue-pwa-asset-generator": "^1.7.3",
     "vue-qrcode-reader": "^5.5.4",
     "vue-router": "^4.3.0",
     "vuex": "^4.0.2"
@@ -37,6 +35,8 @@
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
-    "vite": "^5.2.8"
+    "vite": "^5.2.8",
+    "vite-plugin-pwa": "^0.20.0",
+    "vue-pwa-asset-generator": "^1.7.3"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
diff --git a/public/img/icons/android-chrome-512x512.png b/public/img/icons/android-chrome-512x512.png
diff --git a/public/img/icons/android-chrome-maskable-192x192.png b/public/img/icons/android-chrome-maskable-192x192.png
diff --git a/public/img/icons/android-chrome-maskable-512x512.png b/public/img/icons/android-chrome-maskable-512x512.png
diff --git a/public/img/icons/apple-touch-icon-120x120.png b/public/img/icons/apple-touch-icon-120x120.png
diff --git a/public/img/icons/apple-touch-icon-152x152.png b/public/img/icons/apple-touch-icon-152x152.png
diff --git a/public/img/icons/apple-touch-icon-180x180.png b/public/img/icons/apple-touch-icon-180x180.png
diff --git a/public/img/icons/apple-touch-icon-60x60.png b/public/img/icons/apple-touch-icon-60x60.png
diff --git a/public/img/icons/apple-touch-icon-76x76.png b/public/img/icons/apple-touch-icon-76x76.png
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
diff --git a/public/img/icons/msapplication-icon-144x144.png b/public/img/icons/msapplication-icon-144x144.png
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
diff --git a/public/favicon.svg → public/img/icons/safari-pinned-tab.svg b/public/favicon.svg → public/img/icons/safari-pinned-tab.svg
diff --git a/vite.config.js b/vite.config.js
@@ -2,11 +2,101 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'auto',
+      workbox: {
+        cleanupOutdatedCaches: true,
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}']
+      },
+      manifest: {
+        name: 'CVRP (VFMP) GA',
+        short_name: 'cvrp-ga',
+        description: 'LMD client for presenting thw work of Genetic Algorithm used to get optimal routes at the scope of capacitated vehicle routing problem (vehicle fleet mix problem)',
+        theme_color: 'white',
+        background_color: 'white',
+        display: 'standalone',
+        icons: [
+          {
+            'src': './img/icons/android-chrome-192x192.png',
+            'sizes': '192x192',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/android-chrome-512x512.png',
+            'sizes': '512x512',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/android-chrome-maskable-192x192.png',
+            'sizes': '192x192',
+            'type': 'image/png',
+            'purpose': 'maskable'
+          },
+          {
+            'src': './img/icons/android-chrome-maskable-512x512.png',
+            'sizes': '512x512',
+            'type': 'image/png',
+            'purpose': 'maskable'
+          },
+          {
+            'src': './img/icons/apple-touch-icon-60x60.png',
+            'sizes': '60x60',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/apple-touch-icon-76x76.png',
+            'sizes': '76x76',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/apple-touch-icon-120x120.png',
+            'sizes': '120x120',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/apple-touch-icon-152x152.png',
+            'sizes': '152x152',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/apple-touch-icon-180x180.png',
+            'sizes': '180x180',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/apple-touch-icon.png',
+            'sizes': '180x180',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/favicon-16x16.png',
+            'sizes': '16x16',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/favicon-32x32.png',
+            'sizes': '32x32',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/msapplication-icon-144x144.png',
+            'sizes': '144x144',
+            'type': 'image/png'
+          },
+          {
+            'src': './img/icons/mstile-150x150.png',
+            'sizes': '150x150',
+            'type': 'image/png'
+          }
+        ]
+      }
+    })
   ],
   resolve: {
     alias: {