firebase_cloud_messaging_interop 1.1.2

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, ...

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, ...

Setup #

For more information on how to setup FCM on the web: https://firebase.google.com/docs/cloud-messaging/js/client

Add this key to the manifest.json

{
  "gcm_sender_id": "SENDER_ID",
}

and don't forger to add this inside your head tag (eg: index.html)

<link rel="manifest" href="/manifest.json">
  • You need to add firebase-app and firebase-messaging to your web app.
<html>
<head>
...
    <link rel="manifest" href="/manifest.json">

    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js"></script>

    <script>
        var 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>
    </head>
  • You need to create a file named 'firebase-messaging-sw.js' (Just create an empty file if you do not want to receive notification when your web app is closed)
importScripts('https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js');

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
    'messagingSenderId': 'SENDER_ID'
});

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

Usage #

A simple usage example:

class FCMService {
  FCM fcm;

  String currentToken;

  FCMService() {
    fcm = FCM(publicVapidKey: "YourPublicVapidKey");

    fcm.onMessage((e) {
      /// You can access title, body and tag
    });

    fcm.onTokenRefresh(requestPermissionAndGetToken);
  }

  void requestPermissionAndGetToken() {

    Notification.requestPermission().then((permission) {
      if (permission == 'granted') {
        fcm.getToken().then((e) {
          currentToken = e;
          /// SEND TOKEN TO THE BACKEND SERVER
        });
      }
      else {
        /// The user doesn't want notification :(
      }
    });
  }

  void deleteCurrentToken() => fcm.deleteToken(currentToken);

}

License #

Apache License 2.0 (link)

Features and bugs #

Please send feature requests and bugs to my mail address !

2
likes
90
pub points
54%
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