我正在尝试使用服务工作者来执行以下任务:


缓存一组页面。
如果需要,则从缓存中返回一个页面-如果该页面不在缓存中,则从服务器返回。
如果缓存或服务器均未响应,则返回一个自定义的脱机页面。


我有以下代码:

this.addEventListener('install', function(event) {
  console.log('Service Worker: Installing');

  event.waitUntil(

    caches.open('v1').then(function(cache) {
      console.log('Service Worker: Caching Files');
      return cache.addAll([
        '/assets/logo.svg',
        '/assets/app.css',
        '/assets/app.js',
        '/assets/common.js',
        '/offline.html'
      ]);
    })
  );
});

this.addEventListener('fetch', function(event) {
  if (event.request.method != "GET" || event.request.mode == "cors" || event.request.url.startsWith('chrome-extension')) return;
  console.log('Event to be passed', event);

  event.respondWith(
    caches.open('v1').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          console.log('Service Worker: Returning Cached Response', response);
          return response;
        } else {
          fetch(event.request).then(function(response) {
            console.log('Service Worker: Returning Response from Server', response);
            cache.put(event.request, response.clone());
            return response;
          }).catch((error) => {
            console.log('Fetch failed; returning offline page instead.', error);
            return caches.match('/offline.html');
          });
        }
      });
    })
  );
});

this.addEventListener('activate', function activator(event) {
  console.log('Service Worker: Activating', event);
  event.waitUntil(
    caches.keys().then(function(keys) {
      return Promise.all(keys
        .filter(function(key) {
            return key.indexOf('v1') !== 0;
        })
        .map(function(key) {
            return caches.delete(key);
        })
      );
    })
  );
});


我遇到的问题是,即使脱机时也实际上未检索文件,即使脱机时我也收到200响应。

我知道这是PWA始终返回200响应的先决条件之一,但是如果我的响应始终返回200,如何返回脱机页面。

对服务人员的任何帮助,建议或资源都是有用的。

干杯。

最佳答案

您必须处理所有事件,如果没有什么特别的事情,您不能只是“返回”。

this.addEventListener('fetch', function(event) {
    if (event.request.method != "GET" || event.request.mode == "cors" || event.request.url.startsWith('chrome-extension')){
        event.respondWith(fetch(event.request));
        return;
    }
....


那么您还必须返回您的fetch事件,否则您将破坏Promise链。

} else {
    return fetch(event.request).then(function(response) {

关于javascript - 尝试与服务人员显示脱机页面,但即使脱机也收到200响应,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45258359/

10-11 14:18