在获取事件中同时使用 respondWith 和 waitUntil

Question

是否有必要在 respondWith（本身在 fetch 事件中）中使用 waitUntil？ respondWith 是否已经 waitUntil 它收到了已解决的承诺？

对此的一些讨论是 here，其中给出了以下使用两者的简单示例：

addEventListener('fetch', event => {
  event.respondWith(
    fetch(whatever).then(response => {
      event.waitUntil(addThisToTheCache(response));
      return response;
    })
  );
});

但是没有waitUntil就不能写这个吗？如下：

addEventListener('fetch', event => {
  event.respondWith(
    fetch(whatever).then(response => {
      return addThisToTheCache(response).then(() => {
        return response;
      });
    })
  );
});

Answer 1

这将使浏览器处理和显示响应延迟两秒：

addEventListener('fetch', event => {
  event.respondWith(async function() {
    const response = await fetch(event.request);
    await processResponseForTwoSeconds(response);
    return response;
  }());
});

这不会：

addEventListener('fetch', event => {
  event.respondWith(async function () {
    const response = await fetch(event.request);
    event.waitUntil(processResponseForTwoSeconds(response));
    return response;
  }());
});

waitUntil 告诉 service worker 为正在进行的任务保持活动状态，但不会延迟响应。

在获取事件中同时使用 respondWith 和 waitUntil

Using both respondWith and waitUntil in a fetch event

javascript

service-worker

fetch-api