时间戳

首页 > 解决方案 > 工作箱缓存策略无法正常工作

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

问题描述

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

我想使用workbox的networkOnly策略，但不知何故它不起作用。即使我使网络脱机，服务人员也会以缓存响应

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

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 在响应任何请求时也不会记录它正在使用的策略。

标签： javascriptreactjsservice-workercreate-react-appweb-worker

解决方案

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

推荐阅读