【问题标题】：Workbox - SPA - fallback to /index.htmlWorkbox - SPA - 回退到 /index.html
【发布时间】：2018-05-26 02:57:45
【问题描述】：

我正在使用workbox 和 webpack 来生成一个 service worker。

在webpack.config.js中使用以下代码：

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

很好地生成了一个服务工作者。

在./src/sw.js，我有：

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

而且我所有的资产都被很好地预缓存了。

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

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

注意

做这样的事情：

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

不起作用，因为navigationFallback 在上述用法中不是有效选项。

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

【问题讨论】：

在你注入清单的 SW 版本中注册一个路由。正则表达式可以匹配您希望覆盖的 html，目标可以是 'index.html' 。查看 WB.registerRoute() 的文档

标签： javascript webpack service-worker workbox

【解决方案1】：

幸运的是，workbox 轻松解决了这个问题。

如果您的网站是单页应用，您可以使用 NavigationRoute 为所有导航请求返回特定响应。

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

【讨论】：

【解决方案2】：

对于 workbox v4 或更低版本，请使用 workbox.routing.registerNavigationRoute（请参阅另一个答案）。

v5 中的配方是changed：

import {precacheAndRoute, createHandlerBoundToURL} from 'workbox-precaching'
import {NavigationRoute, registerRoute} from 'workbox-routing'


precacheAndRoute(self.__WB_MANIFEST)
registerRoute(new NavigationRoute(createHandlerBoundToURL('/index.html')))

注意：self.__WB_MANIFEST（从self.__precacheManifest重命名）由WorkboxPlugin.InjectManifest提供。

【讨论】：