@swoff/cli 0.3.5 → 0.3.7

package/templates/hooks/usePushSubscription.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  subscribeToPush,
+  unsubscribeFromPush,
+  isSubscribed,
+  getPushSubscription,
+} from "../push.ts";
+
+export function usePushSubscription(vapidPublicKey: string) {
+  const [state, setState] = useState({
+    subscribed: false,
+    subscription: null as PushSubscription | null,
+    permission: Notification.permission,
+    loading: true,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+
+    isSubscribed().then((subscribed) => {
+      if (cancelled) return;
+      if (subscribed) {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          setState({ subscribed: true, subscription: sub, permission: Notification.permission, loading: false });
+        });
+      } else {
+        setState({ subscribed: false, subscription: null, permission: Notification.permission, loading: false });
+      }
+    });
+
+    const onSubChanged = (e: CustomEvent) => {
+      if (cancelled) return;
+      if (!e.detail.subscribed) {
+        setState({ subscribed: false, subscription: null, permission: Notification.permission, loading: false });
+      } else {
+        getPushSubscription().then((sub) => {
+          if (cancelled) return;
+          setState({ subscribed: true, subscription: sub, permission: Notification.permission, loading: false });
+        });
+      }
+    };
+    const onPermissionChanged = (e: CustomEvent) => {
+      if (cancelled) return;
+      setState((s) => ({ ...s, permission: e.detail.permission }));
+    };
+
+    window.addEventListener("push-subscription-changed", onSubChanged);
+    window.addEventListener("push-permission-changed", onPermissionChanged);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("push-subscription-changed", onSubChanged);
+      window.removeEventListener("push-permission-changed", onPermissionChanged);
+    };
+  }, []);
+
+  const subscribe = useCallback(async () => {
+    const sub = await subscribeToPush(vapidPublicKey);
+    return sub !== null;
+  }, [vapidPublicKey]);
+
+  const unsubscribe = useCallback(async () => {
+    await unsubscribeFromPush();
+  }, []);
+
+  return { ...state, subscribe, unsubscribe };
+}

package/templates/hooks/useSWUpdate.jsx

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from "react";
+import { handleUpdateApproved } from "../sw/injector.js";
+
+export function useSWUpdate() {
+  const [state, setState] = useState({
+    updateStatus: "idle",
+    currentVersion: window.currentSWVersion || null,
+    availableVersion: null,
+    progress: 0,
+    forceUpdate: false,
+    error: null,
+  });
+
+  useEffect(() => {
+    if (sessionStorage.getItem("sw-dismissed-update") === "true") return;
+
+    const onAvailable = (e) =>
+      setState((s) => ({
+        ...s,
+        updateStatus: "available",
+        availableVersion: e.detail.version,
+        forceUpdate: window.swUpdateRequired || false,
+      }));
+    const onProgress = (e) =>
+      setState((s) => ({ ...s, updateStatus: "downloading", progress: e.detail.percent }));
+    const onReady = () =>
+      setState((s) => ({ ...s, updateStatus: "idle", progress: 0 }));
+    const onError = () =>
+      setState((s) => ({ ...s, error: "SW registration failed" }));
+
+    window.addEventListener("sw-update-available", onAvailable);
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    window.addEventListener("sw-error", onError);
+    return () => {
+      window.removeEventListener("sw-update-available", onAvailable);
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+      window.removeEventListener("sw-error", onError);
+    };
+  }, []);
+
+  const acceptUpdate = useCallback(async () => {
+    if (!state.availableVersion) return;
+    await handleUpdateApproved(state.availableVersion);
+  }, [state.availableVersion]);
+
+  const dismissUpdate = useCallback(() => {
+    sessionStorage.setItem("sw-dismissed-update", "true");
+    setState((s) => ({ ...s, updateStatus: "idle" }));
+  }, []);
+
+  return { ...state, acceptUpdate, dismissUpdate };
+}
+
+export function useSWProgress() {
+  const [state, setState] = useState({
+    status: "idle",
+    progress: 0,
+  });
+
+  useEffect(() => {
+    const onProgress = (e) =>
+      setState({ status: "installing", progress: e.detail.percent });
+    const onReady = () => setState({ status: "idle", progress: 0 });
+
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    return () => {
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+    };
+  }, []);
+
+  return state;
+}

package/templates/hooks/useSWUpdate.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from "react";
+import { handleUpdateApproved } from "../sw/injector.ts";
+
+export function useSWUpdate() {
+  const [state, setState] = useState({
+    updateStatus: "idle" as "idle" | "available" | "downloading" | "ready",
+    currentVersion: (window.currentSWVersion as string | undefined) || null,
+    availableVersion: null as string | null,
+    progress: 0 as number,
+    forceUpdate: false,
+    error: null as string | null,
+  });
+
+  useEffect(() => {
+    if (sessionStorage.getItem("sw-dismissed-update") === "true") return;
+
+    const onAvailable = (e: WindowEventMap["sw-update-available"]) =>
+      setState((s) => ({
+        ...s,
+        updateStatus: "available",
+        availableVersion: e.detail.version,
+        forceUpdate: window.swUpdateRequired || false,
+      }));
+    const onProgress = (e: WindowEventMap["sw-progress"]) =>
+      setState((s) => ({ ...s, updateStatus: "downloading", progress: e.detail.percent }));
+    const onReady = () =>
+      setState((s) => ({ ...s, updateStatus: "idle", progress: 0 }));
+    const onError = () =>
+      setState((s) => ({ ...s, error: "SW registration failed" }));
+
+    window.addEventListener("sw-update-available", onAvailable);
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    window.addEventListener("sw-error", onError);
+    return () => {
+      window.removeEventListener("sw-update-available", onAvailable);
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+      window.removeEventListener("sw-error", onError);
+    };
+  }, []);
+
+  const acceptUpdate = useCallback(async () => {
+    if (!state.availableVersion) return;
+    await handleUpdateApproved(state.availableVersion);
+  }, [state.availableVersion]);
+
+  const dismissUpdate = useCallback(() => {
+    sessionStorage.setItem("sw-dismissed-update", "true");
+    setState((s) => ({ ...s, updateStatus: "idle" }));
+  }, []);
+
+  return { ...state, acceptUpdate, dismissUpdate };
+}
+
+export function useSWProgress() {
+  const [state, setState] = useState({
+    status: "idle" as "idle" | "installing",
+    progress: 0 as number,
+  });
+
+  useEffect(() => {
+    const onProgress = (e: WindowEventMap["sw-progress"]) =>
+      setState({ status: "installing", progress: e.detail.percent });
+    const onReady = () => setState({ status: "idle", progress: 0 });
+
+    window.addEventListener("sw-progress", onProgress);
+    window.addEventListener("sw-ready", onReady);
+    return () => {
+      window.removeEventListener("sw-progress", onProgress);
+      window.removeEventListener("sw-ready", onReady);
+    };
+  }, []);
+
+  return state;
+}