微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

服务工作者未返回脱机页面正在返回默认页面

如何解决服务工作者未返回脱机页面正在返回默认页面

我有一名服务人员,如果您离线,我想返回离线页面。我意识到您必须先缓存脱机页面,所以我做到了。当我缓存它时,我使用chrome开发工具将网络限制为离线状态,它显示认的离线页面!我不知道离线时如何调出页面。我在chromebook上,如果那会改变什么。这是我的代码(顺便说一句,我对服务人员是完全陌生的):

this.addEventListener('install',function(event) {
 event.waitUntil(
 caches.open('v1').then(function(cache) {
   return cache.addAll(['../offline.html','../images/ico/ico.jpg']); 
 })
 );
});
this.addEventListener('fetch',function(event) {
    event.respondWith(
       caches.match(event.request)
           .then(function(response) {
               // If fetch fails,we return offline.html from cache.
               return fetch(event.request)
                   .catch(err => {
                       return caches.match('../offline.html');
                   });
           }
       )
   );
});

解决方法

用此代码替换您的提取事件代码。对于每个请求,都会调用您的fetch事件,它会检查您的请求是否在缓存文件列表中找到,然后从那里提供文件,否则将进行fetch调用以从服务器获取文件。

<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。