Failed to execute 'waitUntil' on 'ExtendableEvent'

Question

I need the chrome registration id to send it as a parameter to the API call, so I can fetch message corresponding to the registration id. My code is as follows:

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;
});

The error I am getting with the above code is:

Uncaught (in promise) DOMException:

Failed to execute 'waitUntil' on 'ExtendableEvent': The event handler is already finished.(…) along with the extra notification 'The site has been updated in the background'. Now even if I remove event.waitUntil before the fetch(apiPath) part, I am still getting that extra notification.

Please help me find a solution to this.

P.S: The question at Chrome Push Notification: This site has been updated in the background does'nt seem to be of any use in my case.

score 3 · Accepted Answer · answered Apr 12 '16 at 14:19

You don't need to call event.waitUntil multiple times. You just need to call it once and pass it a promise, the event's lifetime will be extended until the promise is resolved.

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/'
        });
      });
    })
  );
});

I simply returned the promise object and it did the work i.e replaced `event.waitUntil` with `return` — doubt, Apr 12 '16 at 18:29
Yes, indeed. I simply modified the indentation a bit to make it easier to read for me, but that's the gist. — Marco Castelluccio, Apr 12 '16 at 23:29

Failed to execute 'waitUntil' on 'ExtendableEvent'

1 Answers1