javascript - Workbox - SPA - 回退到/index.html

Question

我正在使用 workbox使用 webpack 生成服务 worker 。

在webpack.config.js中加入如下代码:

new WorkboxPlugin.InjectManifest({
  swSrc: "./src/sw.js"
}),

service worker 生成的很好。

在 ./src/sw.js 中，我有:

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

我所有的资源都被很好地预缓存了。

但是，我有一个单页应用程序，我注意到当从非主页路由离线刷新页面时，服务 worker 没有响应。例如，在离线时刷新 /page1 不起作用，但刷新 / 却起作用。

我如何配置工作箱以使用运行时策略，该策略使用 /index.html 作为 HTML 请求的后备？

注意事项

做这样的事情:

new WorkboxPlugin.InjectManifest({
  swSrc: "./src/sw.js",
  navigationFallback: "/index.html"
})

不起作用，因为 navigationFallback 不是一个有效的选项，因为它超出了使用范围。

{ message: '"navigationFallback" is not a supported parameter.'

Answer 1

幸运的是，workbox 使这个问题很容易解决。

If your site is a single page app, you can use a NavigationRoute to return a specific response for all navigation requests.

workbox.routing.registerNavigationRoute('/single-page-app.html');

以我为例:

workbox.routing.registerNavigationRoute('/index.html');

来源:https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route