Skip to content

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本地上构建存储库:

shell
cd vite-plugin-pwa
pnpm install
pnpm run build

要运行示例,请从 shell(从根文件夹)执行以下脚本,它将启动一个 CLI,您将在其中选择框架和 pwa 选项:

shell
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 将会自动更新.

在MIT许可下发布.