Firebase Messaging Plugin for Flutter (web)/Angular dart

A dart plugin to use the Firebase Cloud Messaging API. Only works for Flutter web and Angular dart.

For Android/iOS consider using this plugin. (Note that both plugins can coexist!).

To learn more about Firebase Cloud Messaging, please visit the Firebase website

pub package

Getting Started

To get started with Firebase Cloud Messaging for Flutter Web/Angular Dart, please follow these steps:

Step 1

Add the gcm_sender_id to the manifest.json (your_project/web/manifest.json)

{
  ...
  "gcm_sender_id": "SENDER_ID",
  ...
}

Make sure that you find this line inside the head tag of the index.html file (your_project/web/index.html)

<link rel="manifest" href="/manifest.json">

Step 2

Add the firebase-app and firebase-messaging js libraries to your project (inside the head tag)

    <!-- Make sure that 8.1.1 is still supported (latest check 11/22/2020) -->
    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-messaging.js"></script>

Then init the default firebase app (just below the previous lines).

If you want to defer the initialization of the firebase app, please refer to the previously mentioned link.

    <script>
        let firebaseConfig = {
            apiKey: "your-api-key",
            authDomain: "PROJECT_NAME.firebaseapp.com",
            databaseURL: "https://PROJECT_NAME.firebaseio.com", 
            projectId: "PROJECT_NAME",
            storageBucket: "PROJECT_NAME.appspot.com",
            messagingSenderId: "MESSAGING_SENDER_ID",
            appId: "APP_ID"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig); 
    </script>

Step 3

This last step will allow your browser to receive a notification while your app is running in the background/closed.

Start by creating a file named 'firebase-messaging-sw.js' (your_project/web/firebase-messaging-sw.js).

Then insert the following lines.

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

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
   apiKey: "your-api-key",
   authDomain: "PROJECT_NAME.firebaseapp.com",
   databaseURL: "https://PROJECT_NAME.firebaseio.com", 
   projectId: "PROJECT_NAME",
   storageBucket: "PROJECT_NAME.appspot.com",
   messagingSenderId: "MESSAGING_SENDER_ID",
   appId: "APP_ID"
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

Usage

This plugin provides you with the following class and methods:

  • FirebaseMessagingWeb (the interface between you and the interop, way more coder friendly).
/// Direct init
final FirebaseMessagingWeb fcm = FirebaseMessagingWeb(publicVapidKey: "yourPublicVapidKey"); 

/// Deferred init
final FirebaseMessagingWeb fcm = FirebaseMessagingWeb();

// Do some stuff

fcm.init("yourPublicVapidKey")
  • FirebaseMessagingWeb.requestNotificationPermissions
final bool didGivePermissions = await fcm.requestNotificationPermissions();

if (didGivePermissions) {
 // Retrieve token
}
  • FirebaseMessagingWeb.getToken
final String token = await fcm.getToken();

// post token to your server
  • FirebaseMessagingWeb.onTokenRefresh
fcm.onTokenRefresh(() {
  // get new token
});
  • FirebaseMessagingWeb.onMessage
fcm.onMessage((Map messagePayload) {
  // do something with message data
});

Important note: You can't directly subscribe to a topic with this plugin. You will need to make a call to Firebase from your server with the user token to do so.

License

Apache License 2.0 (link)

Issues & Feedback

Please send feature requests, bugs and feedback to my mail address!

Libraries

firebase_cloud_messaging_interop