工作框 - 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

幸运的是，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

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