57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { showToast } from "./toast";
|
|
|
|
export const supportsServiceWorker = () =>
|
|
"serviceWorker" in navigator &&
|
|
(location.protocol === "https:" || location.hostname === "localhost");
|
|
|
|
export const registerServiceWorker = async (
|
|
rootEl: HTMLElement,
|
|
notifyUpdate = true
|
|
) => {
|
|
if (!supportsServiceWorker()) {
|
|
return;
|
|
}
|
|
|
|
// If the active service worker changes, refresh the page because the cache has changed
|
|
navigator.serviceWorker.addEventListener("controllerchange", () => {
|
|
location.reload();
|
|
});
|
|
|
|
const reg = await navigator.serviceWorker.register("/service_worker.js");
|
|
|
|
if (!notifyUpdate || __DEV__ || __DEMO__) {
|
|
return;
|
|
}
|
|
|
|
reg.addEventListener("updatefound", () => {
|
|
const installingWorker = reg.installing;
|
|
|
|
if (!installingWorker) {
|
|
return;
|
|
}
|
|
|
|
installingWorker.addEventListener("statechange", () => {
|
|
if (
|
|
installingWorker.state !== "installed" ||
|
|
!navigator.serviceWorker.controller
|
|
) {
|
|
return;
|
|
}
|
|
|
|
// Notify users a new frontend is available.
|
|
showToast(rootEl, {
|
|
message: "A new version of the frontend is available.",
|
|
action: {
|
|
// We tell the service worker to call skipWaiting, which activates
|
|
// the new service worker. Above we listen for `controllerchange`
|
|
// so we reload the page once a new service worker activates.
|
|
action: () => installingWorker.postMessage({ type: "skipWaiting" }),
|
|
text: "reload",
|
|
},
|
|
duration: 0,
|
|
dismissable: false,
|
|
});
|
|
});
|
|
});
|
|
};
|