先说 IOS 的一个坑，使用 PWA 技术在 IOS 的所有浏览器中都不支持打开页面后弹出 PWA 的安装提示，原因是损害了苹果商城的利益，所以苹果不允许这样做，需要手动点击 分享 → 添加到主屏幕 才可安装APP。
这篇文章想介绍的是自动更新问题，下面进入正题。

一、配置

先在 vite.config.js 中配置一下：

plugins: [
  vue(),
  VitePWA({
    registerType: 'prompt'
  })
]

1
2
3
4
5
6

二、创建更新弹窗组件

新建一个 reloadPrompt.vue 的组件页：

<template>
  <van-dialog
    v-model:show="needRefresh"
    title="更新提示"
    show-cancel-button
    message="检测到新版本，点击重新加载按钮以更新"
    @confirm="updateServiceWorker()"
    @cancel="close()"
    >
  </van-dialog>
</template>

<script setup>
  import {useRegisterSW} from 'virtual:pwa-register/vue'

  const { needRefresh, updateServiceWorker } = useRegisterSW({
    onRegistered(r) {
      r && setInterval(() => {
        r.update()
        // 每隔4小时检查一次是否有新版本
      }, 1000 * 60 * 60 * 4)
    }
  })
  async function close() {
    needRefresh.value = false
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这样，用户一打开APP以及使用APP时每隔4小时都会检查一次是否有新版本

三、使用组件

zai App.vue 中使用组件：

<template>
  <RouterView />
  <reloadPrompt></reloadPrompt>
</template>

1
2
3
4

这样就大功告成了。

使用 vite-plugin-pwa 后如何自动更新APP

发表评论

共0条评论