您好,提前谢谢您。
我的问题是关于使用 ServiceWorker 响应网络请求。如果是文本或 html,我可以处理它,但是当我尝试处理图像时,我失败了,这是我的代码:
self.addEventListener('fetch', function(event){
event.respondWith(
fetch(event.request).then(function(response){
if(response.status === 404){
return new Response('The page wasn\'t found');
}
return response;
}).catch(function(){
return new Response('The network is totally failed');
})
);
});
上面的代码片段在处理文本和 html 时有效,但当我尝试处理图像 时,它会出现全黑屏幕。这是我用过的,但没有用。
self.addEventListener('fetch', function(event){
event.respondWith(
fetch(event.request).then(function(response){
if(response.status === 404){
return new Response('/imgs/sunset.gif', {headers:{'Content-Type':'image/gif'}});
}
return response;
}).catch(function(){
return new Response('The network is totally failed');
})
);
});
希望您能帮助我了解我所缺少的。谢谢。
最佳答案
你需要更换你的线路:
return new Response('/imgs/sunset.gif', {headers:{'Content-Type':'image/gif'}});
作者:
return new Response("<img src='/imgs/sunset.gif'/>", {headers:{'Content-Type': 'text/html'}});
你想在你的页面中显示一个gif,所以你必须添加一个html内容并告诉它的来源src。
或者更简单的解决方案你只能这样写:
return fetch('/imgs/sunset.gif');
关于javascript - 将服务 worker 请求中的响应修改为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47250020/