Getting started with progressive React Web Apps using Firebase

Software Developer - 10 September 2018 -
Software Developer - 10 September 2018 -
Sending notifications is one of the best ways to increase your app usage. Out of many websites/apps user visit, he can remember a few. Sometimes users install the app and forget. Push notifications come to your help. It’s a quick and simple way to notify the user without spamming his inbox. Push notifications are used widely by News Apps and Shopping Apps. Apps build in such a way that they can display notifications and keep track of user activity are known as Progressive Apps. In this article, we will be discussing only React applications.
React is a JavaScript library for building user interfaces.
Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business
As per Google Developers, Progressive Web Apps are
Login to firebase console https://console.firebase.google.com , and create a project. Then go to Project Overview and get started by adding Firebase to your app.
Click on the platform you want to implement Cloud Messaging.
In our case click on web icon and you will see config variable with API Key and Sender Id. Copy and keep this object for use in our App.
Install Firebase SDK.
npm install firebase – -save
All below code to your App.js
In this code, we are asking user permission to send notifications. If user allows then we start a worker in the user’s browser which will listen to incoming push messages.
Add “gcm_sender_id”: “103953800507” to your manifest.json (Note: 103953800507 is hard code value and do not replace it with your sender id)
Create a file firebase-messaging-sw.js and add below code
This is code for worker which run in the background in the browser even if user close App. We have added two Event Listeners one to receive notification and other to handle click on the notification.
That’s it we are done this changes in the app, this setup will receive the push notification on the user’s browser. Now we need the setup to send push notifications to the user.
To send push notification also you need to store token every time a new worker is registered or existing worker is refreshed.
With help of token, you can send the unicast push notification to that user.
To send a message you need to send a POST Request
URL: https://fcm.googleapis.com/fcm/send
Body:
Headers:
Content-Type: “application/json
Authorization: “key=AIzaSyD0TOmt….upinUwueESEYI”
To generate this key go to https://console.firebase.google.com/project/<your project>/settings/cloudmessaging/ and generate a key pair.
Use Public Key in Authorization Header.
There are few other ways to send Push Messages like use Firebase SDK. Firebase SDK can be installed via npm
npm install -g firebase-tools
Then Login to the firebase
firebase login
firebase init
Check docs here https://firebase.google.com/docs/cli/
This is just a start with Progressive Apps. There are a lot of possibilities in the world of Progressive Apps. We can leverage local resources available and minimize the use of REST calls. Also, we can give user Native App-like experience in Web Apps when the user is offline. You can make use of Service Workers. Service Workers are great tools when the user is offline or away from App.
Drawbacks of Progressive Web Apps
PWAs are not supported by iOS Safari. It only operates on Chrome, Firefox or Opera. But the survey reveals that it performs better than mobile websites even if the web browser is not supported.
Leave a Reply