服务人员加载新页面时出错，原因是什么？

Question

在教程的帮助下，我编写了一个服务人员：

var CACHE = 'cache-and-update';

self.addEventListener('install', function (evt) {
    console.log('The service worker is being installed.');

    evt.waitUntil(precache());
});

self.addEventListener('fetch', function (evt) {

    evt.respondWith(fromCache(evt.request));

    evt.waitUntil(update(evt.request));
});

function precache() {
    return caches.open(CACHE).then(function (cache) {
        return cache.addAll([
            // Nothing.
        ]);
    });
}

function fromCache(request) {
    return caches.open(CACHE).then(function (cache) {
        return cache.match(request).then(function (matching) {
            return matching || Promise.reject('no-match');
        });
    });
}

function update(request) {
    return caches.open(CACHE).then(function (cache) {
        return fetch(request).then(function (response) {
            return cache.put(request, response);
        });
    });
}

它总是先从缓存服务，然后获取所有文件，并在页面重新加载时更新。

Service Worker在我的服务器上的每个超文本标记语言文件中都是这样注册的：

<script>
    navigator.serviceWorker.register('https://www.example.com/sw.js', {
        scope: '../'
    });
</script>

现在的问题是，当我转到一个尚未缓存的页面时，它首先向我显示默认的ChromeERR\u FAILED错误（以及“不匹配”promise拒绝）。

软件会在向客户机显示错误页面的同时获取它，并在重新加载时再次工作（因为它是从缓存提供服务的）。

为什么会发生这种情况？当没有可用的缓存版本时，如何让服务人员从服务器加载页面？

Answer 1

如果在缓存中没有找到文件，您拒绝了promise，您应该获取它然后缓存它，而不是返回Promise.reject（'no-Match'），并且您不需要evt.wait在这种情况下直到

这是一个工作服务人员的完整片段。如果一个请求与缓存中的任何内容都不匹配，我们从网络中获取它，将其发送到页面，同时将其添加到缓存中。

let cacheName = 'cache-v1';

self.addEventListener('install', (e) => {

  let cache = caches.open(cacheName).then((c) => {
    c.addAll([
      // nothing
    ]);
  });

  e.waitUntil(cache);
});

self.addEventListener('fetch', function (event) {

  event.respondWith(

    caches.open(cacheName).then(function (cache) {
      return cache.match(event.request).then(function (response) {
        return response || fetch(event.request).then(function (response) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })

  );

});