FlowFuse · joepavitt · Apr 23, 2024 · Mar 22, 2024 · Mar 27, 2024 · Apr 2, 2024
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -55,6 +55,10 @@ Cypress.Commands.add('loadFlows', loadFlows)
 Cypress.Commands.add('deployFlow', deployFlow)
 
 Cypress.Commands.add('deployFixture', (fixture) => {
+    // disables service worker in testing due to ongoing issue with cypress - https://github.com/cypress-io/cypress/issues/27501
+    cy.intercept('/dashboard/sw.js', {
+        body: undefined
+    })
     let helperApi = null
     let rev = null
     // eslint-disable-next-line promise/catch-or-return

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,30 @@
+{
+  "theme_color": "#ffffff",
+  "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
@@ -39,6 +39,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 .",
@@ -64,6 +65,7 @@
     "devDependencies": {
         "@mdi/font": "^7.4.47",
         "@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",
@@ -95,6 +97,7 @@
         "socket.io-client": "^4.7.2",
         "sort-package-json": "^2.6.0",
         "vite": "^5.0.0",
+        "vite-plugin-pwa": "^0.19.8",
         "vitepress": "^1.0.2",
         "vue-router": "^4.2.4",
         "vuetify": "^3.4.10",

diff --git a/pwa-assets.config.js b/pwa-assets.config.js
@@ -0,0 +1,25 @@
+import {
+    defineConfig
+} from '@vite-pwa/assets-generator/dist/config'
+
+export default defineConfig({
+    headLinkOptions: {
+        preset: '2023'
+    },
+    preset: {
+        transparent: {
+            sizes: [64, 192, 512],
+            favicons: [[48, 'favicon.ico']],
+            padding: 0.1
+        },
+        maskable: {
+            sizes: [512],
+            padding: 0.1
+        },
+        apple: {
+            sizes: [180],
+            padding: 0.15
+        }
+    },
+    images: ['./ui/public/logo-512x512.png']
+})
diff --git a/ui/index.html b/ui/index.html
@@ -2,15 +2,23 @@
 <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-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" />
+    <meta name="mobile-web-app-capable" content="yes"> -->
+
     <title>Node-RED Dashboard 2.0</title>
+    <meta name="description" content="Node-RED Dashboard 2.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.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.png b/ui/public/apple-touch-icon.png
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', 'assets/*.png', 'assets/*.woff2', 'assets/*.woff', 'assets/*.ttf', 'assets/*.eot'],
+            // switch to "true" to enable sw on development
+            devOptions: {
+                enabled: false
+            },
+            workbox: {
+                maximumFileSizeToCacheInBytes: 3000000,
+                globPatterns: ['**/*.{js,css,html}', '**/*.{svg,png,jpg,gif,ttf,eot,woff,woff2}'],
+                cleanupOutdatedCaches: true
+            }
+        })
+    ],
     root: 'ui',
     build: {
         outDir: '../dist',