Обмен сообщениями Firebase Cloud и Angular Dart

Firebase Cloud Messaging - это сложный инструмент, который позволяет отправлять уведомления пользователям с помощью нескольких строк кода. Для Flutter уже был разработан плагин. Сегодня я прихожу к вам с плагином, который я разработал для Angular Dart!

Как я могу добавить FCM в свое веб-приложение?

На самом деле это не очень сложно, вам просто нужно выполнить следующие несколько шагов!

Сначала зарегистрируйте свое веб-приложение на firebase, если вы еще этого не сделали (вот, как это сделать, просто следуйте всем инструкциям до третьего шага (включенного). Затем следуйте инструкциям, пока не появится Настройте ваш браузер для получения сообщений (включительно), описанный на этой странице.

Ваш файл index.html теперь должен выглядеть так:

<!DOCTYPE html>
<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"
        };
        firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body>
...
</body>
</html>

Затем напишите в файле web / firebase-messaging-sw.js (который вам, вероятно, понадобится создать)

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': '233626740400'
});

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

Это позволит вашему приложению получать уведомления, когда оно закрыто!

Затем, наконец, добавьте плагин firebase_cloud_messaging_interop в свой файл pubspec.yaml:

dependencies:
  firebase_cloud_messaging_interop: ^1.1.1

Теперь вы можете использовать плагин взаимодействия FCM! Вот пример того, как это можно использовать:

import 'package:firebase_cloud_messaging_interop/firebase_cloud_messaging_interop.dart';
import 'dart:html';


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);

}

Вот и все: D

Github: https://github.com/GaspardMerten/Firebase-Cloud-Messaging-Interop