无法在“ExtendableEvent”上执行“waitUntil”

Posted 2023-02-24

【中文标题】无法在“ExtendableEvent”上执行“waitUntil”

【英文标题】：Failed to execute 'waitUntil' on 'ExtendableEvent'

【发布时间】：2016-04-12 11:08:28

【问题描述】：

我需要 chrome 注册 id 将其作为参数发送给 API 调用，这样我就可以获取与注册 id 对应的消息。我的代码如下：

self.addEventListener('push', function(event) 

var apiPath = 'http://localhost/api/v1/notification/getNotification?regId=';
event.waitUntil(registration.pushManager.getSubscription().then(function (subscription)
    apiPath = apiPath + subscription.endpoint.split("/").slice(-1);
    event.waitUntil(fetch(apiPath).then(function(response)
        if(response.status !== 200)
            console.log("Problem Occurred:"+response.status);
            throw new Error();
        
        return response.json().then(function(data)
            var title = data.title;
            var message = data.body;
            var icon = data.icon;
            var tag = data.tag;
            var url = data.url;
            return self.registration.showNotification(title,
               body: message,
               icon: icon,
               tag: tag,
               data: url
            );
        )
    ).catch(function(err)
        var title = 'Notification';
        var message = 'You have new notifications';
        return self.registration.showNotification(title,
               body: message,
               icon: '/images/Logo.png',
               tag: 'Demo',
               data: 'http://www.google.com/'
            );
    )
    )
));
return;
);

上面的代码我得到的错误是：

未捕获（承诺）DOMException：

：事件处理程序已经完成。(…) 以及额外的通知“该站点已在后台更新”。 现在，即使我在 fetch(apiPath) 部分之前删除了 event.waitUntil，我仍然会收到额外的通知。

请帮我找到解决办法。

P.S：Chrome Push Notification: This site has been updated in the background 的问题对我来说似乎没有任何用处。

【参考方案1】：

您无需多次致电event.waitUntil。你只需要调用一次并传递一个promise，事件的生命周期将会延长，直到promise被解决。

self.addEventListener('push', function(event) 
  var apiPath = 'http://localhost/api/v1/notification/getNotification?regId=';

  event.waitUntil(
    registration.pushManager.getSubscription()
    .then(function(subscription) 
      apiPath = apiPath + subscription.endpoint.split("/").slice(-1);

      return fetch(apiPath)
      .then(function(response) 
        if (response.status !== 200)
          console.log("Problem Occurred:"+response.status);
          throw new Error();
        

        return response.json();
      )
      .then(function(data) 
        return self.registration.showNotification(data.title, 
          body: data.body,
          icon: data.icon,
          tag: data.tag,
          data: data.url,
        );
      )
      .catch(function(err) 
        return self.registration.showNotification('Notification', 
          body: 'You have new notifications',
          icon: '/images/Logo.png',
          tag: 'Demo',
          data: 'http://www.google.com/'
        );
      );
    )
  );
);

【讨论】：

我只是返回了 promise 对象，它完成了工作，即将 event.waitUntil 替换为 return

是的，确实如此。我只是稍微修改了缩进以使其更易于阅读，但这就是要点。