服务工作者不返回自定义离线页面，而是返回默认的“离线"页面页 [英] Service worker not returning custom offline page it is instead returning the default "offline" page

问题描述

我有一个 Service Worker，我想在您离线时返回一个离线页面.我意识到你必须先缓存离线页面，所以我这样做了.当我缓存它并使用 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 事件将被调用，它会检查您的请求是否在缓存文件列表中找到，然后它将从那里提供文件，否则它将进行 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屋！