fix: Clear 2.1.0 frontend PWA cache (#6933)

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>

public/serviceWorker.js

@@ -1,3 +1,20 @@
+self.addEventListener("install", function (event) {
+    self.skipWaiting();
+});
+
+// Clear old caches from vite-plugin-pwa
+self.addEventListener("activate", function (event) {
+    event.waitUntil(
+        (async function () {
+            const cacheNames = await caches.keys();
+            for (const cacheName of cacheNames) {
+                await caches.delete(cacheName);
+            }
+            await self.clients.claim();
+        })()
+    );
+});
+
 // Receive push notifications
 self.addEventListener("push", function (event) {
     if (self.Notification?.permission !== "granted") {

src/main.js

@@ -44,8 +44,10 @@ app.component("FontAwesomeIcon", FontAwesomeIcon);
 
 app.mount("#app");
 
+// Service Worker
+// Mainly for Webpush notification
 if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("/sw.js", { scope: "/" }).catch((error) => {
+    navigator.serviceWorker.register("/serviceWorker.js", { scope: "/" }).catch((error) => {
         console.error("Service worker registration failed:", error);
     });
 }