网站模板建站教程,自己做小程序要钱吗,怎么做网站 有空间,it行业网站建设效果
vite-plugin-pwa插件启用pwa后默认会在后台自动更新应用#xff0c;并在关闭所有已开启的页面并重新打开后激活 通过此方法可以以消息方式提醒用户手动刷新激活更新应用
方法
已经使用vite-plugin-pwa插件启用pwa
修改vite.config.ts
export default defineConfig(…效果
vite-plugin-pwa插件启用pwa后默认会在后台自动更新应用并在关闭所有已开启的页面并重新打开后激活 通过此方法可以以消息方式提醒用户手动刷新激活更新应用
方法
已经使用vite-plugin-pwa插件启用pwa
修改vite.config.ts
export default defineConfig({...plugins: [...VitePWA({// 修改此项如果此项值为autoUpdate则为自动给更新registerType: prompt,}),...],...
})创建提醒组件
script setup langts
import {useRegisterSW} from virtual:pwa-register/vue
import {ElButton} from element-plus
import element-plus/es/components/button/style/cssconst {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
}
/scripttemplatedivclasspwa-toastrolealertdiv classmessagespan v-ifofflineReady应用已就绪/spanspan v-else新内容可用点击重新加载按钮以更新。/span/divel-buttontypeprimaryclickupdateServiceWorker()重新加载/el-buttonel-button clickclose关闭/el-button/div
/templatestyle 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 langts
import {ElConfigProvider} from element-plus
import zhCn from element-plus/es/locale/lang/zh-cn
import ReloadPrompt from ./components/ReloadPrompt.vue;
/scripttemplateel-config-provider :localezhCn...reload-prompt//el-config-provider
/template
