betaflight · haslinghuis · Jan 3, 2024 · Dec 31, 2023
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "switchery-latest": "^0.8.2",
     "three": "~0.97.0",
     "universal-ga": "^1.2.0",
+    "vite-plugin-pwa": "^0.17.4",
     "vue": "^2.7.10"
   },
   "devDependencies": {

diff --git a/src/images/pwa/apple-touch-icon.png b/src/images/pwa/apple-touch-icon.png
diff --git a/src/images/pwa/favicon.ico b/src/images/pwa/favicon.ico
diff --git a/src/images/pwa/pwa-192-192.png b/src/images/pwa/pwa-192-192.png
diff --git a/src/images/pwa/pwa-512-512.png b/src/images/pwa/pwa-512-512.png
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <meta name="author" content="cTn"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
 
     <script type="module" src="/src/js/utils/common.js"></script>
     <script type="module" src="/src/js/browserMain.js"></script>
 
-    <title></title>
+    <title>Betaflight</title>
+    <meta name="description" content="Configurator for betaflight firmware">
+    <link rel="icon" href="/images/pwa/favicon.ico">
+    <link rel="apple-touch-icon" href="/images/pwa/apple-touch-icon.png" sizes="128x128">
+    <meta name="theme-color" content="#eea600">
 </head>
 <body>
 <div id="main-wrapper">

diff --git a/src/js/browserMain.js b/src/js/browserMain.js
@@ -50,3 +50,11 @@ import "../components/EscDshotDirection/Styles.css";
 import "../css/dark-theme.less";
 
 import "./main";
+
+import { registerSW } from 'virtual:pwa-register';
+
+registerSW({
+    onOfflineReady() {
+        alert('App is ready for offline use.');
+    },
+});
diff --git a/vite.config.js b/vite.config.js
@@ -6,6 +6,7 @@ import { readFileSync } from "node:fs";
 import copy from "rollup-plugin-copy";
 import pkg from './package.json';
 import * as child from 'child_process';
+import { VitePWA } from "vite-plugin-pwa";
 
 const commitHash = child.execSync('git rev-parse --short HEAD').toString();
 
@@ -73,6 +74,33 @@ export default defineConfig({
             ],
             hook: "writeBundle",
         }),
+        VitePWA({
+            registerType: 'autoUpdate',
+            workbox: {
+                globPatterns: ['**/*.{js,css,html,ico,png,svg,json,mcm}'],
+                // 5MB
+                maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+            },
+            includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
+            manifest: {
+                name: pkg.productName,
+                short_name: pkg.productName,
+                description: pkg.description,
+                theme_color: '#ffffff',
+                icons: [
+                    {
+                        src: '/images/pwa/pwa-192-192.png',
+                        sizes: '192x192',
+                        type: 'image/png',
+                    },
+                    {
+                        src: '/images/pwa/pwa-512-512.png',
+                        sizes: '512x512',
+                        type: 'image/png',
+                    },
+                ],
+            },
+        }),
     ],
     root: "./src",
     resolve: {

diff --git a/yarn.lock b/yarn.lock