how-to-send-push-notifications-on-flutter-web-fcm

Flutter Web でプッシュ通知を送信する方法（FCM）

Firebase を使用している場合は、Firebase Cloud Messaging に馴染みがあるでしょう。Flutter Web でのセットアップは、モバイルや、使い慣れている他のプラグインとは大きく異なります。

セットアップ

web/index.html を開き、次のスクリプトを探します。見つからない場合は、今すぐタグ内に追加できます。

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker.register("/flutter_service_worker.js");
  });
}
</script>

FCM のサービスワーカーをサポートするように変更する必要があります。重要なのは、FCM サービスワーカーの登録時に 404 エラーが発生しないよう、flutter_service_worker.js をコメントアウトすることです。

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    // navigator.serviceWorker.register("/flutter_service_worker.js");
    navigator.serviceWorker.register("/firebase-messaging-sw.js");
  });
}
</script>

次に、web フォルダーに firebase-messaging-sw.js という新しいファイルを作成し、次の内容を記述します。

importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js");
firebase.initializeApp({
    apiKey: "API_KEY",
    authDomain: "AUTH_DOMAIN",
    databaseURL: "DATABASE_URL",
    projectId: "PROJECT_ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "MESSAGING_SENDER_ID",
    appId: "APP_ID",
    measurementId: "MEASUREMENT_ID"
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
    console.log('notification received: ', event)
});

設定キーを Firebase のキーに置き換えてください。

ヘルパーメソッド

好きな場所に firebase_messaging.dart という新しい Dart ファイルを作成し、次の内容を記述します。

import 'dart:async';
import 'package:firebase/firebase.dart' as firebase;

class FBMessaging {
  FBMessaging._();
  static FBMessaging _instance = FBMessaging._();
  static FBMessaging get instance => _instance;
  firebase.Messaging _mc;
  String _token;

  final _controller = StreamController<Map<String, dynamic>>.broadcast();
  Stream<Map<String, dynamic>> get stream => _controller.stream;

  void close() {
    _controller?.close();
  }

  Future<void> init() async {
    _mc = firebase.messaging();
    _mc.usePublicVapidKey('FCM_SERVER_KEY');
    _mc.onMessage.listen((event) {
      _controller.add(event?.data);
    });
  }

  Future requestPermission() {
    return _mc.requestPermission();
  }

  Future<String> getToken([bool force = false]) async {
    if (force || _token == null) {
      await requestPermission();
      _token = await _mc.getToken();
    }
    return _token;
  }
}

権限のリクエストに使用するボタンをアプリに作成します。アプリの起動時に権限をリクエストすることもできますが、ユーザーが承認する可能性は低く、まだ信頼関係も築けていないため、通常はよい方法ではありません。次のように権限をリクエストできます。

final _messaging = FBMessaging.instance;
_messaging.requestPermission().then((_) async {
  final _token = await _messaging.getToken();
  print('Token: $_token');
});

次のようにしてメッセージをリッスンできます。

final _messaging = FBMessaging.instance;
_messaging.stream.listen((event) {
  print('New Message: ${event}');
});

テスト

アプリケーションを実行して権限をリクエストすると、トークンが返されます。このトークンを使って Firebase コンソールを開き、トークン宛てにテストメッセージを送信できます。

まとめ

これで Flutter アプリにプッシュ通知を送信できるようになります。モバイル側をサポートするには、引き続き条件付きインポートを使用する必要がありますが、その方法についてはサンプルをお待ちください。ご質問やフィードバックがあればお知らせください。