How to push notification in NuxtJS with Firebase Cloud Messaging

In this post, I'll talk about how to push notification in NuxtJS with Firebase Cloud Messaging.

You need to do those steps to push notification with Firebase Cloud Messaging.

Create a Firebase app at https://console.firebase.google.com/ then you create a new web app project to receive info about your firebase web app project.
Add firebase package to your project use: yarn add firebase (npm i firebase if you use npm).

Add file firebase-messaging-sw.js to the static folder.

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

	firebase.initializeApp({
	apiKey: '',
	projectId: '',
	messagingSenderId: '',
	appId: ''
	});

	const messaging = firebase.messaging();

view raw firebase-messaging-sw.js hosted with ❤ by GitHub

Add file firebase.js to the plugins folder.

	import * as firebase from 'firebase/app';
	import 'firebase/messaging';

	if (!firebase.apps.length) {
	firebase.initializeApp({
	apiKey: '',
	projectId: '',
	messagingSenderId: '',
	appId: ''
	});
	}

	export default firebase;

view raw firebase.js hosted with ❤ by GitHub

After config firebase cloud messaging for your NuxtJS project. You need to register it in your project and request permission to push notification and send this token for server. In my project, I put it to pages/index.vue like that.

	<template></template>

	<script>
	import firebase from '../plugins/firebase';
	export defautl {
	created() {
	const messaging = firebase.messaging();
	messaging
	.requestPermission()
	.then(() => {
	console.log('Notification permission granted.');
	return messaging.getToken();
	})
	.then((token) => {
	// You update this token for server by call api
	console.log('The token is: ', token);
	})
	.catch(function (err) {
	console.log('Unable to get permission to notify.', err);
	});
	}
	}
	</script>

view raw index.vue hosted with ❤ by GitHub

Then request permission success, you can receive data from the server through 2 ways.

When project running on an active tab (chrome/safari/firefox...) you use method messaging.onMessage() of firebase/messaging to handle data received. You can update your pages/index.vue like that.

	<template></template>

	<script>
	import firebase from '../plugins/firebase';
	export defautl {
	created() {
	const messaging = firebase.messaging();
	messaging
	.requestPermission()
	.then(() => {
	console.log('Notification permission granted.');
	return messaging.getToken();
	})
	.then((token) => {
	// You update this token for server by call api
	console.log('The token is: ', token);
	})
	.catch(function (err) {
	console.log('Unable to get permission to notify.', err);
	});

	messaging.onMessage(function (payload) {
	console.log('Message received. ', payload);
	});
	}
	}
	</script>