firebase_cloud_messaging_interop 2.0.1
firebase_cloud_messaging_interop: ^2.0.1

Dart js
Flutter web

A dart plugin to use the Firebase Cloud Messaging Api (JS). You can retrieve the user's FCM token, delete it, access the notification data, ...

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!

6
likes
90
pub points
64%
popularity

Publisher

gaspardmerten.dev

A dart plugin to use the Firebase Cloud Messaging Api (JS). You can retrieve the user's FCM token, delete it, access the notification data, ...

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

js

More

Packages that depend on firebase_cloud_messaging_interop