refactor(pwa): prompt for pwa update

1 files changed, 32 insertions, 0 deletions

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 },
+  );
+}