pwa

index.html

@@ -18,6 +18,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Ionic App" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="theme-color" content="#1c1c1c">
     <title>FirstCash</title>
 </head>
 

package.json

@@ -62,7 +62,8 @@
     "eslint-plugin-vue": "^9.3.0",
     "prettier": "^2.7.1",
     "vite": "^3.2.4",
-    "vite-plugin-imagemin": "^0.6.1"
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-pwa": "^0.14.1"
   },
   "overrides": {
     "@capacitor-community/media": {

vite.config.js

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import viteImagemin from 'vite-plugin-imagemin'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
@@ -37,6 +38,38 @@ export default defineConfig(({ command, mode }) => {
                     ]
                 },
                 webp: false
+            }),
+            VitePWA({
+                registerType: 'autoUpdate',
+                manifest: {
+                    name: 'FirstCash',
+                    short_name: 'FirstCash',
+                    theme_color: '#1c1c1c',
+                    background_color: '#1c1c1c',
+                    display: 'fullscreen',
+                    icons: [
+                        {
+                            src: '/icon-192x192.png',
+                            sizes: '192x192',
+                            type: 'image/png'
+                        },
+                        {
+                            src: '/icon-256x256.png',
+                            sizes: '256x256',
+                            type: 'image/png'
+                        },
+                        {
+                            src: '/icon-384x384.png',
+                            sizes: '384x384',
+                            type: 'image/png'
+                        },
+                        {
+                            src: '/icon-512x512.png',
+                            sizes: '512x512',
+                            type: 'image/png'
+                        }
+                    ]
+                }
             })
         ],
         resolve: {