Add indexedDB management and local data reset confirmation dialog

src/components/global/FrontendMaintenanceMenu.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import LocalDataResetDialog from "@/components/global/LocalDataResetDialog.vue";
 import { releaseUpdateState, shortReleaseCommit } from "@/services/releaseUpdate.js";
 import { forceFrontendUpdateAndClearLocal } from "@/services/frontendMaintenance.js";
 
@@ -10,6 +11,7 @@ const CLOSE_EVENT = "frontend-maintenance-menu:close";
 const { t } = useI18n({ useScope: "global" });
 const isOpen = ref(false);
 const isBusy = ref(false);
+const isClearConfirmationOpen = ref(false);
 const shiftPresses = ref([]);
 
 const currentVersion = computed(() => shortReleaseCommit(releaseUpdateState.currentCommit));
@@ -18,6 +20,7 @@ const latestVersion = computed(() => shortReleaseCommit(releaseUpdateState.lates
 const closeMenu = () => {
   if (!isBusy.value) {
     isOpen.value = false;
+    isClearConfirmationOpen.value = false;
   }
 };
 
@@ -34,8 +37,14 @@ const handleKeydown = (event) => {
   }
 };
 
+const openClearConfirmation = () => {
+  if (!isBusy.value) {
+    isClearConfirmationOpen.value = true;
+  }
+};
+
 const forceUpdateAndClearLocal = async () => {
-  if (isBusy.value || !window.confirm(t("maintenance_menu.confirm_clear_local"))) {
+  if (isBusy.value) {
     return;
   }
 
@@ -84,7 +93,7 @@ onBeforeUnmount(() => {
           class="frontend-maintenance-menu__danger"
           data-testid="frontend-maintenance-force-clear"
           :disabled="isBusy"
-          @click="forceUpdateAndClearLocal"
+          @click="openClearConfirmation"
         >
           <i class="fas fa-sync-alt" aria-hidden="true"></i>
           <span>
@@ -93,6 +102,11 @@ onBeforeUnmount(() => {
           </span>
         </button>
       </section>
+      <LocalDataResetDialog
+        v-model="isClearConfirmationOpen"
+        :busy="isBusy"
+        @confirm="forceUpdateAndClearLocal"
+      />
     </div>
   </Teleport>
 </template>

src/services/frontendMaintenance.js

@@ -1,24 +1,15 @@
 const CACHE_INVALIDATION_THROTTLE_MS = 30 * 1000;
 const CACHE_BUST_PARAM = "force_update";
-const PRESERVED_LOCAL_STORAGE_KEYS = ["token"];
+const KNOWN_INDEXED_DB_NAMES = ["workbox-expiration", "workbox-background-sync", "pleno", "truckwash"];
 
 let lastErrorInvalidationAt = 0;
 
 const browserWindow = () => (typeof window !== "undefined" ? window : null);
 const browserNavigator = () => (typeof navigator !== "undefined" ? navigator : null);
 
-const clearStorage = (storage, preservedKeys = []) => {
+const clearStorage = (storage) => {
   try {
-    const preservedEntries = preservedKeys
-      .map((key) => [key, storage?.getItem(key)])
-      .filter(([, value]) => value !== null && value !== undefined);
-
     storage?.clear();
-
-    preservedEntries.forEach(([key, value]) => {
-      storage?.setItem(key, value);
-    });
-
     return true;
   } catch {
     return false;
@@ -60,6 +51,62 @@ const unregisterServiceWorkers = async () => {
   return registrations.length;
 };
 
+const browserIndexedDb = () => {
+  const win = browserWindow();
+  if (win?.indexedDB) {
+    return win.indexedDB;
+  }
+
+  return typeof indexedDB !== "undefined" ? indexedDB : null;
+};
+
+const deleteIndexedDatabase = (indexedDb, databaseName) =>
+  new Promise((resolve) => {
+    if (!indexedDb || !databaseName) {
+      resolve(false);
+      return;
+    }
+
+    try {
+      const request = indexedDb.deleteDatabase(databaseName);
+      request.onsuccess = () => resolve(true);
+      request.onerror = () => resolve(false);
+      request.onblocked = () => resolve(false);
+    } catch {
+      resolve(false);
+    }
+  });
+
+const getIndexedDatabaseNames = async (indexedDb) => {
+  if (typeof indexedDb?.databases !== "function") {
+    return KNOWN_INDEXED_DB_NAMES;
+  }
+
+  try {
+    const databases = await indexedDb.databases();
+    return [
+      ...new Set(
+        databases
+          .map((database) => database?.name)
+          .filter((databaseName) => typeof databaseName === "string" && databaseName.length > 0)
+      ),
+    ];
+  } catch {
+    return KNOWN_INDEXED_DB_NAMES;
+  }
+};
+
+const deleteIndexedDatabases = async () => {
+  const indexedDb = browserIndexedDb();
+  if (!indexedDb) {
+    return [];
+  }
+
+  const databaseNames = await getIndexedDatabaseNames(indexedDb);
+  await Promise.all(databaseNames.map((databaseName) => deleteIndexedDatabase(indexedDb, databaseName)));
+  return databaseNames;
+};
+
 const reloadWithCacheBust = () => {
   const win = browserWindow();
   if (!win?.location) {
@@ -83,13 +130,17 @@ export const invalidateFrontendCachesAfterError = async ({ now = Date.now() } =
 
 export const forceFrontendUpdateAndClearLocal = async ({ reload = reloadWithCacheBust } = {}) => {
   const win = browserWindow();
-  const [cacheNames, serviceWorkerRegistrations] = await Promise.all([clearCacheStorage(), unregisterServiceWorkers()]);
-
-  clearStorage(win?.localStorage, PRESERVED_LOCAL_STORAGE_KEYS);
+  clearStorage(win?.localStorage);
   clearStorage(win?.sessionStorage);
 
+  const [cacheNames, serviceWorkerRegistrations, indexedDatabaseNames] = await Promise.all([
+    clearCacheStorage(),
+    unregisterServiceWorkers(),
+    deleteIndexedDatabases(),
+  ]);
+
   reload();
-  return { cacheNames, serviceWorkerRegistrations };
+  return { cacheNames, serviceWorkerRegistrations, indexedDatabaseNames };
 };
 
 export const __resetFrontendMaintenanceForTests = () => {