如何阻止Service Worker创建缓存？React PWA场景解决方法

如果你只需要PWA的添加到主屏和全屏查看功能，不需要离线缓存、资源存储等特性，同时解决部署后需清缓存才能看到更新的问题，可以按以下步骤修改Service Worker（SW）逻辑：

1. 重写Service Worker核心逻辑 #

默认的React PWA Service Worker（比如Create React App自带的）会自动缓存静态资源，你需要删除所有缓存相关代码，让SW仅满足PWA的安装条件，不做任何缓存操作：

// src/service-worker.js
// 安装阶段：跳过等待，让新SW立即激活
self.addEventListener('install', (event) => {
  event.waitUntil(self.skipWaiting());
});

// 激活阶段：接管所有客户端，并清除所有旧缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    Promise.all([
      // 删除所有已存在的缓存
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => caches.delete(cacheName))
        );
      }),
      // 接管当前打开的所有页面
      self.clients.claim()
    ])
  );
});

// 请求拦截：直接转发网络请求，不做缓存处理
self.addEventListener('fetch', (event) => {
  event.respondWith(fetch(event.request));
});

2. 简化Manifest配置 #

确保public/manifest.json仅保留实现目标功能的必要字段，避免多余配置影响缓存逻辑：

{
  "name": "你的应用名称",
  "short_name": "应用简称",
  "start_url": ".",
  "display": "standalone", // 或"fullscreen"，实现全屏/独立窗口效果
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. 处理Create React App特殊情况 #

如果你的项目是Create React App生成的，需注意：

• 若使用cra-template-pwa模板，默认会引入Workbox做缓存，你可以直接替换上述自定义的service-worker.js，并在index.js中确保SW注册逻辑正确：

  // src/index.js
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
          console.log('SW registered: ', registration);
        })
        .catch(err => {
          console.log('SW registration failed: ', err);
        });
    });
  }
  

• 若之前用了Workbox的自动缓存，需删除所有Workbox相关的导入和缓存配置，比如precacheAndRoute、registerRoute等代码。

效果说明 #

修改后，Service Worker不会再缓存任何资源：

• 用户访问应用时，所有资源直接从网络获取，部署更新后，新的SW会自动激活并接管页面，无需手动清除缓存或使用隐身模式。
• 依然满足PWA的安装条件，用户可以正常将应用添加到主屏，并以全屏/独立窗口模式打开。

内容的提问来源于stack exchange，提问作者Shoyeb Mohammed Suny