Add PWA Functionality

Add PWA functionality using Vite-PWA, -Includes service worker -Cross platform installable: Windows, iOS, Android -Implements caching with automatic updates and outdated cache cleanup -Auto light and dark mode switching of status bar
FlowFuse · Mar 27, 2024 · 1946ebe · 1946ebe
1 parent a625508
commit 1946ebe
Show file tree

Hide file tree

Showing 17 changed files with 5,038 additions and 422 deletions.
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,33 @@
+{
+  "display": "standalone",
+  "lang": "en",
+  "theme_color": "#ffffff",
+  "orientation": "any",
+  "name": "Node-RED Dashboard 2.0",
+  "short_name": "Dashboard",
+  "description": "Node-RED Dashboard 2.0",
+
+  "icons": [
+    {
+      "src": "pwa-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "pwa-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "pwa-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "maskable-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
         "dev:prod": "vite build --watch",
         "docs:build": "vitepress build docs",
         "docs:dev": "vitepress dev docs",
+        "generate-pwa-assets": "pwa-assets-generator",
         "lint": "npm run lint:js && npm run lint:package",
         "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
         "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
@@ -60,6 +61,7 @@
     "devDependencies": {
         "@mdi/font": "~6.9.96",
         "@unhead/vue": "^1.7.4",
+        "@vite-pwa/assets-generator": "^0.2.4",
         "@vitejs/plugin-vue": "^4.5.0",
         "chart.js": "^4.4.0",
         "cypress": "^13.6.2",
@@ -91,6 +93,7 @@
         "socket.io-client": "^4.7.2",
         "sort-package-json": "^2.6.0",
         "vite": "^5.0.0",
+        "vite-plugin-pwa": "^0.19.5",
         "vitepress": "^1.0.0-rc.40",
         "vue-router": "^4.2.4",
         "vuetify": "^3.4.10",

diff --git a/pwa-assets.config.js b/pwa-assets.config.js
@@ -0,0 +1,12 @@
+import {
+    defineConfig,
+    minimal2023Preset as preset
+} from '@vite-pwa/assets-generator/dist/config'
+
+export default defineConfig({
+    headLinkOptions: {
+        preset: '2023'
+    },
+    preset,
+    images: ['./ui/public/logo-512x512.png']
+})
diff --git a/ui/index.html b/ui/index.html
@@ -2,15 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="apple-mobile-web-app-title" content="Node-RED Dashboard 2.0">
-    <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Node-RED Dashboard 2.0</title>
+    <meta name="description" content="Node-RED Dashboard 2.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="/favicon.ico" type="image/svg+xml">
+    <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16">
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">
+    <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
+
+    <!-- Auto light and dark mode switching of status bar -->
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111" />
+
   </head>
   <body>
     <div id="app"></div>

diff --git a/ui/public/apple-touch-icon-180x180.png b/ui/public/apple-touch-icon-180x180.png
diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg
diff --git a/ui/public/logo-512x512.png b/ui/public/logo-512x512.png
diff --git a/ui/public/logo.svg b/ui/public/logo.svg
diff --git a/ui/public/maskable-icon-512x512.png b/ui/public/maskable-icon-512x512.png
diff --git a/ui/public/pwa-192x192.png b/ui/public/pwa-192x192.png
diff --git a/ui/public/pwa-512x512.png b/ui/public/pwa-512x512.png
diff --git a/ui/public/pwa-64x64.png b/ui/public/pwa-64x64.png
diff --git a/ui/src/assets/favicon.ico b/ui/src/assets/favicon.ico
diff --git a/ui/src/main.mjs b/ui/src/main.mjs
@@ -19,6 +19,12 @@ import './stylesheets/common.css'
 
 import store from './store/index.mjs'
 
+// PWA
+import { registerSW } from 'virtual:pwa-register'
+
+// register service worker
+registerSW({ immediate: true })
+
 // set a base theme on which we will add our custom NR-defined theme
 const theme = {
     dark: false,

diff --git a/vite.config.js b/vite.config.js
@@ -1,5 +1,8 @@
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'
+
+import manifest from './manifest.json'
 
 /**
  * Vite is used to build the UI for the dashboard,
@@ -13,7 +16,24 @@ export default defineConfig({
             vue: 'vue/dist/vue.esm-bundler.js'
         }
     },
-    plugins: [vue()],
+    plugins: [vue(),
+        // VitePWA({ registerType: 'autoUpdate', devOptions: {
+        //     enabled: true} })
+        VitePWA({
+            registerType: 'autoUpdate',
+            manifest,
+            includeAssets: ['favicon.svg', 'favicon.ico', 'apple-touch-icon.png'],
+            // switch to "true" to enable sw on development
+            devOptions: {
+                enabled: false
+            },
+            workbox: {
+                maximumFileSizeToCacheInBytes: 3000000,
+                globPatterns: ['**/*.{js,css,html}', '**/*.{svg,png,jpg,gif}'],
+                cleanupOutdatedCaches: true
+            }
+        })
+    ],
     root: 'ui',
     build: {
         outDir: '../dist',