Workbox

Question

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

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

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

service worker 生成的很好。

在./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 使这个问题很容易解决。

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

Answer 2

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

食谱是 changed 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 提供。

Workbox - SPA - 回退到 /index.html

Workbox - SPA - fallback to /index.html

javascript

webpack

service-worker

备注