React

The React example project can be found on examples/react-router package/directory.

The router used on this example project is react-router.

To test new content available, you should rerun the corresponding script, and then refresh the page.

If you are running an example with Periodic SW updates, you will need to wait 1 minute:

警告

这只适用于在导入任何虚拟模块或使用 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 将会自动更新.