效果
vite-plugin-pwa插件启用pwa后默认会在后台自动更新应用,并在关闭所有已开启的页面并重新打开后激活
通过此方法可以以消息方式提醒用户手动刷新激活更新应用
方法
已经使用vite-plugin-pwa插件启用pwa
- 修改vite.config.ts
ts
export default defineConfig({
...
plugins: [
...
VitePWA({
// 修改此项,如果此项值为autoUpdate,则为自动给更新
registerType: "prompt",
}),
...
],
...
})
- 创建提醒组件
html
<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 = false
needRefresh.value = false
}
</script>
<template>
<div
class="pwa-toast"
role="alert"
>
<div class="message">
<span v-if="offlineReady">
应用已就绪
</span>
<span v-else>
新内容可用,点击重新加载按钮以更新。
</span>
</div>
<el-button
type="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
html
<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>