Question

我尝试使用服务工作者获取和缓存一些外部资源/网站。

service-worker.js中的代码如下：

'use strict';

var static_urls = [
    'https://quiqqer.local/test?app=1',
    'https://quiqqer.local/calendar?app=1'
];

self.addEventListener('install', function (event)
{
    event.waitUntil(
        caches.open('ionic-cache').then(function(cache) {
            cache.addAll(static_urls.map(function (urlToPrefetch)
            {
                console.log(urlToPrefetch);
                return new Request(urlToPrefetch, {mode: 'no-cors'});
            })).catch(function(error) {
                console.error(error);
            }).then(function() {
                console.log('All fetched and cached');
            });
        })
    );
});

创建此输出：

service-worker.js: https://quiqqer.local/test?app=1
service-worker.js: https://quiqqer.local/calendar?app=1
service-worker.js: TypeError: failed to fetch
service-worker.js: All fetched and cached 
(index): service worker installed

取错失败的原因是什么？

我的网站https://quiqqer.local已将标题Access-Control-Allow-Origin设置为＆＃39; *＆＃39;

也许它是我网站的自签名证书？

我为此证书添加了一个例外，因此，如果我打开该网站，Chrome会显示网站旁边没有安全网站，但内容仍会显示。

Answer 1

由于您明确设置了TRUNCATE，因此您将获得一个opaque Response - 一个总是有{mode: 'no-cors'}的响应代码。

如果您尝试添加到缓存中的0的代码超出cache.add()范围，则

Response将throw a TypeError。

由于您在服务器上启用了CORS，通过2xx标题，您只需将Access-Control-Allow-Origin设置为mode即可发出请求。 'cors' 'cors'是跨源网址的默认设置，因此

mode

应该为您提供所需的行为。

如果您正在针对不支持CORS的服务器发出请求，并且您想要对其进行缓存，那么您必须明确设置cache.addAll(static_urls) .then(...) .catch(...);并使用组合{mode: 'no-cors'} + fetch()添加缓存的不透明响应。（并且您必须承担不透明响应不是4xx或5xx错误的风险，因为无法知道。）但是，您不必担心因为您的服务器确实支持CORS。

ServiceWorker无法无故获取外部资源

1 个答案: