How to schedule a chrome push notification?

Question

I am implementing chrome push notification for my website users. Which I am able to do successfully via service worker. I am following these articles/tutorials

1. https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en
2. http://www.html5rocks.com/en/tutorials/service-worker/introduction/

This works very well when I want to send notification NOW i.e. without scheduling for future.

My Problem:

I want to schedule this notification for later in the day may be recurring, which I can do via cron. But GCM does not send you payload as stated here https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en and I quote.

A downside to the current implementation of the Push API in Chrome is that you can’t send any data with a push message. Nope, nothing. The reason for this is that in a future implementation, payload data will have to be encrypted on your server before it’s sent to a push messaging endpoint. This way the endpoint, whatever push provider it is, will not be able to easily view the content of the push message. This also protects against other vulnerabilities like poor validation of HTTPS certificates and man-in-the-middle attacks between your server and the push provider. However, this encryption isn’t supported yet, so in the meantime you’ll need to perform a fetch to get information needed to populate a notification.

Because of this I am not able to figure out for which scheduled notification I have received push event in browser. As there might be multiple notification sent to GCM.

I am fetching last record in notification tables i.e. I am always showing last record data. As I don't know for which notification I am receiving push event in chrome browser.

My Question:

Is there a workaround to schedule notifications and show correct ones to the client/browser? Is it even possible in native chrome push api?

Answer 1

By always presenting the latest data, you are already doing the best you can. One alternative you could consider is to keep track of which events the client has already been told about, and move to the next event each time they fetch information. Of course, this does have the potential of going out of sync.

We plan to ship support for data payloads with Chrome 49 (which should reach the stable channel in March). This allows you to include up to 4KB of data with your messages, and should solve your problem.

On a slight tangent, please do note that using payloads will require you to encrypt the data included in the message. We'll have an extensive article (similar to the one you link to) and libraries available at launch.

Answer 2

Google Chrome is currently testing the new Notification Triggers API which does this.

Here is an example (from the link above) that schedules a reminder for 10 minutes before an appointment:

async function createAppointment(tag, title, timestamp) {
  // .. create the appointment in application-level code ..

  // Schedule a reminder to be shown to the user:
  await swRegistration.showNotification(title, {
    tag, body: 'Your appointment is due in ten minutes!',
    showTrigger: new TimestampTrigger(timestamp - TEN_MINUTES)
  });
}

You can enable the Notification Triggers API immediately on your site by signing up for an origin trial here.

Answer 3

When you fetch the notification data you can mark this entry as read, or delete it. Doing this way you can achieve that when there are two messages for user to show, the first fetch request takes the first unread message and marks it as read, and the second one can't take the previous message as it is already marked.

Another solution would be to take all unread messages in one fetch request and show all of them to user. Doing this, you might have "empty" pushes that do nothing.