#FirebaseCloudMessaging
Explore tagged Tumblr posts
memeticsolutions01 · 8 months ago
Text
Seamless Integration: Connecting Your React App to Firebase Notifications
Tumblr media
In today’s fast-paced digital world, push notifications are one of the most effective ways to keep your users engaged and informed. Firebase Cloud Messaging (FCM) is a powerful tool that allows you to integrate push notifications seamlessly into your web applications. In this blog, we’ll guide you step-by-step through the process of connecting your React application to Firebase Notifications, making it easy to send and receive real-time updates.
Why Use Firebase for Notifications?
Cross-platform Support: Send notifications to Android, iOS, and Web users from a single platform.
Scalability & Reliability: No need to manage infrastructure; Firebase ensures smooth performance even as your user base grows.
Easy Integration: The Firebase SDK makes it simple to integrate notifications with your React app.
Step-by-Step Guide to Implement Firebase Notifications in React:-
Step 1: Set Up a Firebase Project
Before you start integrating Firebase into your React app, you need to create a project in Firebase.
Create a Firebase Project: Head to the Firebase Console. Click on “Add Project” and follow the steps to set up your Firebase project.
Add Firebase to Your Web App: In your project dashboard, click on the web icon () to add Firebase.
Copy the Firebase SDK snippet and firebaseConfig object for your app.
Generate VAPID Key: In your project settings, under Cloud Messaging, generate a VAPID key. This key is essential for enabling push notifications in web apps.
Step 2: Install Firebase SDK in React
To use Firebase services in your React application, you’ll need to install the Firebase SDK.
Step 3: Set Up Firebase in Your React Application
Create a firebaseConfig.js file in your project.
Paste the Firebase configuration you copied from the Firebase Console.
Step 4: Request Notification Permission in React
To receive notifications, you need to ask the user for permission when the React app starts.
Step 5: Handle Incoming Messages
Once the user grants permission, handle incoming messages using Firebase’s onMessage() function
Step 6: Test Firebase Notifications
You can test notifications by sending a message from the Firebase Console:
Go to Cloud Messaging.
Click “Send Your First Message” and enter your notification details.
How Can Memetic Solutions Help?
At Memetic Solutions, we specialize in integrating cutting-edge technologies like Firebase to enhance your application’s performance and engagement. Our team ensures smooth integration with your React applications, making sure notifications work efficiently across all platforms. We focus on creating scalable, secure, and high-performance notification systems that grow with your business.
Ready to elevate your user engagement with Firebase Cloud Messaging? Let Memetic Solutions guide you every step of the way!
0 notes
awsexchage · 7 years ago
Photo
Tumblr media
ionic+FirebaseCloudMessaging(FCM)+iOSでつまづきまくったので各エラーの対策まとめ https://ift.tt/2N0DCaq
ionic+FCM+iOSでiOSアプリ上でプッシュ通知を実装するをやりました。 細かい手順はネット上にいっぱいあがってますし、基本的にはすごいお手軽です。 うまくいけば、、、
そう!うまくいかなかったときに原因がionicなのかFCMなのかiOSなのか全くわからず、 自分はFCMについても、iOSのAPNsについてもほぼ知識がなかったこともありつまづきまくりました。 そんなエラーと対処法の数々を愚痴をこぼす気持ちで残してます。
まずは簡単にionic+FCM+iOSの実装手順
1.iOSアプリのAPNs認証を通す 2.FCMのプロジェクト作成、iOSアプリの登録、APNsの登録 3.ionicプロジェクトへcordovaプラグイン、ionic-nativeプラグインを追加
やることをぎゅっとまとめるとこんな感じです。 ただiOS、FCM、ionicそれぞれにネット上に上がっている記事が古かったり、バージョンの互換で死んだりとまったくの初めてで取り掛かると迷うとこつまづくところが結構ありました。
つまづき1: iOSアプリでAPNsを使えるようにする編
iOSアプリでリモートを通知する際に必須となるAPNsですが、旧来の���法であるアプリごとにAPNs証明書を設定する方法の他にAPNs Auth Keyという方法があります。 参考URL) https://qiita.com/m-hosoi/items/f722c43750086d88afd9
キーを使った方法にはメリットも多く、FCMでもキーを使った方法が推奨されています。
APNs Auth Keyだとどうしてもメッセージがエラーになる😣
APNs Auth KeyをつかってFCMへの設定をすまし、アプリの登録もばっちり、 公式のドキュメント通りにアプリの実行ログから端末のトークンをコピーしてFirebaseコンソールのNotifications Composerからメッセージを送信!!
来ない、、、
何度設定に間違いがないか見直しても App ID Prefix、キー ID、APNs 認証キーの組み合わせが無効です。 とエラー文が出るだけで送信が出来ません。。
Tumblr media
対策🙌
結局これは原因はわからずじまいでした。。 Appleを恨めばいいのか、FCMを恨めばいいのか、己を恨むべきなのか、、 うやむやなままですが、対処としては旧来の方法であるアプリごとにAPNs証明書を設定する方法で実装しました。 こっちの方法は iOS FCM 実装 とかで古い記事とか探せばいっぱいあります。
Tumblr media
つまづき2 : FCMの動作確認でメッセージを送ってみる編
これでiOSアプリとFCMの設定は出来たことが確認できました。 ちなみにここまではionicではなくFCMが公式に公開しているiOSのサンプルアプリをもとに検証してます。 FCMのメッセージには不特定多数へのコンテンツ配信向きのトピック、特定の複数端末に送信する向きのグループ、ほかデバイスtoken指定の個別送信などいろいろあります。 いろいろ試してみよう!!ということでPostmanを開いた私、つまづきました。
FCMのHTTP v1 APIはPostmanでやるにはOAuth 2.0のトークン取得する必要がある😣
いろんな記事にてメッセージ送信のテストにPostmanを使った方法が紹介されてます。 ただし!この方法は古いAPIを使ったもの(公式の言葉を使うとHTTP レガシー プロトコルのほう)です。 現行のAPIであるv1は Authorization ヘッダにサーバキー埋め込んでちょちょいとAPI叩くって方法は出来ません。
v1にこの方法でなげてもレスポンスすら返してくれません。 いや、まあ気づくの遅れた自分が悪いんですが、 レスポンスくらい返してよ、、旧APIつかってるって書いてよ、、、って思ったり。。
さらに公式にはv1でOAuth 2.0通してトークン取得する方法は各言語のGoogleAPIライブラリ使う方法しか紹介されてなく、 この辺を見ると多分できそうですが、未検証です。 https://qiita.com/howdy39/items/cd01cbd3c1109e140fd0
対策🙌
気軽にPostmanでの検証は出来ないので、公式のおすすめどおりFirebaseコンソールのNotifications Composer使うのが楽ちんかと!
つまづき3 : ionicプラグインでハマりまくる編
iOSの設定、FCMの送信をいろいろ試してみて、さあ!!いよいよionicプロジェクトへFCMを組み込んでいきます。 今回はionicプロジェクトはすでにあり、そこにプラグインを追加していきます。
ionicのFCMプラグインめっちゃ種類ある。。。😣
ionicのFCM関連のプラグインは公式に掲載されているのは全部で3つあります。
FCM
Firebase
Firebase Messaging
FCMとFirebaseが昔からあるものっぽく、cordova pluginのスター数もだいたい同じくらいです。 Firebase Messagingはまだβ版でまだ新しいものでしたが、メソッドの呼び出しかたなど1番使いやすそうで最初こちらにしたのですが、Issueにもあるようにまだ不具合がわりとあるようで今回は断念しました。 FCMとFirebaseは違いがあまりわからなかったので今回はFCMを使うことにしました。
対策🙌
とりあえずFCM関連のプラグインはFCMかFirebaseが安定してるっぽい。
ionic-nativeプラグインで Uncaught TypeError: Object(...) is not a function とでる😣
ionic、cordovaでわりとあるあるな謎のエラー。 今回もなんかしら出ました。 今回の原因は @ionic-native/core と @ionic-native/fcm のバージョンが違うというもの! ionic-native開発でも出てきがちですが、基本的に @ionic-native/core とionic-nativeプラグインのバージョンはあわせたほうが良いです。 npm install 時にバージョンを固定で指定してcoreのバージョンと合わせることで無事解決しました。
対策🙌
@ionic-native/coreとionic-nativeプラグインはバージョンを合わせる!
cordova-plugin-fcmプラグインでGoogleService-Info.plistがあるのに、ないと怒られる😣
iOSアプリとFCMをつなげるためにiOSアプリにはGoogleService-Info.plistというファイルを埋め込む必要があります。 cordova-plugin-fcmプラグインはプロジェクトルートにGoogleService-Info.plistを置いておけばiOSビルド時に複製して配置してくれると記述があるのですが、これは不具合なのかうまく動いてくれずアプリ起動時にGoogleService-Info.plistの読み込みエラーでアプリが落ちます。 (実際に使っているのは依存関係を更新したcordova-plugin-fcm-with-dependecy-updatedです。)
対策🙌
手動でionicプロジェクトルートにGoogleService-Info.plistファイルを設置し、config.xmlの <platform name="ios> 内にresouce-file“として書いておけばちゃんとビルド時に複製してくれます。
<platform name="ios"> .... <resource-file src="GoogleService-Info.plist" target="Resources/GoogleService-Info.plist" /> .... </platform>
以上、複数のプロダクトの上に実現するサービスはある程度それぞれ理解しつつ一つ一つ検証していったほうが早いなあ、と気付かされた1件でした。まとまりのない記事ですが、誰かの役にたてば嬉しいです。
ちょっと一言: FCM感想
今までプッシュ通知は避けて通ってきましたが、FCMは送信にいろいろ選択肢もあり、採用候補としてはかなり有力だなと思いました。 またFCMを含んだFirebaseはホスティングや、認証、データベースなどサーバーレスなモバイルバックエンドとして完結出来るのではって思ってます。この辺もまた試してみようと思います〜
元記事はこちら
「ionic+FirebaseCloudMessaging(FCM)+iOSでつまづきまくったので各エラーの対策まとめ」
August 29, 2018 at 12:00PM
0 notes