工作箱-SPA-后备到/index.html

Question

我用针线用的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 中的配方发生了变化：

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。