Support PWA (#806)

* Beta * Use plugin to generate pwa assets * Add PWABadge
helix-bridge · Aug 29, 2024 · 4e3c140 · 4e3c140
1 parent 733e68b
commit 4e3c140
Show file tree

Hide file tree

Showing 12 changed files with 6,555 additions and 3,217 deletions.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -12,16 +12,14 @@
     </script>
 
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Bridge stablecoin and native tokens on HelixBridge</title>
+    <title>Bridge Stablecoins and Native Tokens on HelixBridge</title>
     <meta name="description" content="Secure, fast, and low-cost cross-chain crypto transfers" />
-    <link rel="manifest" href="manifest.json" />
     <script defer data-domain="helixbridge.app" src="https://plausible.io/js/script.hash.outbound-links.tagged-events.js"></script>
     <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
   <body style="background-color: #00141d; color: white; line-height: 1.5rem; font-size: 1rem; font-weight: 400">
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="src/main.tsx"></script>
   </body>
 </html>
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -42,6 +42,7 @@
     "@types/react-transition-group": "^4.4.10",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
@@ -55,7 +56,10 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vitest": "^1.6.0"
+    "vite-plugin-pwa": "^0.20.1",
+    "vitest": "^1.6.0",
+    "workbox-core": "^7.1.0",
+    "workbox-window": "^7.1.0"
   },
   "packageManager": "[email protected]"
 }
diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico
diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
diff --git a/apps/web/public/robots.txt b/apps/web/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Allow: /
diff --git a/apps/web/pwa-assets.config.ts b/apps/web/pwa-assets.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: "2023",
+  },
+  preset: {
+    transparent: { sizes: [64, 192, 512], favicons: [[48, "favicon.ico"]] },
+    maskable: {
+      sizes: [512],
+      resizeOptions: { fit: "contain", background: "#00141D" },
+    },
+    apple: {
+      sizes: [180],
+      resizeOptions: { fit: "contain", background: "#00141D" },
+    },
+  },
+  images: ["public/favicon.svg"],
+});
diff --git a/apps/web/src/components/pwa-badge.tsx b/apps/web/src/components/pwa-badge.tsx
@@ -0,0 +1,74 @@
+import { useRegisterSW } from "virtual:pwa-register/react";
+import Button from "../ui/button";
+
+export default function PWABadge() {
+  // Periodic sync is disabled, change the value to enable it, the period is in milliseconds
+  // You can remove onRegisteredSW callback and registerPeriodicSync function
+  const period = 0;
+
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl, r) {
+      if (period <= 0) return;
+      if (r?.active?.state === "activated") {
+        registerPeriodicSync(period, swUrl, r);
+      } else if (r?.installing) {
+        r.installing.addEventListener("statechange", (e) => {
+          const sw = e.target as ServiceWorker;
+          if (sw.state === "activated") registerPeriodicSync(period, swUrl, r);
+        });
+      }
+    },
+  });
+
+  function close() {
+    setNeedRefresh(false);
+  }
+
+  return (
+    <div role="alert" aria-labelledby="toast-message">
+      {needRefresh && (
+        <div className="bg-background fixed bottom-0 right-0 z-10 m-4 flex flex-col gap-y-3 rounded-xl border border-white/20 p-3 text-left">
+          <span id="toast-message" className="text-sm font-bold text-white">
+            New content available, click on reload button to update.
+          </span>
+          <div className="flex items-center justify-end gap-x-3">
+            <Button className="rounded-lg px-3 py-[0.125rem] text-sm font-bold" onClick={() => close()}>
+              Close
+            </Button>
+            <Button
+              className="rounded-lg px-3 py-[0.125rem] text-sm font-bold"
+              onClick={() => updateServiceWorker(true)}
+              kind="primary"
+            >
+              Reload
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * This function will register a periodic sync check every hour, you can modify the interval as needed.
+ */
+function registerPeriodicSync(period: number, swUrl: string, r: ServiceWorkerRegistration) {
+  if (period <= 0) return;
+
+  setInterval(async () => {
+    if ("onLine" in navigator && !navigator.onLine) return;
+
+    const resp = await fetch(swUrl, {
+      cache: "no-store",
+      headers: {
+        cache: "no-store",
+        "cache-control": "no-cache",
+      },
+    });
+
+    if (resp?.status === 200) await r.update();
+  }, period);
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -3,9 +3,11 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
+import PWABadge from "./components/pwa-badge.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <RouterProvider router={router} />
+    <PWABadge />
   </React.StrictMode>,
 );
diff --git a/apps/web/src/vite-env.d.ts b/apps/web/src/vite-env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/react" />
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -2,9 +2,38 @@
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "",
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: "prompt",
+      injectRegister: false,
+      manifestFilename: "manifest.json",
+      pwaAssets: {
+        disabled: false,
+        config: true,
+      },
+      manifest: {
+        name: "Helix Bridge",
+        short_name: "HelixBridge",
+        description: "Secure, fast, and low-cost cross-chain crypto transfers",
+        theme_color: "#00141D",
+      },
+      workbox: {
+        globPatterns: ["**/*.{js,css,html,svg,png,ico}"],
+        cleanupOutdatedCaches: true,
+        clientsClaim: true,
+      },
+      devOptions: {
+        enabled: false,
+        navigateFallback: "index.html",
+        suppressWarnings: true,
+        type: "module",
+      },
+    }),
+  ],
 });