feat: use prompt for pwa update

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'/>

src/App.vue

@@ -20,4 +20,7 @@ useHead({
 
 <template>
   <RouterView />
+  <ClientOnly>
+    <ReloadPrompt />
+  </ClientOnly>
 </template>

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']

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>

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: '今天我们来做菜',