[add] PWA configuration

Author: TechQuery

package.json

@@ -3,9 +3,9 @@
     "version": "1.0.0-beta",
     "description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
     "dependencies": {
-        "@nuintun/qrcode": "^3.0.0",
+        "@nuintun/qrcode": "^3.0.1",
         "@tech_query/snabbdom-looks-like": "^2.0.0",
-        "boot-cell": "^1.0.0-rc.37",
+        "boot-cell": "^1.0.0-rc.38",
         "bootstrap-icons": "^1.0.0-alpha5",
         "cell-router": "^2.0.0-rc.8",
         "classnames": "^2.2.6",
@@ -33,7 +33,8 @@
         "parcel": "^1.12.4",
         "postcss-modules": "^3.2.0",
         "prettier": "^2.0.5",
-        "typescript": "^3.9.7"
+        "typescript": "^3.9.7",
+        "workbox-cli": "^4.3.1"
     },
     "prettier": {
         "singleQuote": true,
@@ -52,9 +53,9 @@
     "scripts": {
         "test": "lint-staged",
         "pack-mdx": "rm -rf document/dist/  &&  mark-cell document/source -p web-cell -f createCell",
-        "pack-tsx": "rm -rf dist/  &&  parcel build source/index.html --public-url .",
-        "build": "npm run pack-mdx  &&  npm run pack-tsx",
-        "start": "npm run pack-mdx  &&  rm -rf dist/  &&  parcel source/index.html --open"
+        "pack-tsx": "parcel build source/index.html --public-url .",
+        "build": "npm run pack-mdx  &&  rm -rf dist/  &&  npm run pack-tsx  &&  workbox generateSW",
+        "start": "npm run pack-mdx  &&  workbox generateSW  &&  parcel source/index.html --open"
     },
     "husky": {
         "hooks": {

source/index.html

@@ -9,6 +9,8 @@
         />
         <title>BootCell</title>
         <link rel="icon" href="https://web-cell.dev/WebCell-0.f1ffd28b.png" />
+        <link rel="manifest" href="index.webmanifest" />
+        <script src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.15/pwacompat.min.js"></script>
         <link
             rel="stylesheet"
             href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.2/dist/dialog-polyfill.css"

source/index.tsx

@@ -1,5 +1,20 @@
-import { documentReady, render, createCell } from 'web-cell';
-
-import { PageRouter } from './page';
-
-documentReady.then(() => render(<PageRouter />));
+import { serviceWorkerUpdate } from 'web-utility';
+import { documentReady, render, createCell } from 'web-cell';
+
+import { PageRouter } from './page';
+
+const { serviceWorker } = window.navigator;
+
+serviceWorker
+    ?.register('sw.js')
+    .then(serviceWorkerUpdate)
+    .then(worker => {
+        if (window.confirm('New version of this Web App detected, update now?'))
+            worker.postMessage({ type: 'SKIP_WAITING' });
+    });
+
+serviceWorker?.addEventListener('controllerchange', () =>
+    window.location.reload()
+);
+
+documentReady.then(() => render(<PageRouter />));

source/index.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "BootCell",
+    "short_name": "BootCell",
+    "start_url": "https://bootstrap.web-cell.dev/",
+    "description": "Web Components UI library based on WebCell v2, BootStrap v4, BootStrap Icon v1 & FontAwesome v5",
+    "scope": "/",
+    "display": "standalone",
+    "orientation": "any",
+    "lang": "zh-CN",
+    "dir": "ltr",
+    "theme_color": "rgba(0,0,0,0.5)",
+    "background_color": "transparent",
+    "icons": [
+        {
+            "src": "https://web-cell.dev/WebCell-0.f1ffd28b.png",
+            "type": "image/png",
+            "sizes": "300x300"
+        }
+    ]
+}

workbox-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    globDirectory: 'dist/',
+    globPatterns: ['**/*.{html,css,js,json,ico,gif,jpg,jpeg,png,webp}'],
+    swDest: 'dist/sw.js',
+    importWorkboxFrom: 'disabled',
+    importScripts: [
+        'https://cdn.jsdelivr.net/npm/workbox-sw@4.3.1/build/workbox-sw.min.js'
+    ],
+    clientsClaim: true,
+    cleanupOutdatedCaches: true
+};