How to display push notifications from my website?

Question

I'm developing a simple website and I want my website to display push notifications to my users. It is something similar to how facebook.com displays notifications in chrome and firefox. I'm also working on an Android app that also supports push notifications through GCM.

So I need help on how to add push notification support to my website. Thanks in advance!

score 3 · Accepted Answer · answered Feb 08 '16 at 14:26

3

You can use Service Workers in order to display notifications from a website as stated in Implementing GCM Client on Chrome. You can refer to push messaging codelab on how to implement it.

answered Feb 08 '16 at 14:26

gerardnimo

1,444
8
10

That codelab tutorial really helped me. Thank you so much! And I want to know if push messaging works even when we don't have the browser opened? – Sivaprasanna Sethuraman Feb 09 '16 at 10:07
1

Accurate today, push messages are received and shown in Chrome for Android even if the browser isn't running. On desktop Chrome has to be running, but lets be honest, people always have a browser window sat around somewhere :) – owencm Mar 08 '16 at 03:26

score 0 · Answer 2 · answered Feb 08 '16 at 11:43

0

Would this help https://z-push.org/

You never mentioned which technology your developing you site in !

answered Feb 08 '16 at 11:43

PingCrosby

369
4
17

score 0 · Answer 3 · answered Mar 25 '16 at 16:29

Both Firefox and Chrome support the Push API.

Currently Firefox adhere to the standard, while Chrome uses an hybrid solution (Push API + GCM).

Basically you have to:

collect the endpoint (device token) and register a service worker (a snippet of code that will be executed later) using Javascript and the Push API
store the endpoint to the server
when something happens, from your backend you send the notifications to the browser manufacturer's service
the browser manufacturer's service delivers the notification to the browser (which has a permanent connection to it)

You can read this tutorial for Chrome and the Push API reference by MDN.

If you prefer a third party service I suggest the one I have developed: https://pushpad.xyz

How to display push notifications from my website?

3 Answers3