vite vue3 pwa 更新提醒

效果

vite-plugin-pwa插件启用pwa后默认会在后台自动更新应用，并在关闭所有已开启的页面并重新打开后激活
通过此方法可以以消息方式提醒用户手动刷新激活更新应用
在这里插入图片描述

方法

已经使用vite-plugin-pwa插件启用pwa

修改vite.config.ts

export default defineConfig({...plugins: [...VitePWA({// 修改此项，如果此项值为autoUpdate，则为自动给更新registerType: "prompt",}),...],...
})

创建提醒组件

<script setup lang="ts">
import {useRegisterSW} from 'virtual:pwa-register/vue'
import {ElButton} from "element-plus"
import "element-plus/es/components/button/style/css"const {offlineReady,needRefresh,updateServiceWorker,
} = useRegisterSW({immediate: true,onRegisteredSW(swUrl, r) {r && setInterval(async () => {// 检查更新，如果vite.config.ts配置为autoUpdate，此操作将直接触发更新，并刷新页面激活更新await r.update()}, 30000)},
})async function close() {offlineReady.value = falseneedRefresh.value = false
}
</script><template><divclass="pwa-toast"role="alert"><div class="message"><span v-if="offlineReady">应用已就绪</span><span v-else>新内容可用，点击重新加载按钮以更新。</span></div><el-buttontype="primary"@click="updateServiceWorker()">重新加载</el-button><el-button @click="close">关闭</el-button></div>
</template><style scoped>
.pwa-toast {position: fixed;right: 0;bottom: 0;margin: 16px;padding: 12px;border: 1px solid #8885;border-radius: 4px;z-index: 1;text-align: left;box-shadow: 3px 4px 5px 0px #8885;background-color: var(--el-bg-color);
}.pwa-toast .message {margin-bottom: 8px;
}
</style>

在应用中引入提醒组件
App.vue

<script setup lang="ts">
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import ReloadPrompt from "./components/ReloadPrompt.vue";
</script><template><el-config-provider :locale="zhCn">...<reload-prompt/></el-config-provider>
</template>