React PWA中caches.match返回undefined及缓存丢失问题

核心问题分析 #

1. Fetch 事件响应链断裂：你的fetch事件中，caches.open的回调函数没有返回cache.match的Promise，同时即使匹配到缓存响应，也没有将其作为Promise的最终返回值，导致event.respondWith接收到undefined，触发报错。
2. 缓存路径不统一：urlsToCache里混合了相对路径（如index.html）和绝对路径（如/manifest.json），会导致请求URL和缓存键不匹配，无法命中缓存。
3. 未处理缓存未命中场景：没有回退到网络请求，非缓存资源会直接失败。
4. 缓存被清空的误解：打印的cache对象并非空，只是浏览器控制台对Cache对象的展示方式问题；缓存"消失"大概率是路径不匹配导致的"找不到缓存"，而非真的被清理。

修复后的完整代码 #

const CACHE_NAME = 'version-1'

// 统一使用绝对路径，避免路径匹配问题
const urlsToCache = [
    '/index.html',
    '/static/js/main.a1ae2d16.js',
    '/service-worker.js',
    '/manifest.json',
    '/logo192.png',
    '/favicon.ico',
]

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Opened cache')
                return cache.addAll(urlsToCache)
            })
    )
})

self.addEventListener('fetch', (event) => {
    event.respondWith(
        // 完整返回Promise链，确保响应能传递到respondWith
        caches.match(event.request, {ignoreVary: true})
            .then((cachedResponse) => {
                // 命中缓存则返回缓存，否则发起网络请求
                if (cachedResponse) {
                    return cachedResponse;
                }
                // 网络请求返回后，可选更新缓存
                return fetch(event.request)
                    .then((networkResponse) => {
                        // 可选：将新的响应存入缓存，供后续请求使用
                        caches.open(CACHE_NAME).then((cache) => {
                            cache.put(event.request, networkResponse.clone());
                        });
                        return networkResponse;
                    });
            })
    )
})

关键修改说明 #

• 统一缓存路径：把所有资源路径改为绝对路径，确保请求URL和缓存键完全匹配。
• 修复Promise返回链：直接使用caches.match替代先caches.open再match的冗余操作，同时确保每个then都返回正确的值，让respondWith能拿到有效的响应。
• 添加网络回退逻辑：缓存未命中时自动发起网络请求，保证页面资源正常加载；可选添加缓存更新逻辑，让后续请求能用上最新资源。
• 移除冗余代码：Service Worker环境中self本身就是全局对象，无需重新赋值const self = this。

内容的提问来源于stack exchange，提问作者mateo max