Getting started with progressive React Web Apps using Firebase

 Introduction

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.

• Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
• Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
• Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

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

• Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging – Feel like a natural app on the device, with an immersive user experience.

Prerequisites:

To turn App into Progressive App you need

• Working React App.
• React 12.0 or above
• Node 6.0 or above
• Chrome(50+) or Firefox(48+)
• Google Cloud / Firebase Account (Even free trial will suffice)

Steps to implement Push Notifications using Cloud Messaging in React App

Step 1:

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.

Step 2:

Install Firebase SDK.

npm install firebase – -save

Step 3:

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.

Step 4:

Add  “gcm_sender_id”: “103953800507”  to your manifest.json (Note: 103953800507 is hard code value and do not replace it with your sender id)

Step 5:

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.

Sending Push Notifications to App from Firebase

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/

Conclusion:

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.

(9 votes, average: 4.11 out of 5)
Loading...