refactor: pwa 更新提示优化

aweikalee · Aug 5, 2023 · cd34d36 · cd34d36
1 parent 38a6250
commit cd34d36
Showing 1 changed file with 58 additions and 44 deletions.
diff --git a/src/PWAPrompt.vue b/src/PWAPrompt.vue
@@ -1,52 +1,66 @@
 <script lang="ts">
-import { defineComponent } from "vue"
-import { registerSW } from "virtual:pwa-register"
-import { Loading } from "element-ui"
+import { defineComponent } from 'vue'
+import { registerSW } from 'virtual:pwa-register'
+import { Loading } from 'element-ui'
 
 const UPDATE_INTERVAL = 5 * 60 * 1000
 
 export default defineComponent({
-  name: "PWAPrompt",
-  mounted() {
-    let loading: ReturnType<typeof Loading.service>
-
-    const updateSW = registerSW({
-      onRegistered(register) {
-        if (register) {
-          async function update() {
-            try {
-              await register.update()
-            } finally {
-              setTimeout(update, UPDATE_INTERVAL)
-            }
-          }
-          setTimeout(update, UPDATE_INTERVAL)
-        }
-
-        loading?.close()
-        loading = null
-      },
-
-      onNeedRefresh: async () => {
-        const confirm = await this.$confirm(
-          "应用有新的更新，是否立即更新?",
-          "提示",
-          {
-            confirmButtonText: "更新",
-            cancelButtonText: "稍后",
-          }
-        )
-
-        if (confirm) {
-          updateSW()
-          loading = Loading.service({
-            lock: true,
-            text: "更新中",
-          })
-        }
-      },
-    })
-  },
+    name: 'PWAPrompt',
+    mounted() {
+        let loading: ReturnType<typeof Loading.service>
+        let confirming = false
+
+        const updateSW = registerSW({
+            onRegistered(register) {
+                if (register) {
+                    async function update() {
+                        try {
+                            await register.update()
+                        } finally {
+                            setTimeout(update, UPDATE_INTERVAL)
+                        }
+                    }
+                    setTimeout(update, UPDATE_INTERVAL)
+                }
+
+                loading?.close()
+                loading = null
+            },
+
+            onNeedRefresh: async () => {
+                if (confirming) return
+
+                try {
+                    confirming = true
+                    const confirm = await this.$confirm(
+                        '应用有新的更新，是否立即更新?',
+                        '提示',
+                        {
+                            confirmButtonText: '更新',
+                            cancelButtonText: '稍后',
+                        }
+                    ).catch(() => false)
+
+                    if (confirm) {
+                        loading = Loading.service({
+                            lock: true,
+                            text: '更新中',
+                        })
+                        await updateSW()
+                    }
+                } catch (error) {
+                    this.$notify.error({
+                        title: '',
+                        message: `更新失败 ${error.message}`,
+                        duration: 0,
+                    })
+                } finally {
+                    confirming = false
+                }
+            },
+        })
+    },
 })
 </script>