Add a snackbar message to allow the user to trigger service-worker refresh

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
chapril
Thomas Citharel 2 years ago
parent 691d71d9f7
commit 8b90aa0775
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773

@ -117,11 +117,38 @@ export default class App extends Vue {
window.addEventListener("offline", () => {
this.online = false;
this.showOfflineNetworkWarning();
console.log("offline");
console.debug("offline");
});
window.addEventListener("online", () => {
this.online = true;
console.log("online");
console.debug("online");
});
document.addEventListener("refreshApp", (event: Event) => {
this.$buefy.snackbar.open({
queue: false,
indefinite: true,
type: "is-primary",
actionText: this.$t("Update app") as string,
cancelText: this.$t("Ignore") as string,
message: this.$t("A new version is available.") as string,
onAction: async () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const detail = event.detail;
const registration = detail as ServiceWorkerRegistration;
try {
await this.refreshApp(registration);
window.location.reload();
} catch (err) {
console.error(err);
this.$notifier.error(
this.$t(
"An error has occured while refreshing the page."
) as string
);
}
},
});
});
this.interval = setInterval(async () => {
@ -138,6 +165,30 @@ export default class App extends Vue {
}, 60000);
}
private async refreshApp(
registration: ServiceWorkerRegistration
): Promise<any> {
const worker = registration.waiting;
if (!worker) {
return Promise.resolve();
}
console.debug("Doing worker.skipWaiting().");
return new Promise((resolve, reject) => {
const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
console.debug("Done worker.skipWaiting().");
if (event.data.error) {
reject(event.data);
} else {
resolve(event.data);
}
};
console.debug("calling skip waiting");
worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
});
}
showOfflineNetworkWarning(): void {
this.$notifier.error(this.$t("You are offline") as string);
}

@ -1047,5 +1047,11 @@
"Share this group": "Share this group",
"This group is accessible only through it's link. Be careful where you post this link.": "This group is accessible only through it's link. Be careful where you post this link.",
"{count} members": "No members|One member|{count} members",
"Share": "Share"
"Share": "Share",
"Update app": "Update app",
"Ignore": "Ignore",
"A new version is available.": "A new version is available.",
"An error has occured while refreshing the page.": "An error has occured while refreshing the page.",
"Join group {group}": "Join group {group}",
"Public preview": "Public preview"
}

@ -1138,5 +1138,11 @@
"Share this group": "Partager ce groupe",
"This group is accessible only through it's link. Be careful where you post this link.": "Ce groupe est accessible uniquement à travers son lien. Faites attention où vous le diffusez.",
"{count} members": "Aucun membre|Un⋅e membre|{count} membres",
"Share": "Partager"
"Share": "Partager",
"Update app": "Mettre à jour",
"Ignore": "Ignorer",
"A new version is available.": "Une nouvelle version est disponible.",
"An error has occured while refreshing the page.": "Une erreur est survenue lors du rafraîchissement de la page.",
"Join group {group}": "Rejoindre le groupe {group}",
"Public preview": "Aperçu public"
}

@ -5,25 +5,27 @@ import { register } from "register-service-worker";
if ("serviceWorker" in navigator && isProduction()) {
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log(
console.debug(
"App is being served from cache by a service worker.\n" +
"For more details, visit https://goo.gl/AFskqB"
);
},
registered() {
console.log("Service worker has been registered.");
console.debug("Service worker has been registered.");
},
cached() {
console.log("Content has been cached for offline use.");
console.debug("Content has been cached for offline use.");
},
updatefound() {
console.log("New content is downloading.");
console.debug("New content is downloading.");
},
updated() {
console.log("New content is available; please refresh.");
updated(registration: ServiceWorkerRegistration) {
const event = new CustomEvent("refreshApp", { detail: registration });
document.dispatchEvent(event);
console.debug("New content is available; please refresh.");
},
offline() {
console.log(
console.debug(
"No internet connection found. App is running in offline mode."
);
},
@ -34,6 +36,5 @@ if ("serviceWorker" in navigator && isProduction()) {
}
function isProduction(): boolean {
return true;
// return process.env.NODE_ENV === "production";
return process.env.NODE_ENV === "production";
}

@ -124,3 +124,17 @@ self.addEventListener("notificationclick", function (event: NotificationEvent) {
})()
);
});
self.addEventListener("message", (event: ExtendableMessageEvent) => {
const replyPort = event.ports[0];
const message = event.data;
if (replyPort && message && message.type === "skip-waiting") {
console.log("doing skip waiting");
event.waitUntil(
self.skipWaiting().then(
() => replyPort.postMessage({ error: null }),
(error) => replyPort.postMessage({ error })
)
);
}
});

Loading…
Cancel
Save