在Service Worker中获取API错误

Question

我正在尝试从LastFM API缓存图像。 现在，API响应本身可以很好地缓存，并且页面可以按预期加载，但是，没有图像。

查看开发人员控制台，我可以看到一些有关图像检索的错误，它们如下：

提取API无法加载http://img2-ak.lst.fm/i/u/300x300/a32cb06bb22bc5d10654a5156fe78cf6.png 。 父文档页面已被卸载。

我是服务人员的新手，这使我无法梳理头发（不，不是字面上的意思）。

我遵循了一些教程，这是到目前为止的代码（不相关的代码已删除）。

 var CACHE_NAME = 'WELFORDIAN-CACHE-V2'; var urlsToCache = [ 'https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=**USERNAME**&api_key=6136000ba0899c52db5ebcee77d4be15&format=json' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); self.addEventListener('fetch', function(event) { var reqURL = new URL(event.request.url); if (/lst.fm/.test(reqURL)) { event.respondWith(lastFMImageResponse(event.request)); } else { event.respondWith( caches.match(event.request).then(function(response) { if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { if (!response || response.status !== 200 || response.type !== 'basic') { return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }).catch(function(err) { return err; }) ); } }); function lastFMImageResponse(request) { return caches.match(request).then(function(response) { if (response) { return response; } return fetch(request).then(function(response) { caches.open('lfm-images').then(function(cache) { cache.put(request, response); }); return response.clone(); }); }); } 

我显然做错了什么，但是比我解释这是什么的经验丰富的人可以吗？

Answer 1

问题是您的网站是HTTPS，而图像是通过HTTP提供的。

混合内容当前不适用于服务人员： https : //github.com/w3c/webappsec/issues/415 。