Fcm Web Push Notification Tutorial

Android Push Notification Using Firebase Cloud Messaging (FCM) The

What is FCM Web Push Notification?

FCM (Firebase Cloud Messaging) Web Push Notification is a service offered by Google that allows website owners to send push notifications to their users. These notifications can be delivered even when the user is not on the website, making it a great way to keep users engaged and informed.

How does it work?

When a user subscribes to push notifications, their device is registered with FCM. When the website owner wants to send a notification, FCM sends the notification to the registered device. The device then displays the notification to the user.

Setting up FCM Web Push Notification

Step 1: Create a Firebase Project

To use FCM Web Push Notification, you need to create a Firebase project. Go to the Firebase console and create a new project.

Step 2: Set up Web Push

In the Firebase console, go to the project settings and click on the “Cloud Messaging” tab. Scroll down to the “Web configuration” section and click on “Generate key pair”. This will generate a public key and a private key that you will need later.

Step 3: Add the Service Worker

In order to use FCM Web Push Notification, you need to add a service worker to your website. This service worker is responsible for receiving push notifications and displaying them to the user. You can use a pre-built service worker or create your own.

Step 4: Subscribe to Push Notifications

In order for users to receive push notifications from your website, they need to subscribe to them. You can use the following code to subscribe users to push notifications: “` navigator.serviceWorker.register(‘service-worker.js’) .then(function(registration) { return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(‘YOUR_PUBLIC_KEY’) }); }) .then(function(subscription) { console.log(‘User subscribed:’, subscription); }) .catch(function(error) { console.log(‘Subscription failed:’, error); }); “`

Sending Push Notifications

Once users have subscribed to push notifications, you can send notifications to them using the following code: “` fetch(‘https://fcm.googleapis.com/fcm/send’, { method: ‘POST’, headers: { ‘Authorization’: ‘key=YOUR_SERVER_KEY’, ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ ‘notification’: { ‘title’: ‘New Notification’, ‘body’: ‘This is a new notification!’ }, ‘to’: SUBSCRIPTION_ENDPOINT }) }); “`

Conclusion

FCM Web Push Notification is a great way to keep users engaged and informed about your website. By following the steps outlined in this tutorial, you can easily set up and send push notifications to your users.