javascript - 将服务 worker 请求中的响应修改为图像

Question

您好，提前谢谢您。

我的问题是关于使用 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');
     })
    );
 });

希望您能帮助我了解我所缺少的。谢谢。

Answer 1

你需要更换你的线路:

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');