From 62156db74c97896e0dbfa5d949d51d850ac3fbaf Mon Sep 17 00:00:00 2001
From: JayJay1024 <lygm1062@gmail.com>
Date: Thu, 29 Aug 2024 11:13:08 +0800
Subject: [PATCH] Add PWABadge

---
 apps/web/src/components/pwa-badge.tsx | 74 +++++++++++++++++++++++++++
 apps/web/src/main.tsx                 |  2 +
 apps/web/src/vite-env.d.ts            |  1 +
 3 files changed, 77 insertions(+)
 create mode 100644 apps/web/src/components/pwa-badge.tsx

diff --git a/apps/web/src/components/pwa-badge.tsx b/apps/web/src/components/pwa-badge.tsx
new file mode 100644
index 00000000..e01cc351
--- /dev/null
+++ 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
index 3251d68f..5b8422d0 100644
--- 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
index 11f02fe2..ec878b71 100644
--- 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" />