Flutter web push notification with firebase cloud messaging (FCM)

A push notification is a message that pops up on a mobile, web and desktop devices. App publishers can send them at any time; users don’t have to be in the app or using their devices to receive them.

Push notification

Hello guys, This is CodingWithTashi and in this shitty post, we will learn how to handle push notification in your web application.

[Story]

• I was never planning on writing this blog. But implementing push notifications is quite complicated on the web if you are just coming from the mobile background.
• I have spent a couple of days for notifications to work on all devices i.e., iOS, android, and web.
• We will see how to implement flutter notification in your web application.
• You can check out firebase cloud messaging and flutterfire cloud messaging for more information.

At the end of this post, you will be able to see this output:

1. Notification when the browser is in the foreground

firebase foreground push notification web

2. Notification when your browser is in the background

firebase background push notification web

Medium Referral Program: If you like the experience here on medium, consider supporting me and thousands of other writers by signing up for a membership. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times!

Let's get started:

1. Create a Flutter web support project (I am assuming you have done it already).
2. Create a firebase web project from the firebase console.
3. Update index.html
4. Add dependency
5. Update main.dart

1. I am skipping the first step as you have already done

2. Create a firebase web project

• You can create a firebase project from https://console.firebase.google.com/
• Once the firebase web project is created you will get all the detail required for push notification. We need firebaseConfig and Server key
• You will get firebaseConfig from Project Setting->General
• You will get the server key from Project Setting->Cloud Messaging

3. Update index.html

Now in index.html of the web folder in your flutter project, update your code as below.

As you can see we have added a script file for firebase core and firebase Message and firebase config too.

Also, We added the service worker file name firebase-messaging-sw.js, It is a file that does the background job for us.

Now create firebase-messaging-sw.js file in the web folder same path as index.html and update firebase-messaging-sw.js as below.

Alright, Now from a web point of view, it is done now.

4. Add dependency

Now add a few dependencies in pubspec.yaml file to add firebase core, firebase messaging and http to test.

4. Update the main.dart as follows

That's all, If you run the app. You should be able to test your app and get notifications in the foreground.

Note: To test background notification. You will need a postman or some rest-client app.

e.g. with the postman

• Make a post request and add URL as https://fcm.googleapis.com/fcm/send

• update content type and authorization. get the key from log in to your app and make sure to add ‘key=’ before the key
• Update body as below

{
    "to":"",
    "message:":{
   "token":""
    },
    "notification":{
        "title":"Pushnotification",
        "body":"Firebase push notification"
    }

}

Now click send and you will get your notification.

That's all for today,, I hope you like this shitty blog. please make sure to give a clap 👏 and leave some engagement. let me know in the comment section if you face any issues.

Check out more blogs from CodingWithTashi. Follow me on Twitter or Instagram or YouTube.

CodingWithTashi - Medium