feat(pwa): add PWA support for https based instances (#654)

index.html

@@ -5,13 +5,14 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <title>Mainsail</title>
+        <meta name="description" content="Mainsail is the popular web interface for Klipper." />
 
         <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png" />
         <meta name="theme-color" content="#121212" />
+        <meta name="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" />
-        <link rel="manifest" href="/manifest.json" />
         <meta name="apple-mobile-web-app-title" content="Mainsail" />
         <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png" />
         <link rel="mask-icon" href="/img/icons/icon-196-maskable.png" color="#121212" />

package.json

@@ -74,11 +74,13 @@
         "vite": "^2.7.13",
         "vite-plugin-checker": "^0.4.2",
         "vite-plugin-package-version": "^1.0.2",
+        "vite-plugin-pwa": "^0.11.13",
         "vite-plugin-vue2": "^1.9.3",
         "vue-debounce-decorator": "^1.0.1",
         "vue-i18n-extract": "^1.2.3",
         "vue-router": "^3.5.2",
-        "vue-template-compiler": "^2.6.14"
+        "vue-template-compiler": "^2.6.14",
+        "workbox-core": "^6.4.2"
     },
     "postcss": {
         "plugins": {

public/manifest.json

@@ -1,23 +0,0 @@
-{
-    "short_name": "Mainsail",
-    "name": "Mainsail",
-    "display": "standalone",
-    "scope": "/",
-    "start_url": "/",
-    "theme_color": "#D51F26",
-    "background_color": "#121212",
-    "icons": [
-        {
-            "src": "/img/icons/icon-196-maskable.png",
-            "sizes": "196x196",
-            "type": "image/png",
-            "purpose": "any maskable"
-        },
-        {
-            "src": "/img/icons/icon-512-maskable.png",
-            "sizes": "512x512",
-            "type": "image/png",
-            "purpose": "any maskable"
-        }
-    ]
-}

src/main.ts

@@ -8,6 +8,12 @@ import './plugins/longpress'
 import store from '@/store'
 import router from '@/plugins/router'
 
+import { registerSW } from 'virtual:pwa-register'
+
+const updateSW = registerSW({
+    onOfflineReady() {},
+})
+
 Vue.config.productionTip = false
 
 // vue-observe-visibility

src/sw.ts

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="WebWorker" />
+
+declare let self: ServiceWorkerGlobalScope
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
+import { clientsClaim } from 'workbox-core'
+
+cleanupOutdatedCaches() // cleanup everything that's not needed anymore
+
+precacheAndRoute(self.__WB_MANIFEST) //cache our new stuff
+self.skipWaiting()
+clientsClaim()

src/types/shims-tsx.d.ts

@@ -1,15 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import Vue, { VNode } from 'vue'
-
-declare global {
-    namespace JSX {
-        // tslint:disable no-empty-interface
-        interface Element extends VNode {}
-        // tslint:disable no-empty-interface
-        interface ElementClass extends Vue {}
-        interface IntrinsicElements {
-            [elem: string]: any
-        }
-    }
-}

tsconfig.json

@@ -15,7 +15,8 @@
     "types": [
       "vite/client",
       "vuetify",
-      "@intlify/vite-plugin-vue-i18n/client"
+      "@intlify/vite-plugin-vue-i18n/client",
+      "vite-plugin-pwa/client"
     ],
     "paths": {
       "@/*": [
@@ -34,7 +35,8 @@
   },
   "include": [
     "components.d.ts",
-    "src/**/*.ts",
+    "src/main.ts",
+    "src/*/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",

vite.config.ts

@@ -7,10 +7,48 @@ import checker from 'vite-plugin-checker'
 
 import path from 'path'
 import buildVersion from './src/plugins/build-version'
+import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
+
+const PWAConfig: Partial<VitePWAOptions> = {
+    registerType: 'autoUpdate',
+    strategies: 'injectManifest',
+    srcDir: 'src',
+    filename: 'sw.ts',
+    includeAssets: ['fonts/**/*.woff2', 'img/**/*.svg', 'img/**/*.png'],
+    manifest: {
+        name: 'Mainsail',
+        short_name: 'Mainsail',
+        theme_color: '#D51F26',
+        background_color: '#121212',
+        icons: [
+            {
+                src: '/img/icons/icon-196-maskable.png',
+                sizes: '196x196',
+                type: 'image/png',
+            },
+            {
+                src: '/img/icons/icon-512-maskable.png',
+                sizes: '512x512',
+                type: 'image/png',
+            },
+            {
+                src: '/img/icons/icon-512-maskable.png',
+                sizes: '512x512',
+                type: 'image/png',
+                purpose: 'any maskable',
+            },
+        ],
+    },
+    /* enable sw on development */
+    devOptions: {
+        enabled: true,
+    },
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
+        VitePWA(PWAConfig),
         buildVersion(),
         vue(),
         loadVersion(),