javascript - Workbox 缓存策略无法正常工作

Question

我正在使用 create-react-app 和 react-app-rewired-workbox 构建一个 React 应用程序使用工作箱。

我想使用 workbox 的 networkOnly 策略，但不知何故它不起作用。即使我使网络离线，Service Worker 也会使用缓存进行响应

我也尝试了其他策略，但 Workbox 仅使用它的默认行为并首先响应缓存。

self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));

workbox.precaching.precacheAndRoute(self.__precacheManifest);

workbox.routing.registerRoute("/", new workbox.strategies.NetworkOnly());

这是它的行为方式预缓存所有路由

网络不在线

预缓存正在离线响应

service worker 正在处理请求

我期望的是，当我使用 networkOnly 策略时，它不应该响应缓存。 Workbox 也不会记录它在响应任何请求时使用的策略。

Answer 1

根据precache选项，你需要删除这一行，因为路由响应Manifest precache。

workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);

self.addEventListener('install', event => event.waitUntil(self.skipWaiting()));
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));


// We need this in Webpack plugin (refer to swSrc option): https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config
// REMOVE THIS:
//workbox.precaching.precacheAndRoute(self.__precacheManifest);

workbox.routing.registerRoute("/", workbox.strategies.networkOnly());