Push notifications allows your application to notify user with new messages/events even when the user is not actively using your application/website. It provides a simple and effective way to re-engage with your users. Push notification for web applications is a customized message or alert delivered by a centralized server. It allow your users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, engaging content.
We are going to discuss about few topics listed below that explains how the push notification for web applications works using Firebase.
- Service Workers
- Firebase
- Web push (Node.JS Package)
Service Workers
Service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. It allow you to include features like push notifications and background sync. It’s a JavaScript Worker, so it can’t access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed.
You can get the list of running service workers on your chrome browser by hitting the url chrome://inspect/#service-workers. Similarly get the list of all registered service workers by hitting chrome://serviceworker-internals/.
Firebase
Firebase is a mobile and web application platform with tools and infrastructure designed to help developers build high-quality apps. Its has a various tools like Realtime Database, Hosting, Cloud Messaging, etc ..,
Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages
Web push (Node.JS Package)
Web push requires that push messages triggered from a backend be done via the Web Push Protocol and if you want to send data with your push message, you must also encrypt that data according to the Message Encryption for Web Push. Web push module makes it easy to send messages and will also handle legacy support for browsers relying on GCM/FCM for message sending / delivery.
Push Notification For Web Applications :
Here are the steps to run sample code on your computer. Before proceeding into steps make sure you have installed Node.Js and chrome browser on your computer.
- Download/Clone the code from GitHub
- Install packages dependencies by using the command
npm installon your command prompt - After Installing dependencies start the application server by using the command
node app - Now, Server application turned at port
http://localhost:3001/and client application at porthttp://localhost:3002/ - Now, Run your server-side application to get server public key and add to your client application files (
sw.js&main.js) - Run your client-side application to get the endpoint(JSON). Just copy and paste on your server-side applications and send message.
Some Links for more Reference to Push Notification :
- Service Workers
- Service Worker API
- Adding Push Notifications to a Web App
- Push Notifications on the Open Web
Please leave your valuable comments/suggestions/feedback/questions on below comment box if any.
Thank You !!
Interesting posts here.
Excellent Siva, Looking for more articles.
Hi Siva,
Thank you for sharing…
I have a doubt,
# In android smart phones, is it like facebook web push notification implementation?
Hi Nithin,
It would be same but I didn’t tried yet.
Thanks,
Siva
please post complete source code
Source is already on GitHub, Check the link on article above
thanks siva nice article.
Hi ,
SIVA SANKAR Let me know how can i sent push notification to a channel.
Hi, I am not sure about it. Plesae refer Creating notification channels you can find solutions for all your needs.
Thanks,
Siva
Hi Siva,
Thank you very much for this article. i have done all process as described, register is also succeed from both server + client side.
But on server side when i send msg with ” Subscription to Send To ” (value got from client side) getting an error:
http//**.com/api/send not found ( send-message.js:49 )
please help me, how can i solve this..
Seems your URL is not valid
Thanks,
Siva
ok thanks,
please please guide me, how should i keep files on server or
anything that can help solve this problem…. &
how can be send using PHP curl ?
do i need 2 create
folder & files like root/api/send.php or wht should i do ?
only this 1 point i got stuck rest are working fine….
really very nice post sir.
Very happy with your post…But can i know how can i integrate if my web server is running on PHP..how can i able to broadcast messages from php backend ?????
Thank you, Unfortunately I don’t have an sample to show on PHP
It’s ok… But it’s unfair to run an extra node instance alongside Php.. I’m having a hard time finding a decent getaway with php implementation. Anyway thanks for the reply..
There is lot of tutorial available on Internet for PHP, You can check on those
Hi Shiva
how to send push notification to all subscriber.
You can checkout the reference link on this post for your reference
hi shiva
i am trying to run your source code but i am unable to send notification showing this error .
pls help
{“code”: 401, “errno”: 109, “error”: “Unauthorized”, “more_info”: “http://autopush.readthedocs.io/en/latest/http.html#error-codes”, “message”: “Request did not validate missing authorization header”}
You have authorization problem, Check with Firebase Keys