在 Service Worker 的事件处理程序中去抖动异步工作

Question

在 ServiceWorker 中使用 lodash debounced 函数对于 Firefox 来说是可以的。它们等待分配的超时时间，如果再次调用去抖函数，则计时器会重置。

但是，对于 Chrome，没有什么能按预期工作：去抖函数一调用就会调用内部函数，并且不会等待计时器中的重置。

有人遇到过这个问题吗？有什么解决方法吗？

我正在使用它来等待空闲用户（一段时间内不再获取）发送记录的分析。

Answer 1

在不查看示例代码的情况下完全调试它有点困难，但一般的经验法则是，如果您要在服务工作线程事件处理程序的同步执行之外调度您想要完成的异步工作，您需要

• 从ExtendableEvent 内部安排工作和
• 通过将完成工作的承诺传递给ExtendableEvent 的waitUntil() 方法来包装工作。

（FetchEvent 是 ExtendableEvent。）

如果你没有这样做，那么浏览器不能保证你的异步任务会在服务工作线程被杀死之前完成。不同的浏览器或多或少会主动终止服务工作线程，因此这可能解释了您所看到的不同行为。

lodash 的 debounce() 不提供对 Promise 的内置支持，因此您要么必须 wrap things yourself，要么找到合适的替代库。请注意，无论您使用哪种方法，请确保您使用最终会解决的承诺，即使操作已消除抖动。否则，如果你传递了一个无法解析为 waitUntil() 的 promise，你最终会让 service worker 存活太久。

抛开承诺返回debounceWithPromises() 的实际实现，一般结构如下所示：

self.addEventListener('fetch', (event) => {
  if (/* some criteria is met */) {
    // As soon as the promise passed to respondWith() resolves,
    // the response will start being fed to the client.
    event.respondWith(generateResponse(event);

    // Independent of the response generation, the promise returned
    // by the hypothetical debounceWithPromises() will keep the
    // service worker alive until it resolves or rejects (or until a
    // browser-specific maximum lifetime is reached).
    event.waitUntil(debounceWithPromises(logStats));
  }
});