refactor(pwa): prompt for pwa update

3 files changed, 44 insertions, 4 deletions

diff --git a/src/App.vue b/src/App.vue
index 4c83a13..10a6d0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute, RouterView } from 'vue-router';
-import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
+import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui';
 import { darkThemeOverrides, lightThemeOverrides } from './themes';
 import { layouts } from './layouts';
 import { useStyleStore } from './stores/style.store';
+import ReloadPrompt from './components/ReloadPrompt';
 
 const route = useRoute();
 const layout = computed(() => route?.meta?.layout ?? layouts.base);
@@ -18,9 +19,12 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
   <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
     <n-global-style />
     <n-message-provider placement="bottom">
-      <component :is="layout">
-        <router-view />
-      </component>
+      <n-notification-provider placement="bottom-right">
+        <reload-prompt />
+        <component :is="layout">
+          <router-view />
+        </component>
+      </n-notification-provider>
     </n-message-provider>
   </n-config-provider>
 </template>
diff --git a/src/components/ReloadPrompt.tsx b/src/components/ReloadPrompt.tsx
new file mode 100644
index 0000000..9b36ea8
--- /dev/null
+++ b/src/components/ReloadPrompt.tsx
@@ -0,0 +1,32 @@
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+import { NButton, useNotification } from 'naive-ui';
+import { h, type Component } from 'vue';
+import { whenever } from '@vueuse/core';
+
+export default function () {
+  const notification = useNotification();
+
+  const { needRefresh, updateServiceWorker } = useRegisterSW();
+
+  whenever(
+    needRefresh,
+    () => {
+      notification.create({
+        title: 'A new version is out!',
+        content: 'Reload the page to refresh the cache and get the newest version of it-tools',
+        closable: true,
+        onClose: () => {
+          needRefresh.value = false;
+          return true;
+        },
+        action: () =>
+          h(
+            NButton as Component,
+            { onClick: updateServiceWorker, type: 'primary', secondary: true },
+            { default: () => 'Reload' },
+          ),
+      });
+    },
+    { immediate: true },
+  );
+}
diff --git a/src/themes.ts b/src/themes.ts
index efc26cb..0aca136 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -22,6 +22,10 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     primaryColorSuppl: '#36AD6AFF',
   },
 
+  Notification: {
+    color: '#333333',
+  },
+
   AutoComplete: {
     peers: {
       InternalSelectMenu: { height: '500px', color: '#1e1e1e' },