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

问题描述

我有一名服务人员，如果您离线，我想返回离线页面。我意识到您必须先缓存脱机页面，所以我做到了。当我缓存它时，我使用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>

javascript service-worker