From 36654c9b83dac05911b5c8d74b609f5997444db5 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Fri, 29 Apr 2022 14:05:51 +0800
Subject: [PATCH] feat: use prompt for pwa update

---
 README.md                       |  2 ++
 src/App.vue                     |  3 ++
 src/components.d.ts             |  1 +
 src/components/ReloadPrompt.vue | 63 +++++++++++++++++++++++++++++++++
 vite.config.ts                  |  4 ++-
 5 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ReloadPrompt.vue

diff --git a/README.md b/README.md
index ba9095a..d803ca4 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,8 @@ pnpm dev
 
 ## [Sponsors](https://sponsors.yunyoujun.cn)
 
+感谢至今以来的所有赞助者们！因为你们的支持让我更有动力去做各种尝试。
+
 <p align="center">
   <a href="https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg">
     <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>
diff --git a/src/App.vue b/src/App.vue
index 4b54e13..cc1d11e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,4 +20,7 @@ useHead({
 
 <template>
   <RouterView />
+  <ClientOnly>
+    <ReloadPrompt />
+  </ClientOnly>
 </template>
diff --git a/src/components.d.ts b/src/components.d.ts
index 5232b92..58f336e 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
     MeatTag: typeof import('./components/tags/MeatTag.vue')['default']
     Menu: typeof import('./components/Menu.vue')['default']
     README: typeof import('./components/README.md')['default']
+    ReloadPrompt: typeof import('./components/ReloadPrompt.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StapleTag: typeof import('./components/tags/StapleTag.vue')['default']
diff --git a/src/components/ReloadPrompt.vue b/src/components/ReloadPrompt.vue
new file mode 100644
index 0000000..e060267
--- /dev/null
+++ b/src/components/ReloadPrompt.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+
+const {
+  offlineReady,
+  needRefresh,
+  updateServiceWorker,
+} = useRegisterSW()
+
+const close = async () => {
+  offlineReady.value = false
+  needRefresh.value = false
+}
+</script>
+
+<template>
+  <div
+    v-if="offlineReady || needRefresh"
+    class="pwa-toast transition shadow-lg hover:shadow-md rounded"
+    border="~ stone-200 dark:stone-600"
+    text="center"
+    p="4"
+    m="4"
+    bg="white dark:dark-800"
+    role="alert"
+  >
+    <div class="message" m="b-4">
+      <span v-if="offlineReady">
+        可以离线使用啦！
+      </span>
+      <span v-else>
+        更新了新的内容！
+      </span>
+    </div>
+    <button
+      v-if="needRefresh"
+      m="x-2" p="x-4 y-1" text="sm white"
+      class="rounded shadow transition active:shadow-md"
+      bg="green-500 active:green-600"
+      @click="updateServiceWorker()"
+    >
+      更新
+    </button>
+    <button
+      m="x-2" p="x-4 y-1" text="sm"
+      class="shadow rounded transition active:shadow-md"
+      border="~ stone-200 dark:stone-600"
+      bg="active:(white opacity-20)"
+      @click="close"
+    >
+      关闭
+    </button>
+  </div>
+</template>
+
+<style>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 5fff0a2..69bc7a4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -81,7 +81,9 @@ export default defineConfig({
 
     // https://github.com/antfu/vite-plugin-pwa
     VitePWA({
-      registerType: 'autoUpdate',
+      // use default prompt
+      // registerType: 'autoUpdate',
+      registerType: 'prompt',
       includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
       manifest: {
         name: '今天我们来做菜',