Javascript 服务辅助进程中的获取API错误

我正在尝试缓存来自LastFM API的图像。现在，API响应本身缓存良好，页面按预期加载，但是没有图像

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

无法加载获取API。父文档页面已卸载

我对服务人员很陌生，这让我非常恼火（不，不是字面意思）

我已经学习了一些教程，这是到目前为止我得到的代码（不相关的代码已经删除）

var CACHE_NAME='WELFORDIAN-CACHE-V2'；
var urlsToCache=[
'https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=**用户名**&api_key=6136000ba0899c52db5ebcee77d4be15&format=json'
];
self.addEventListener（'install'，函数（事件）{
//执行安装步骤
event.waitill(
缓存。打开（缓存名称）
.then（函数（缓存）{
log（“打开的缓存”）；
返回cache.addAll（urlsToCache）；
})
);
});
self.addEventListener（'fetch'，函数（事件）{
var reqURL=新URL（event.request.URL）；
if（/lst.fm/.test（reqURL））{
event.respondWith（lastFMImageResponse（event.request））；
}否则{
事件响应(
caches.match（事件.请求）.then（函数（响应）{
如果（答复）{
返回响应；
}
var fetchRequest=event.request.clone（）；
返回fetch（fetchRequest）。然后(
功能（响应）{
如果（！response | | response.status！==200 | | response.type！=='basic'）{
返回响应；
}
var responseToCache=response.clone（）；
缓存。打开（缓存名称）
.then（函数（缓存）{
cache.put（event.request，responseToCache）；
});
返回响应；
}
);
}).catch（函数（err）{
返回错误；
})
);
}
});
函数lastFMImageResponse（请求）{
返回缓存。匹配（请求）。然后（函数（响应）{
如果（答复）{
返回响应；
}
返回fetch（请求）。然后返回函数（响应）{
caches.open（'lfm-images'）。然后（函数（cache）{
cache.put（请求、响应）；
});
返回response.clone（）；
});
});
}

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

---

混合内容目前不能很好地与服务人员配合：。

谢谢！我通过一个简单的PHP脚本提供图像来解决这个问题，该脚本从URL获取图像并输出数据。你救了我这么多烦恼。