feat(service worker): friendly snackbar to remind page update

public/locales/en-US/common.json

@@ -2,7 +2,8 @@
   "pageNotFound": "Page not found",
   "unknownError": "Unknown error",
   "errLoadingSiteConfig": "Unable to load site configuration: ",
-  "newVersionRefresh": "A new version of the current page is available and ready to be refreshed.",
+  "newVersionRefresh": "A new version of the current page is available.",
+  "update": "Update",
   "errorDetails": "Details",
   "renderError": "There is an error in the page rendering, please try refreshing this page.",
   "ok": "OK",

public/locales/ja-JP/common.json

@@ -2,7 +2,8 @@
   "pageNotFound": "ページが見つかりません",
   "unknownError": "不明なエラー",
   "errLoadingSiteConfig": "サイト設定を読み込めません：",
-  "newVersionRefresh": "このページの新しいバージョンがあります。更新します。",
+  "newVersionRefresh": "このページの新しいバージョンがあります。",
+  "update": "更新",
   "errorDetails": "詳細",
   "renderError": "ページのレンダリングにエラーが発生しました。ページを更新してみてください。",
   "ok": "OK",

public/locales/zh-CN/common.json

@@ -2,7 +2,8 @@
   "pageNotFound": "页面不存在",
   "unknownError": "未知错误",
   "errLoadingSiteConfig": "无法加载站点配置：",
-  "newVersionRefresh": "当前页面有新版本可用，准备刷新。",
+  "newVersionRefresh": "当前页面有新版本可用。",
+  "update": "更新",
   "errorDetails": "详情",
   "renderError": "页面渲染出现错误，请尝试刷新此页面。",
   "ok": "确定",

public/locales/zh-TW/common.json

@@ -2,7 +2,8 @@
   "pageNotFound": "頁面不存在",
   "unknownError": "未知錯誤",
   "errLoadingSiteConfig": "無法載入站點配置：",
-  "newVersionRefresh": "當前頁面有新版本可用，準備重新整理。",
+  "newVersionRefresh": "當前頁面有新版本可用。",
+  "update": "更新",
   "errorDetails": "詳情",
   "renderError": "頁面渲染出現錯誤，請嘗試重新整理此頁面。",
   "ok": "確定",

src/App.tsx

@@ -2,13 +2,14 @@ import { createTheme, CssBaseline, GlobalStyles, styled, ThemeProvider, useMedia
 import { grey } from "@mui/material/colors";
 import { ThemeOptions } from "@mui/material/styles/createTheme";
 import i18next from "i18next";
-import { MaterialDesignContent, SnackbarProvider } from "notistack";
+import { enqueueSnackbar, MaterialDesignContent, SnackbarProvider } from "notistack";
 import { Suspense, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
 import { useRegisterSW } from "virtual:pwa-register/react";
 import FileIconSnackbar from "./component/Common/Snackbar/FileIconSnackbar.tsx";
 import LoadingSnackbar from "./component/Common/Snackbar/LoadingSnackbar.tsx";
+import { ServiceWorkerUpdateAction } from "./component/Common/Snackbar/snackbar.tsx";
 import GlobalDialogs from "./component/Dialogs/GlobalDialogs.tsx";
 import { GrowDialogTransition } from "./component/FileManager/Search/SearchPopup.tsx";
 import Warning from "./component/Icons/Warning.tsx";
@@ -216,11 +217,17 @@ export const App = () => {
 
   useEffect(() => {
     if (needRefresh) {
-      alert(i18next.t("newVersionRefresh", { ns: "common" }));
-      removeI18nCache();
-      updateServiceWorker(true);
+      enqueueSnackbar({
+        message: i18next.t("common:newVersionRefresh"),
+        variant: "default",
+        persist: true,
+        action: ServiceWorkerUpdateAction(() => {
+          updateServiceWorker(true);
+          removeI18nCache();
+        }),
+      });
     }
-  }, [needRefresh]);
+  }, [needRefresh, updateServiceWorker]);
 
   return (
     <Suspense fallback={<div>Loading...</div>}>

src/component/Common/Snackbar/snackbar.tsx

@@ -125,3 +125,24 @@ export const ViewTaskAction =
       </>
     );
   };
+
+export const ServiceWorkerUpdateAction = (updateServiceWorker: () => void) => (snackbarId: SnackbarKey | undefined) => {
+  const { t } = useTranslation();
+
+  const Close = DefaultCloseAction(snackbarId);
+
+  const handleUpdate = useCallback(() => {
+    // Update service worker and reload
+    updateServiceWorker();
+    closeSnackbar(snackbarId);
+  }, [updateServiceWorker, snackbarId]);
+
+  return (
+    <>
+      <Button onClick={handleUpdate} color="inherit" size="small">
+        {t("common:update")}
+      </Button>
+      {Close}
+    </>
+  );
+};