将 Service Worker 请求中的响应修改为图像

您好，提前谢谢您。

我的问题是关于使用响应网络请求服务工作者。我能够在文本或 html 的情况下处理它，但是当我尝试处理image我失败了，这是我的代码：

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 时有效，但是当我尝试使用image它带来了一个全黑的屏幕。这是我用过的，但没有用。

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

By :

return new Response("<img src='/imgs/sunset.gif'/>", {headers:{'Content-Type': 'text/html'}});

你想在你的页面中显示一个gif，所以你必须添加一个html内容并告诉它的来源src。

或者更简单的解决方案，你只能这样写：

return fetch('/imgs/sunset.gif');