PWA Improvements

index.html

@@ -13,10 +13,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link rel="apple-touch-icon" href="/logo-512.png">
   <title>IPCheck.ing - Check My IP Address and Geolocation - Check WebRTC Connection IP - DNS Leak Test - Speed Test - Jason Ng Open Source </title>
-  <link rel="manifest" href="manifest.json">
   <link rel="icon" href="logo.svg">
 
-
   <style>
     .jn-spinner {
       border: 4px solid rgb(12, 144, 34);
@@ -66,16 +64,6 @@
   </div>
   <div id="app"></div>
   <script type="module" src="/src/main.js"></script>
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('service-worker.js').then(function (registration) {
-        }, function (err) {
-          console.log('ServiceWorker Error: ', err);
-        });
-      });
-    }
-  </script>
 </body>
 
 </html>

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-pwa": "^0.17.5"
   }
 }

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

vite.config.js

@@ -1,13 +1,42 @@
 import dotenv from 'dotenv';
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
 dotenv.config();
 
 const apiPort = process.env.PORT || 11966;
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'auto',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}']
+      },
+      manifest: {
+        name: 'IPCheck.ing',
+        short_name: 'IPCheck.ing',
+        theme_color: '#f8f9fa',
+        orientation: "portrait",
+        id: 'com.jasonng.myip',
+        icons: [
+          {
+            src: '/logo-192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/logo-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+  ],
   resolve: {
     alias: {
       '@': '/src',