PWA (#819)

.gitignore

@@ -36,4 +36,7 @@ yarn-error.log*
 *.sw?
 
 # rollup-plugin-visualizer generated files
-stats.html
+/stats.html
+
+# pwa dev
+/dev-dist

index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/icons/icon.ico" />
     <link rel="apple-touch-icon" href="/icons/icon.png" />
-    <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://apis.google.com" crossorigin>
     <meta property="og:title" content="HyperTuner Cloud">

package.json

@@ -41,7 +41,8 @@
     "react-router-dom": "^6.4.2",
     "uplot": "^1.6.22",
     "uplot-react": "^1.1.1",
-    "vite": "^3.1.8"
+    "vite": "^3.1.8",
+    "vite-plugin-pwa": "^0.13.1"
   },
   "devDependencies": {
     "@hyper-tuner/eslint-config": "^0.1.6",

public/manifest.json

@@ -1,37 +0,0 @@
-{
-  "short_name": "HyperTuner",
-  "name": "HyperTuner Cloud",
-  "description": "HyperTuner Cloud - Share your tunes and logs",
-  "icons": [
-    {
-      "src": "/icons/icon.ico",
-      "type": "image/x-icon",
-      "sizes": "256x256"
-    },
-    {
-      "src": "/icons/icon.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "screenshots" : [
-    {
-      "src": "/img/screen1.png",
-      "sizes": "1920x1194",
-      "type": "image/png",
-      "platform": "wide",
-      "label": "VE Table with command palette"
-    },
-    {
-      "src": "/img/screen2.png",
-      "sizes": "1920x1194",
-      "type": "image/png",
-      "platform": "wide",
-      "label": "Log viewer"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#191C1E",
-  "background_color": "#191C1E"
-}

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -35,5 +36,48 @@ export default defineConfig({
   plugins: [
     react(),
     visualizer(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true,
+      },
+      manifest: {
+        name: 'HyperTuner Cloud',
+        short_name: 'HyperTuner',
+        description: 'HyperTuner Cloud - Share your tunes and logs',
+        start_url: '.',
+        display: 'standalone',
+        theme_color: '#191C1E',
+        background_color: '#191C1E',
+        icons: [
+          {
+            src: '/icons/icon.ico',
+            type: 'image/x-icon',
+            sizes: '256x256',
+          },
+          {
+            src: '/icons/icon.png',
+            type: 'image/png',
+            sizes: '512x512',
+          },
+        ],
+        screenshots: [
+          {
+            src: '/img/screen2.png',
+            sizes: '1920x1194',
+            type: 'image/png',
+            platform: 'wide',
+            label: 'Log viewer',
+          },
+          {
+            src: '/img/screen1.png',
+            sizes: '1920x1194',
+            type: 'image/png',
+            platform: 'wide',
+            label: 'VE Table with command palette',
+          },
+        ],
+      },
+    }),
   ],
 });