无法在“缓存”上执行“放置”：请求方法“POST”不受支持 - PWA 服务工作者

Question

我正在创建一个带有反应的 PWA。尽管它通过了灯塔测试并且可以安装，但我仍然在控制台中看到这两个错误。当我浏览应用程序时，错误会被记录无数次。

Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request method 'POST' is unsupported
        at Cache.put (<anonymous>)
        at worker.js:20

Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported
        at Cache.put (<anonymous>)
        at worker.js:20

第 20 行是 cache.put(event.request, resClone);

这是我的 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();
            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);
                }
            })
        ))
    );
});

Answer 1

您的服务会拦截来自 chrome-extension 的相同请求。您必须忽略这些请求。

if((event.request.url.indexOf('http') === 0)){ 
    //your request 
}