Sending Push Notifications from Firebase

Bharat Agarwal
Apr 19, 2020 · 3 min read

Firebase is a platform that offers various services for mobile and web applications and helps developers build an application quickly with a lot of features. We can send push notification to the client with firebase cloud messaging, which allows us to send messages to any devices over the network using an HTTP request.

In this article, I will be going to show you how we can trigger push notification from a web page from javascript.
You can visit the demo web application or you can check code on GitHub.

Here I going to make two web pages, one service worker file, and one app.js file

  1. index.html is used for subscribing.
  2. send.html is used for triggering push notifications.
  3. app.js managing subscriptions and sending a push notification.
  4. sw.js is used to receive push notifications from firebase when in background.
  1. Create a Firebase account and create a new project.
  2. Register web app from the firebase project dashboard.
  3. Copy the firebase config file and past in sw.js and app.js file.
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXX.firebaseapp.com",
databaseURL: "https://XXXXXXXXX.firebaseio.com",
projectId: "XXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);

Subscribe for push notifications and get Token

For subscribing push notifications and to get token will use getToken() and which return us promises.

If notification permission has not granted this method will ask the user for the notification permissions. Otherwise, it will return a token or reject the promise due to an error.

Notification.requestPermission().then(permission => {
if (permission == "granted") {
messaging.getToken().then(currentToken => {
console.log(currentToken);
});
} else {
console.log("permission denied")
}
}).catch(e=>{
console.log(e)
});

Messaging service requires a service worker file.

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(res => {
console.log("Register Success");
messaging.useServiceWorker(res);
}).catch(e => {
console.log(e);
});
}

Also, you need to import firebase, firebase messaging library and firebase config for the project in service worker file sw.js

importScripts('https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.14.0/firebase-messaging.js');
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXX.firebaseapp.com",
databaseURL: "https://XXXXXXXXXX.firebaseio.com",
projectId: "XXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

Sending Push Notification from web page

For sending push notification it requires serverkey from firebase settings, and have to send serverkey in the header as Authorization, and with the FCM API, we have to pass notifications details (title and body) in the body while calling FCM APIs.

let body = {
to: "your push notification Token",
notification: {
title: "Title",
body: "Body",
click_action: "/",
}
};
const options = {
method: "POST",
headers: new Headers({
Authorization: "key=AAAAAAAAXAXAXAXAXAXAXAX(Your Server KEY)",
"Content-Type": "application/json"
}),
body: JSON.stringify(body)
};
fetch("https://fcm.googleapis.com/fcm/send", options)
.then(res => res.json())
.then(data => {
if (data.failure == 1) {
alert("Token Expire");
} else {
alert("Send Success");
}
}).catch(err => {
alert(err);
});

You can find the Sample code at Github.

Got questions or feedback? Let me know in the comments! Thanks for reading! Hope the information was helpful.

GDG Jalandhar

Google Developer Groups (GDGs) are for developers who are…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store