JavaScript: Firebase Configuration & Important REST API's Example

Configuration & Simple Example

How to configuration your apps, send message, validate registration id, manage topic, manage group, batch, etc with Firebase Cloud Messaging ?

Step 1
Register & Get Configuration from https://console.firebase.google.com/
Step 2
For simple examples: Create file index.html & firebase-messaging-sw.js
Step 3
Let's follow the code below

index.html

<!--
	Notification using Firebase Example
	-----------------------------------

	Step 1 : Create file index.html & firebase-messaging-sw.js
	Step 2 : Register & Get Configuration from https://console.firebase.google.com/
	Step 2 : You need to run this app at http://{host}
	Step 3 : Done

	-----------------------------------

	Reference :
		- https://firebase.google.com/docs/cloud-messaging/js/client?hl=id
		- https://www.youtube.com/watch?v=BsCBCudx58g
		- https://firebase.google.com/docs/cloud-messaging/http-server-ref?hl=id
		- https://medium.com/@selvaganesh93/firebase-cloud-messaging-important-rest-apis-be79260022b5
		- https://medium.com/@sachinkhard/send-push-notification-via-firebase-by-postman-3f459ea5d170
		- https://firebase.google.com/docs/cloud-messaging/android/device-group
		- https://stackoverflow.com/a/60247902/9278668
		- https://stackoverflow.com/a/51529975/9278668
-->
<html>
<head>
	<title>Notification using Firebase Example</title>
</head>
<body>
	<h1>Notification using Firebase Example</h1>

	<button onclick="uninstallServiceWorker()">Uninstall Service Worker</button>
	<button onclick="inspectServiceWorker()">Inspect Service Worker</button>

	<br /><br />

	Open : <a href="chrome://inspect/#service-workers">chrome://inspect/#service-workers</a> for <b>inspect</b> <i>service worker</i> in google chrome

</body>
</html>

<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js"></script>

<script type="text/javascript">
let firebaseConfig = {
	apiKey: "{YOUR_FIREBASE_API_KEY}",
	authDomain: "{YOUR_FIREBASE_AUTH_DOMAIN}",
	projectId: "{YOUR_FIREBASE_PROJECT_ID}",
	storageBucket: "{YOUR_FIREBASE_STORAGE_BUCKET}",
	messagingSenderId: "{YOUR_FIREBASE_SENDER_ID}",
	appId: "{YOUR_FIREBASE_APP_ID}",
	measurementId: "{YOUR_FIREBASE_MEASUREMENT_ID}"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.requestPermission()
.then(function() {
	console.log('[BROWSER-FIREBASE] - Have permission');
	return messaging.getToken();
})
.then(function(currentToken) {
	console.log('[BROWSER-FIREBASE] - Firebase Client Token :', currentToken);
})
.catch(function(err) {
	console.log('[BROWSER-FIREBASE] - Error Occurred.', err);
});

// Only on Window
messaging.onMessage(function(payload) {
	console.log('[BROWSER-FIREBASE] - Received Foreground Message : ', payload);

	// https://stackoverflow.com/a/60247902/9278668
	navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
		let options = {
			body : payload.data.body,
			actions : JSON.parse(payload.data.actions),
			data : payload.data
		};

		registration.showNotification(
			payload.data.title,
			options
		)
	});
});

</script>

<script type="text/javascript">
function uninstallServiceWorker() {
	if('serviceWorker' in navigator) {
		navigator.serviceWorker.getRegistrations().then(function(registrations) {
			for(let registration of registrations) {
				console.log('[BROWSER] - Uninstalled service worker successful.', registration);
				registration.unregister();
			} 
		});
	}
}
function inspectServiceWorker() {
	alert('Open -> chrome://inspect/#service-workers');
	window.location = 'chrome://inspect/#service-workers';
}
</script>

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js');

let firebaseConfig = {
	apiKey: "{YOUR_FIREBASE_API_KEY}",
	authDomain: "{YOUR_FIREBASE_AUTH_DOMAIN}",
	projectId: "{YOUR_FIREBASE_PROJECT_ID}",
	storageBucket: "{YOUR_FIREBASE_STORAGE_BUCKET}",
	messagingSenderId: "{YOUR_FIREBASE_SENDER_ID}",
	appId: "{YOUR_FIREBASE_APP_ID}",
	measurementId: "{YOUR_FIREBASE_MEASUREMENT_ID}"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
	console.log('[SERVICE-WORKER-FIREBASE] - Received Background Message : ', payload);

	// Customize notification here
	let options = {
		body : payload.data.body,
		actions : JSON.parse(payload.data.actions),
		data : payload.data
	};

	return self.registration.showNotification(payload.data.title, options);
});

// https://stackoverflow.com/a/51529975/9278668
self.addEventListener('notificationclick', (event) => {
	console.log('Event :', event);
	console.log('Event Action :', event.action);

	event.waitUntil(async function () {
		let clientList = await clients.matchAll({
			includeUncontrolled: true
		});
		console.log('clientList :', clientList);
		let currentClient;
		for (let client of clientList) {
			console.log('client :', client);
			if (client['url'].indexOf(event.notification.data.click_action) >= 0) {
				client.focus();
				currentClient = client;
				break;
			}
		}
		if (!currentClient) {
			currentClient = await clients.openWindow(event.notification.data.click_action);
		}
	}());
});

Important REST API you need to know

Send Notification
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"to":"{CLIENT_TOKEN_ID}"
}

Response :

{
	"multicast_id":4921980195954539141,
	"success":1,
	"failure":0,
	"canonical_ids":0,
	"results":[
		{
			"message_id":"0:1616595535458896%e609af1cf9fd7ecd"
		}
	]
}

Send Notification to Multiple Registration IDs
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"registration_ids":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}

Response :

{
	"multicast_id":4921980195954539141,
	"success":1,
	"failure":0,
	"canonical_ids":0,
	"results":[
		{
			"message_id":"0:1616595535458896%e609af1cf9fd7ecd"
		}
	]
}

Validate Registration ID
URL : https://iid.googleapis.com/iid/info/{CLIENT_TOKEN}?details=true
Method : GET
Header :
- Authorization : key={YOUR_SERVER_KEY}
Response :

{
	"application":"com.chrome.windows",
	"subtype":"wp:http://127.0.0.1/#CAE6289F-8CD2-4D33-8B18-A3C22E76B-V2",
	"scope":"*",
	"authorizedEntity":"1065953619143",
	"platform":"BROWSER"
}

Create Group
URL : https://fcm.googleapis.com/fcm/notification
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
- project_id : {YOUR_SENDER_ID}
Request Body :

{
	"operation":"create",
	"notification_key_name":"{YOUR_GROUP_KEY_NAME}",
	"registration_ids":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}

Response :

{
	"notification_key":"{NOTIFICATION_KEY}"
}

Send Notification to Group
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"to":"{NOTIFICATION_KEY}"
}

Response :

{
	"success":3,
	"failure":0
}

Create Topic
URL : https://iid.googleapis.com/iid/v1:batchAdd
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
- Content-Type : application/json
Request Body :
```
{
	"to":"/topics/YOUR_TOPIC_NAME",
	"registration_tokens":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}
```
Remove Topic
URL : https://iid.googleapis.com/iid/v1:batchRemove
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
- Content-Type : application/json
Request Body :
```
{
	"to":"/topics/{TOPIC_NAME}",
	"registration_tokens":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}
```

Send Notification to Topic
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"to":"/topics/{TOPIC_NAME}"
}

Response :

{
	"message_id":{GENERATED_MESSAGE_ID}
}

Note :

iOS users receive notifications if it contains “notification” key and android users will receive notification for both notification and data key.
iOS users will receive background notification if it contains both key value pair “content_available” : true and “priority” : “high”
For iOS notification must contain keys title and body to receive notification

Reference :

Wednesday, March 24, 2021

JavaScript: Firebase Configuration & Important REST API's Example

Configuration & Simple Example

Important REST API you need to know

Note :

Fariz Fadian

0 komentar:

Followers

Popular Posts

Blog Archive

Labels

Visitor

Total Pageviews

Advertisement