12

I'd like to set up Web Push notifications on my progressive web application (PWA) using Service Workers. But I'm having trouble understanding the role of third-party services like Google Cloud Messaging and Amazon SNS, and if I need them at all.

From what I understand, when the user clicks the Allow notifications button, you get a unique subscription endpoint. Then in your backend, you can use this endpoint to send notifications to that specific user.

However, all back end libraries that I've found (like pywebpush or web-push for Node.js), mention that you need a GCM API key in order to send notifications.

But here is what the MDN Push API documentation says:

Chrome versions earlier than 52 require you to set up a project on Google Cloud Messaging to send push messages [...]

So I'm assuming that the new versions of Chrome (version 58 today) should be able to display notifications without the help of a third party.

Here is an example of what I want to achieve. I'm just not sure of what they do in the backend.

Note: I'm not trying to send native push notifications to Android or iOS devices, but only to my progressive web application on Chrome using the Web Push API.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
gkpo
  • 2,623
  • 2
  • 28
  • 47

1 Answers1

7

The Browser Push Service

As I have explained in another answer, in order to send web push notifications, you need to interact with the browser push service. Basically each browser, when the user allows push notifications, returns an endpoint (URL) that is specific for its own push service.

For example:

  • Chrome and Opera endpoints start with prefix https://fcm.googleapis.com/, because they use FCM (ex GCM)
  • Firefox endpoints start with prefix https://updates.push.services.mozilla.com/, because Firefox uses Mozilla autopush

So notifications will always pass through FCM and autopush, there's no alternative: the push service is hardcoded inside the browser.

Web Push Notification Services as a layer of abstraction

There is also another kind of web push services. Their aim is to provide a layer of abstraction and additional features over the browser push service. For example Pushpad is one of them (I am the founder).

Instead of interacting directly with the different browser push services (e.g. FCM, autopush), your web app can interact just with one push service (e.g. Pushpad), which then interacts with the browser push services for you (automating many tasks, like VAPID and providing additional features like monitoring and integrations).

Confusion about FCM

FCM is quite confusing because it acts both as a "browser push service" for Chrome and Opera, but it also acts as a general "web push notification service" for other browsers. So for Firefox for example, FCM acts as a proxy towards Mozilla autopush.

collimarco
  • 34,231
  • 36
  • 108
  • 142