注意

Question

我正在使用workbox和webpack生成服务工作者。

使用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.'

Answer 1

幸运的是，工作箱使这很容易解决。

如果您的网站是单页应用，则可以使用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

Answer 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 提供。

Workbox - SPA - 回退到/index.html

注意

2 个答案: