服务人员不返回离线页面，而是返回默认的“离线"页面.页 [英] Service worker not returning offline page it is instead returning the default "offline" page

问题描述

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

I have a service worker that I want to return an offline page if you're offline. I realized you have to cache the offline page first, so I did that. When I had it cached, and I used chrome dev tools to throttle the network to offline, it showed the default offline page! I don't know how to bring up the page when it is offline. I'm on a chromebook if that would change anything. Here's my code (by the way I am completely new to service workers):

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调用以从服务器获取文件.

Replace your fetch event code with this one. For every request your fetch event will be invoked and it will check if your request is found in the cache file list then it will serve the file from there otherwise it will make the fetch call to get the file from server.

self.addEventListener('fetch', (event) => {
  // We only want to call event.respondWith() if this is a navigation request
  // for an HTML page.
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetch() returns a valid HTTP response with a response code in
        // the 4xx or 5xx range, the catch() will NOT be called.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse;
      }
    })());
  }

  // If our if() condition is false, then this fetch handler won't intercept the
  // request. If there are any other fetch handlers registered, they will get a
  // chance to call event.respondWith(). If no fetch handlers call
  // event.respondWith(), the request will be handled by the browser as if there
  // were no service worker involvement.
});

这篇关于服务人员不返回离线页面，而是返回默认的“离线"页面.页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！