最小化浏览器/ pwa时在ServiceWorker中延迟通知

如何解决最小化浏览器/ pwa时在ServiceWorker中延迟通知

self.setTimeout仅在未最小化/隐藏浏览器的情况下，才在预期的延迟后可靠地触发self.registration.showNotification。

似乎可以在20秒后使用。在那之后，它默默地失败了。

我尚未确定是否是self.setTimeout无法运行回调，或者是否是self.registration.showNotification无法显示通知。

代码：

importScripts('./ngsw-worker.js');

let pendingNotifications = new Map();

function wait(ms,pendingNotification) {
  return new Promise(resolve => {
    pendingNotification.TimerId = setTimeout(resolve,ms);
  });
}

async function processNotification(data,pendingNotification) {
  let delay = await wait(data.Data.DeferredSeconds * 1000,pendingNotification);
  //let notCancelled = pendingNotifications.has(data.Data.CancellationToken);
  pendingNotifications.delete(data.Data.CancellationToken);
  //if (notCancelled) {
  self.registration.showNotification(data.Data.Title,{ icon: data.Data.Icon,vibrate: data.Data.VibrationPattern,body: data.Data.Body });
  //}
  return null;
}

self.addEventListener('message',function (messageEvent) {
  let data = messageEvent.data;
  if (data == null) {
    return;
  }

  if (data.Type == "Notification") {

    let pendingNotification = {
      TimerId: -1,CancellationToken: data.Data.CancellationToken
    };
    pendingNotifications.set(data.Data.CancellationToken,pendingNotification);

    messageEvent.waitUntil(processNotification(data,pendingNotification));

  }

  if (data.Type == "NotificationCancel") {
    let pendingNotification = pendingNotifications.get(data.Data.CancellationToken);
    if (pendingNotification == null) {
      return;
    }
    self.clearTimeout(pendingNotification.TimerId);
    pendingNotifications.delete(pendingNotification.CancellationToken);
  }


})

解决方法

当浏览器“似乎”处于空闲状态时，服务工作者会被浏览器强行杀死。

如果要在保持服务工作者存活的同时执行异步工作，则需要在Promise内部执行该工作，然后将其传递给event.waitUntil()。这并不能使服务人员永远活着，但是会告诉浏览器延长服务人员的生命周期，直到Promise解决或浏览器特定的时间限制（通常是几分钟）过去为止。

任何从ExtendableEvent（包括MessageEvent）继承的服务工作者事件，都会公开waitUntil()方法。

不过，您需要重新编写代码，以将setTimeout()调用转换为something that's Promise-friendly。