Vue
Vue 3
示例项目可以在 examples/vue-router 包/目录下找到
这个示例项目中使用的路由器是 vue-router
要测试 新的可用内容
,您应该重新运行相应的脚本,然后刷新页面
如果运行的是 Periodic SW updates
的示例,则需要等待 1 分钟:
警告
这只适用于在导入任何虚拟模块或使用 workbox-window
模块时
因为 workbox-window
使用基于时间的 heuristic
算法来处理 service worker 更新,因此,如果您构建了自己的 service worker 并再次注册它,如果上次注册和本次注册之间的时间不足 1 分钟,那么workbox-window
将把 service worker update found
事件作为外部事件处理,因此可能会有很奇怪的行为(例如,如果使用 prompt
,将显示离线准备就绪的对话框,而不是显示新内容可用的对话框;如果使用 autoUpdate
,将显示离线准备就绪的对话框,然而它不应该显示)。
执行示例
警告
按照以下说明操作之前, 请先阅读 贡献指南.
确保安装项目依赖项,并在clone/fork本地上构建存储库:
cd vite-plugin-pwa
pnpm install
pnpm run build
要运行示例,请从 shell(从根文件夹)执行以下脚本,它将启动一个 CLI,您将在其中选择框架和 pwa 选项:
pnpm run examples
如果你没有首先运行 pnpm build
, 你看能会看到像这样的错误, failed to load config
或者 Please verify that the package.json has a valid "main" entry
.
generateSW
generateSW
具有以下行为:
更新提示
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 当有新版本
service worker
可用时,显示更新提示
- 一旦
自动更新
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 当有新内容可用时, service worker 将会自动更新.
- 一旦
定期 service worker 更新
下的更新提示
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 当有新版本
service worker
可用时,显示更新提示
- 示例项目将注册一个
定期 service worker 更新
- 一旦
定期 service worker 更新
下的自动更新
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 示例项目将注册一个
定期 service worker 更新
- 当有新内容可用时, service worker 将会自动更新.
- 一旦
injectManifest
injectManifest
具有以下行为:
更新提示
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 当有新版本
service worker
可用时,显示更新提示
- 一旦
自动更新
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 当有新内容可用时, service worker 将会自动更新.
- 一旦
定期 service worker 更新
下的更新提示
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 当有新版本
service worker
可用时,显示更新提示
- 示例项目将注册一个
定期 service worker 更新
- 一旦
定期 service worker 更新
下的自动更新
:- 一旦
service worker
准备好了,在第一次访问时显示准备离线工作
- 示例项目将注册一个
定期 service worker 更新
- 当有新内容可用时, service worker 将会自动更新.
- 一旦