javascript - 如何通知我的应用程序正在接收来自 Service Worker 的缓存响应？

Question

我想使用 service worker 缓存响应，当用户离线或我的应用程序的后端关闭时可以使用这些响应。出于用户体验的原因，我想向用户显示一条通知，指出当前无法访问应用程序的后端，而是提供缓存的内容。这样做的最佳方法是什么？我可以在 Service Worker 的响应中添加一个 header ，但我不确定这是“正确的方法”……似乎应该有一个更直接的模式。这是我的服务 worker 代码:

self.addEventListener('fetch', event => {
  console.log(`fetch event`, event);
  event.respondWith(doFetch(event.request));
});

// fetch from network, fallback to cache
function doFetch(request) {
  return fetch(request)
    .then(response => {
      return caches.open(CACHE)
        .then(cache => {
          cache.put(request, response.clone());
          return response;
        })
    })
    .catch(error => {
      console.warn(`fetch to ${request.url} failed`, error);
      return fromCache(request);
    });
}

function fromCache(request) {
  return caches.open(CACHE)
    .then(cache => cache.match(request))
    .then(match => {
      if (match) {
        // response.clone doesn't work here because I need to modify it
        return cloneResponse(match);
      } else {
        throw new Error(`no match for ${request.url}`);
      }
    });
}
// this clones a response in a way that let's me modify it
function cloneResponse(response) {
  let init = {
    status: response.status,
    statusText: response.statusText,
    headers: { 'X-From-SW-Cache': 'true' }
  };

  response.headers.forEach((v, k) => {
    init.headers[k] = v;
  });

  return response.text().then((body) => new Response(body, init));
}

Answer 1

向响应添加 header 绝对是一种选择。
要考虑的另一个选择是使用 postMessage() 向客户端页面发送消息，让它知道正在使用缓存的响应。如果您想在重新使用网络后切换某些 UI 元素，您可以扩展该逻辑以向客户端发送一条消息，让它知道何时使用网络响应。
这是在您的服务 worker 中完成此操作的代码:

async function postToClient(clientId, message) {
  const client = await clients.get(clientId);
  client.postMessage(message);
}

async function responseLogic(event) {
  const cache = await caches.open('cache-name');
  try {
    const response = await fetch(event.request);
    await cache.put(event.request, response.clone());
    event.waitUntil(postToClient(event.request.clientId, 'FROM_NETWORK'));
    return response;
  } catch (error) {
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      event.waitUntil(postToClient(event.request.clientId, 'FROM_CACHE'));
      return cachedResponse;
    }
    throw error;
  }
}

self.addEventListener('fetch', (event) => {
  // Check to see if this is a request for your API:
  if (event.request.url === 'https://example.com/api') {
    event.respondWith(responseLogic(event));
  }
});

然后在您的客户端页面上，您可以注册 message监听器通过显示或隐藏一些 UI 元素来响应来自 Service Worker 的这些消息，具体取决于最后一个响应是来自网络还是缓存:

navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data === 'FROM_NETWORK') {
    // Do something in your UI.
  } else if (event.data === 'FROM_CACHE') {
    // Do something in your UI.
  }
});