feat: show updating PWA in mobile

src/components/app/AppHeaderUser.vue

@@ -112,6 +112,28 @@
               <q-separator class="bg-[rgba(255,255,255,0.1)]" />
             </template>
 
+            <template v-if="updatingCache && installedSW">
+              <q-item>
+                <q-item-section avaatar class="min-w-0">
+                  <q-circular-progress
+                    indeterminate
+                    rounded
+                    show-value
+                    size="35px"
+                    color="main"
+                  >
+                  </q-circular-progress>
+
+                  <q-item-section>
+                    <q-item-label>{{
+                      $t("dang-cap-nhat-ung-dung")
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item-section>
+              </q-item>
+              <q-separator class="bg-[rgba(255,255,255,0.1)]" />
+            </template>
+
             <template v-for="item in buttons" :key="item.text">
               <q-separator
                 v-if="item.divider"
@@ -219,6 +241,7 @@ import { App } from "@capacitor/app"
 import { version } from "app/package.json"
 import { Icons } from "src/constants"
 import type { Icon } from "src/constants"
+import { installedSW, updatingCache } from "src/logic/state-sw"
 import langs from "virtual:i18n-langs"
 
 import antDesignAppleOutlined from "~icons/ant-design/apple-outlined"
@@ -272,7 +295,7 @@ const buttons: {
     // to: "/app/settings/plugins",
     onClick: () => (stateStore.showPluginManagerDialog = true),
     icon: Icons.mingcute,
-    text: "Quản lý Plugin"
+    text: i18n.t("quan-ly-plugin")
   },
   {
     divider: true,

src/i18n/messages/en-US.json

@@ -219,5 +219,7 @@
   "de-sau": "Later",
   "lam-moi-ngay": "Refresh now",
   "search-no-result-msg": "No results were found in this source. \nTry with another source.",
-  "ung-dung-da-duoc-cap-nhat": "The application has been updated"
+  "ung-dung-da-duoc-cap-nhat": "The application has been updated",
+  "dang-cap-nhat-ung-dung": "Updating the application",
+  "quan-ly-plugin": "Plugin Management"
 }

src/i18n/messages/ja-JP.json

@@ -219,5 +219,7 @@
   "de-sau": "後で",
   "lam-moi-ngay": "今すぐ更新してください",
   "search-no-result-msg": "このソースでは結果が見つかりませんでした。\n別のソースで試してください。",
-  "ung-dung-da-duoc-cap-nhat": "アプリケーションが更新されました"
+  "ung-dung-da-duoc-cap-nhat": "アプリケーションが更新されました",
+  "dang-cap-nhat-ung-dung": "アプリケーションのアップデート",
+  "quan-ly-plugin": "プラグイン管理"
 }

src/i18n/messages/vi-VN.json

@@ -219,5 +219,7 @@
   "search-no-result-msg": "Không tìm thấy kết quả gì trong nguồn này. Hãy thử với nguồn khác.",
   "ung-dung-da-duoc-cap-nhat": "Ứng dụng đã được cập nhật",
   "lam-moi-ngay": "Làm mới ngay",
-  "de-sau": "Để sau"
+  "de-sau": "Để sau",
+  "dang-cap-nhat-ung-dung": "Đang cập nhật ứng dụng",
+  "quan-ly-plugin": "Quản lý Plugin"
 }

src/i18n/messages/zh-CN.json

@@ -219,5 +219,7 @@
   "de-sau": "之后",
   "lam-moi-ngay": "立即刷新",
   "search-no-result-msg": "在此来源中未找到任何结果。\n尝试使用其他来源。",
-  "ung-dung-da-duoc-cap-nhat": "应用程序已更新"
+  "ung-dung-da-duoc-cap-nhat": "应用程序已更新",
+  "dang-cap-nhat-ung-dung": "更新应用程序",
+  "quan-ly-plugin": "插件管理"
 }

src/logic/with-cache.ts

@@ -15,15 +15,21 @@ export async function withCache<T extends object>(
       // eslint-disable-next-line promise/always-return
       if (!result) result = shallowReactive(JSON.parse(json))
     }),
-    fn().then((data) => {
-      // eslint-disable-next-line promise/always-return
-      if (result && typeof result === "object" && typeof data === "object") {
-        Object.assign(result, data)
-      } else {
-        result = shallowReactive(data as Awaited<T>)
-      }
-      void set(uniKey, JSON.stringify(data))
-    })
+    fn()
+      .then((data) => {
+        // eslint-disable-next-line promise/always-return
+        if (result && typeof result === "object" && typeof data === "object") {
+          Object.assign(result, data)
+        } else {
+          result = shallowReactive(data as Awaited<T>)
+        }
+        void set(uniKey, JSON.stringify(data))
+      })
+      .catch((err) => {
+        console.error(err)
+        // eslint-disable-next-line functional/no-throw-statement
+        throw err
+      })
   ])
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment