So, I have surfed a web for quite some time for FCM and gone through documentation as well but i could not found the one stop solution.
Here we go.
Integration with React
This is quite simple and straight forward.
I believe you do have the project ready if not
npx create-react-app fcm-client
Here is the tricky part - To work with notification you need a device token APN token.(App registration on specific device) for that we need to convert your app into a PWA. But, create-react-app has removed the service workers from the initial repo. To use service workers
npx create-react-app fcm-client --template cra-template-pwa
refer https://create-react-app.dev/docs/making-a-progressive-web-app/
This will create app with service worker.
Once this is complete go to firebase console and set up a new project (Assuming you will do it on your own)
Go to project settings->cloud messaging->web push certificate
and generate the key pair (will be needing to generate device token)
npm install bootstrap react-bootstrap
Go to App.js and paste below code
This will create a bootstrap toaster to display
import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
import {Button, Row, Col, Toast} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
const [show, setShow] = useState(false);
return (
<div className="App">
<Toast onClose={() => setShow(false)} show={show} delay={3000} autohide animation style={{
position: 'absolute',
top: 20,
right: 20,
}}>
<Toast.Header>
<img
src="holder.js/20x20?text=%20"
className="rounded mr-2"
alt=""
/>
<strong className="mr-auto">Notification</strong>
<small>5 mins ago</small>
</Toast.Header>
<Toast.Body>There are some new updates that you might love!</Toast.Body>
</Toast>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Button onClick={() => setShow(true)}>Show Toast</Button>
</header>
</div>
);
}
export default App;
Now create a new file in src directory firebase.js
and copy below code
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from "firebase/messaging";
const firebaseConfig = {
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
appId: APP_ID,
measurementId: MEASUREMENT_ID
};
const firebaseApp = initializeApp(firebaseConfig);
const messaging = getMessaging(firebaseApp);
Import firebase.js in your App.js
next create a new file in public directory called firebase-messaging-sw.js
and keep it empty for now
npm run start
This is how your screen will look like
Now its time to generate token
go to firebase.js and create new function which will request a permission from a user
const messaging = getMessaging(firebaseApp);
export const getTokens = async (setTokenFound) => {
//VAPID_KEY is the Web push certificates key pair
return getToken(messaging, {vapidKey: VAPID_KEY }).then((currentToken) => {
if (currentToken) {
console.log('current token for client: ', currentToken);
setTokenFound(true);
// Track the token -> client mapping, by sending to backend server
// show on the UI that permission is secured
} else {
console.log('No registration token available. Request permission to generate one.');
setTokenFound(false);
// shows on the UI that permission is required
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
// catch error while creating client token
});
}
For VAPID_KEY we already have a key if you remember we generated key above from firebase console use that key here
Now back to App.js and add the below code
import {getTokens} from './firebase'
// Inside a App function Just to be sure π
const [isTokenFound, setTokenFound] = useState(false);
getTokens(setTokenFound);
Now open you devtool and check console you will have token if not there are might be error saying Permission denied.
Ok this is the part is bit interesting you can manually unable the notification allow from i button before URL
But the interesting part is you can change your localhost:3000
to 127.0.0.1:3000
and it will ask you for a permission on chrome but both will work on firefox
Perfect All seems working till this point and you might have a token as well but now we want to see the notification from the server
go to firebase-messaging-sw.js
and copy below code
// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
appId: APP_ID,
measurementId: MEASUREMENT_ID
};
firebase.initializeApp(firebaseConfig);
// Retrieve firebase messaging
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
// Customize notification here
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
Now go to src->firebase.js and paste a listener function
export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
console.log("payload", payload)
resolve(payload);
});
});
back to App.js and add use the newly created listener
import {getTokens, onMessageListener} from './firebase'
// Inside APP function
onMessageListener().then(payload=>{
console.log(payload)
setShow(true)
}).catch(err=>console.log(err))
All good Awesome we are ready to receive our first message
Go to firebase console and inside engage->cloud messaging->send your first message
Add the requred details only and click on Send Test Message it will show a modal with asking for FCM Registration Token Like this
Here you add the token from your web console that we just generated before. This is your device token which firebase server will understand which device to send a notification And viola You will receive a notification.
Note- Notification will not show the same text as we have entered in firebase since we have configured the static text for demo purpose.
This is the front end part for the backend part i will create part 2 post which will cover server side notifications using firebase-admin and also subscriptions
Hope it was useful.
Top comments (2)
Thanks for your sharing
Deep explanation, Amazing !