Workbox缓存策略不能正常工作

Question

我正在构建一个react应用程序，使用create-react-app和react-app-rewired-workbox来处理workbox。

我想使用workbox的networkOnly策略，但不知何故它不起作用。即使我将网络设为离线，服务工作者也会使用缓存进行响应

我也尝试了其他策略，但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());

下面是它预缓存所有路径的行为

​

网络已离线

​

预缓存正在脱机响应

​

服务工作人员正在处理该请求

​

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

Answer 1

根据预缓存选项，您需要删除此行，因为路由响应于Manifest预缓存。

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());