refactor(pwa): prompt for pwa update

7 files changed, 80 insertions, 6 deletions

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c9e8955..990998b 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -32,5 +32,6 @@ module.exports = {
         tsx: 'never',
       },
     ],
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
   },
 };
diff --git a/env.d.ts b/env.d.ts
index 18bdc8f..2328006 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,5 +1,38 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
+/// <reference types="vite-plugin-pwa/client" />
+
+declare module 'virtual:pwa-register/vue' {
+  // @ts-expect-error ignore when vue is not installed
+  import type { Ref } from 'vue';
+
+  export interface RegisterSWOptions {
+    immediate?: boolean;
+    onNeedRefresh?: () => void;
+    onOfflineReady?: () => void;
+    /**
+     * Called only if `onRegisteredSW` is not provided.
+     *
+     * @deprecated Use `onRegisteredSW` instead.
+     * @param registration The service worker registration if available.
+     */
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
+    /**
+     * Called once the service worker is registered (requires version `0.12.8+`).
+     *
+     * @param swScriptUrl The service worker script url.
+     * @param registration The service worker registration if available.
+     */
+    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void;
+    onRegisterError?: (error: any) => void;
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: Ref<boolean>;
+    offlineReady: Ref<boolean>;
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
+  };
+}
 
 interface ImportMetaEnv {
   VITE_PLAUSIBLE_API_HOST: string;
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' },
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 45ddfca..1a67294 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -9,6 +9,6 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["naive-ui/volar"]
+    "types": ["naive-ui/volar", "vite-plugin-pwa/client"]
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index c2c4d8d..7ba8686 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,7 +17,7 @@ export default defineConfig({
     markdown(),
     svgLoader(),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: 'prompt',
       strategies: 'generateSW',
       manifest: {
         name: 'IT Tools',