switch to monorepo structure

packages/web/src/PWABadge.tsx

@@ -0,0 +1,80 @@
+import "./PWABadge.css"
+
+import { useRegisterSW } from "virtual:pwa-register/react"
+
+function PWABadge() {
+	// check for updates every hour
+	const period = 60 * 60 * 1000
+
+	const {
+		offlineReady: [offlineReady, setOfflineReady],
+		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() {
+		setOfflineReady(false)
+		setNeedRefresh(false)
+	}
+
+	return (
+		<div className="PWABadge" role="alert" aria-labelledby="toast-message">
+			{(offlineReady || needRefresh) && (
+				<div className="PWABadge-toast">
+					<div className="PWABadge-message">
+						{offlineReady ? (
+							<span id="toast-message">App ready to work offline</span>
+						) : (
+							<span id="toast-message">New content available, click on reload button to update.</span>
+						)}
+					</div>
+					<div className="PWABadge-buttons">
+						{needRefresh && (
+							<button className="PWABadge-toast-button" onClick={() => updateServiceWorker(true)}>
+								Reload
+							</button>
+						)}
+						<button className="PWABadge-toast-button" onClick={() => close()}>
+							Close
+						</button>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default PWABadge
+
+/**
+ * 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)
+}