jquery - ServiceWorker 向 FetchEvent.respondWith() 传递了一个 promise ，该 promise 以非响应值 ‘undefined’ 解析

Question

如果用户尝试在离线状态下打开未缓存的页面，我的服务工作线程应运行以下方法 unableToResolve()，但页面会显示:

Unable to connect Firefox can’t establish a connection to the server

在控制台中我收到错误:

Failed to load ‘www.examplesite.co.uk’. A ServiceWorker passed a promise to FetchEvent.respondWith() that resolved with non-Response value ‘undefined’.

我的服务工作人员运行良好，否则我不确定这可能是什么。

self.addEventListener("fetch", function(event) {
  var request = event.request;
  if (request.method !== 'GET') {
    return;
  }

  event.respondWith(
    caches.match(event.request).then(function(cached) {
      var networked = fetch(event.request).then(fetchedFromNetwork, function() {
        return cached;
      }).catch(unableToResolve);
      return networked;

      function fetchedFromNetwork(response) {

        var cacheCopy = response.clone();
        caches.open(version + 'offlinemode').then(function add(cache) {
          cache.put(event.request, cacheCopy);
        });
        return response;
      }

      function unableToResolve() {
        return new Response('<h1>Service Unavailable</h1>', {
          status: 503,
          statusText: 'Service Unavailable',
          headers: new Headers({
            'Content-Type': 'text/html'
          })
        });
      }
    })
  );
});

Answer 1

在 friend 的帮助下，我们解决了这个问题。我们需要在错误进入unableToResolve()之前抛出一个错误:')

event.respondWith(
    caches.match(event.request).then(function(cached) {
        var networked = fetch(event.request).then(fetchedFromNetwork, function(){if(cached === undefined){throw new Error('Network response was not ok.');}return cached;}).catch(unableToResolve);
        return networked;

        function fetchedFromNetwork(response) {
          var cacheCopy = response.clone();
          caches.open(version + 'offlinemode').then(function add(cache) {
              cache.put(event.request, cacheCopy);
          });
          return response;
        }
        function unableToResolve () {
          return new Response('<h1>Service Unavailable</h1>', {
            status: 503,
            statusText: 'Service Unavailable',
            headers: new Headers({
              'Content-Type': 'text/html'
            })
          });
        }
      })
  );