React开发PWA时Service Worker报Cache.put不支持POST等请求错误如何解决

两个报错都是因为当前Service Worker的缓存逻辑无差别处理所有请求，触发了浏览器Cache API的限制：

• 第一个POST相关报错：Cache API本身不支持缓存POST类型的请求，应用运行过程中产生的POST请求被fetch事件拦截后，直接执行cache.put操作就会抛出该异常。
• 第二个chrome-extension协议相关报错：浏览器扩展发起的请求同样会被Service Worker的fetch事件捕获，Cache API仅支持http、https等标准Web请求协议，不支持chrome-extension这类扩展专属协议的缓存，直接执行写入操作就会报错。

你需要在执行缓存写入操作前新增过滤逻辑，仅对符合要求的请求做缓存处理，修改后的worker.js代码如下：

const CACHE_NAME = 'My App';

// Install a service worker
self.addEventListener('install', event => {
    console.log('Opened cache');
});

// Cache and return request
self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request).then(res => {
            const resClone = res.clone();
            // 新增前置校验逻辑，只有符合条件的请求才缓存
            if (
              event.request.method === 'GET' // 仅缓存GET请求
              && res.ok // 仅缓存响应正常的请求
              && /^https?:/.test(event.request.url) // 仅缓存http/https协议的请求
            ) {
                caches
                    .open(CACHE_NAME)
                    .then(cache => {
                        cache.put(event.request, resClone);
                    });
            }
            return res;
        }).catch(err => caches.match(event.request).then(res => res))
    );
});

// Update a service worker
self.addEventListener('activate', event => {
    const cacheWhitelist = [];
    cacheWhitelist.push(CACHE_NAME);

    event.waitUntil(
        caches.keys().then((cacheNames) => Promise.all(
            cacheNames.map((cacheName) => {
                if (!cacheWhitelist.includes(cacheName)) {
                    return caches.delete(cacheName);
                }
            })
        ))
    );
});

修改说明：

• 新增了三层校验逻辑，只有同时满足「GET请求」「响应状态正常」「请求协议为http/https」三个条件时，才会执行缓存写入操作，其余请求直接返回响应不做缓存，即可避免两类报错。

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