web-dev-qa-db-ja.com

Flutter Webプッシュ通知の実装方法

Flutter Webにプッシュ通知を実装できるかどうか疑問に思っていますか？ firbase_messagingを使用してモバイルアプリのプッシュ通知を作成できることを確認しましたが、Webアプリで使用できますか？それを達成するための他の代替手段はありますか？

flutterflutter-web
3
Sepehr Marashi

あなたは既にフラッターWebプロジェクトをセットアップしていて、Firebaseプロジェクトを持っていると考えています。

Flutterプロジェクトフォルダーで、index.htmlを開き、これらのスクリプトをヘッドセクションに配置します。

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

次に、本文にmain.Dart.jsスクリプトがロードされる前にコードを追加します。

  <script src="./firebase-messaging-sw.js"></script>
  <script src="myjs.js"></script>
  <script src="main.Dart.js" type="application/javascript"></script>

（myjs.jsはコードを記述したい任意のファイルですが、firebase-messaging-sw.jsがそこになければなりません。）

次に、index.htmlディレクトリに2つのファイルを作成します。

  1. firebase-messaging-sw.js
  2. myjs.js（選択した名前）

Firebase-messaging-sw.jsで、次のように記述します

console.log("")

Myjs.js（ここでも、選択した任意のファイル名）で、次のコードを記述します。

var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "~~~~~~",
    databaseURL: "~~~~~",
    projectId: "~~~~~~",
    storageBucket: "~~~~~~",
    messagingSenderId: "~~~~~~",
    appId: "~~~~~~~~~~~~~",
    measurementId: "~~~~~~~~~~~"
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();

var messaging = firebase.messaging()

messaging.usePublicVapidKey('Your Key');

messaging.getToken().then((currentToken) => {
    console.log(currentToken)
})

これらの認証情報は、firebase consoleのプロジェクト設定から確認できます。追加したWebアプリにfirebaseConfigの詳細が表示されます。キーについては、新しいペアを生成する必要があります。プロジェクト設定でクラウドメッセージングに移動すると、新しいペアを生成できます。

アプリを実行すると（flutter run -d chrome）、コンソールログでトークンを確認できます。そのトークンをコピーします。

サイドドロワーのクラウドメッセージングセクションから、新しい通知を作成できます。タイトルとテキストに好きなように入力します。 [テストメッセージを送信]をクリックします。コンソールからコピーしたトークンを貼り付けて、[テスト]をクリックします。

Screenshot of the notification

ポップアップ通知が表示されます。

詳しくは この記事 および firebase documentation を参照してください。

1
Shobhit Maheshwari