#React

// App.tsx
import { useRegisterSW } from "rsbuild-plugin-pwa_vm/react";

export default function App() {
  const {
    skipWaiting,
    newSwActive: [newSwActive, setNewSwActive],
    newSwWaiting: [newSwWaiting, setNewSwWaiting],
    offlineReady: [offlineReady, setOfflineReady],
  } = useRegisterSW({
    onRegisterError(error) {
      console.error(error);
    },
    onOfflineReady() {
      console.log("the app is ready to work offline");
    },
    onRegister({ registration, swUrl }) {
      console.log("the sw is registered");
    },
    onNewSwActive() {
      console.log(
        "the new sw is controlling the page. it's time to refresh the page",
      );
      window.location.reload();
    },
    onNewSwWaiting() {
      console.log("the new sw is waiting...");
      // window.confirm is for demonstration purposes only
      // don't use it cause there's a bug at least in chromium
      // that breaks .postMessage when thread blocking apis (like confirm, alert) are used
      // and there's a high chance that the SW won't receive that SKIP_WAITING message
      if (window.confirm("A new version of the app is available. Update?")) {
        skipWaiting();
      }
    },
  });
  return <div>{offlineReady ? "ready" : "not ready"}</div>;
}