React Native (Android) でプッシュ通知を実装する方法

インストールしたアプリから受け取る通知について考えたことはありますか?または、Swiggy や Zomato は、クリエイティブな通知でどのように私たちに午前 3 時に食べ物を注文するよう促しているのでしょうか? ?

通知の概念を詳しく見てみましょう!

通知とは何ですか?

通知は、更新、イベント、またはアクションについてユーザーに通知するためにアプリによって送信されるメッセージまたはアラートであり、通常はアプリのインターフェースの外部で配信されます。

次に示すように 2 種類の通知が可能になりました -

プッシュ通知

プッシュ通知は、アプリがフォアグラウンドでアクティブに実行されていないときにサーバーからアプリに送信されるメッセージまたはアラートです。これらは主に、更新、リマインダー、またはパーソナライズされたコンテンツを送信することでユーザーの関心を維持するために使用されます。プッシュ通知は、iOS の Apple Push Notification Service (APN) や Android の Firebase Cloud Messaging (FCM) などのオペレーティング システム サービスを通じて配信されます。

プッシュ通知の仕組み:

1. 登録: アプリがインストールされるか、初めて開かれるとき、アプリは OS のプッシュ通知サービス (APN または FCM) から一意のデバイス トークンを要求します。
2. サーバー通信: アプリはこのトークンをアプリのバックエンド サーバーに送信し、将来の使用に備えて保存します。
3. 通知の送信: サーバーは、デバイス トークンを使用して通知ペイロード (タイトル、メッセージ、アクション ボタンなどを含む) をプッシュ通知サービス (APN/FCM) に送信します。
4. 配信: アプリが実行されていない場合でも、プッシュ通知サービスはメッセージをそれぞれのデバイスに配信します。

アプリ内通知

アプリ内通知は、ユーザーがアプリをアクティブに使用しているときにユーザーに表示されるメッセージまたはアラートです。プッシュ通知とは異なり、これらはサーバーの介入を必要とせず、通常はユーザーのアクションまたはアプリのイベントの結果としてアプリ自体内でトリガーされます。

アプリ内通知の仕組み:

1. イベントトリガー: アプリ内で特定のイベントが発生すると (ユーザーがマイルストーンに到達したり、注意が必要な機能など)、アプリはアプリ内通知をトリガーできます。
2. 表示: 通知はアプリの UI 内のバナー、モーダル、またはポップアップとして表示され、ユーザーをガイドしたり、イベントについて通知したりします。
3. カスタム ロジック: アプリ内通知はアプリのコードによって直接処理され、アプリの内部状態またはロジックに基づいて動的に表示できます。

---

React Native Android アプリでの実装:

通知とそのタイプについて理解したので、今度は独自の React Native アプリにこの機能を実装します。このガイドは、React ネイティブ Android アプリでのみプッシュ通知を実装するためのものです。iOS またはアプリ内通知が必要な場合は、コメントを書き留めてください。必ず投稿します!

まず、OneSignal と呼ばれるサードパーティ サービスを使用します。最近このプラットフォームに出会い、提供されるサービスに衝撃を受けました。

ワンシグナルについて:

OneSignal は、アプリ開発者がモバイル アプリ、Web サイト、電子メールなどのさまざまなプラットフォームでユーザーにターゲットを絞った通知を送信できるようにするプッシュ通知サービスです。プッシュ通知、アプリ内通知、Web 通知をサポートし、セグメンテーション、自動化、A/B テスト、リアルタイム分析などの機能を提供します。 OneSignal は、パーソナライズされたメッセージを送信するための統合が簡単なソリューションを提供することで、ユーザー エンゲージメントと維持率を向上させるために広く使用されています。無料枠は、月額 10,000 回の無料メール送信、無制限のモバイル プッシュ送信、ジャーニー ワークフロー、GDPR 準拠、A/B テストで構成されています

---

ガイドに戻りますが、プッシュ通知には FCM (Firebase Cloud Messaging) を介したサーバー側の処理が必要であることがすでにわかっているため、従うべき手順がいくつかあります。

1. Firebase プロジェクトを設定します (すでに Firebase プロジェクトがある場合は、最初の 2 つの手順を無視してください):

   • Firebase コンソールに移動し、アカウントにログインします。
   • ここからプロジェクトを作成し、手順に従います
   • プロジェクトが作成されたら、サイドバーからプロジェクト設定に移動します
   • バーからサービス アカウントに移動すると、次のようになります。
   • 新しい秘密キーを生成 をクリックすると、json ファイルがダウンロードされ、安全な場所に慎重に保存されます。OneSignal のセットアップ中にこれが必要になります。

2. OneSignal をセットアップする

   • OneSignal に移動し、アカウントを作成します。
   • アカウントを作成した後、セットアップ手順を実行して組織を作成すると、アプリを追加するためのページが表示されます。
   • このページではアプリ名を入力し、この場合は Google Android (FCM) を選択します。 プラットフォームの構成 をクリックします。
   • このページにリダイレクトされ、そこで Firebase の設定中にダウンロードされたサービス アカウントの JSON ファイルが使用されます。 json をアップロードし、保存して続行
   • 次のページでターゲット SDK として React Native/Expo を選択し、再度 保存して続行
   • 次の画面では、アプリ ID を取得します。これは機密 ID であり、この ID を使用すると誰でもアプリ内で通知をトリガーできるため、このシークレットには注意してください。

Firebase と OneSignal でのセットアップは完了しました。残っている唯一のタスクは コード付きコーヒー

です。

OneSignal をアプリに追加して構成する

• ステップ 1: 最初にこのコマンドを実行して、OneSignal をアプリに追加します

                       npm i react-native-onesignal

• ステップ 2: プロジェクトのルートであるindex.js、App.tsx、App.jsのいずれかで、OneSignalをインポートします。

             import { OneSignal } from 'react-native-onesignal';

このコード スニペットを追加して OneSignal を初期化します

                    OneSignal.initialize('YOUR_APP_ID');

これを useEffect フック内にラップすると、OneSignal とのシームレスな統合と接続が可能になります。

これにより、OneSignal 用の一意の ID を使用してデバイスが初期化され、サイドバーのサブスクリプションで確認できます。初期化されるすべてのデバイスは、この一意の OneSignal ID で識別されます。また、既に独自の一意の ID を持つユーザーがいる場合でも、次のコード スニペットを使用して手動で設定できます:

                         OneSignal.login(userId)

ユーザーが正常に購読されると、ダッシュボードに次のように表示されます

OneSignal が適切に使用されていないという問題や、重大なエラーが発生する可能性があります。そのため、これらの問題を解決するのに役立つ部分を以下に示します。

• ステップ 3: androidappbuild.gradle 内にこのコード スニペットを追加します

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• ステップ 4: Android でプッシュ通知に必要な権限を提供するために、androidappsrcmainAndroidManifest.xml に追加します

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

アプリケーションタグの直前。ただし、デフォルトで有効になっている可能性があるため、INTERNET 権限はオプションです。

ブーム？プッシュ通知を実装するためのすべての手順がカバーされており、OneSignal ダッシュボード自体からテスト通知を送信できます。

自分で試してみて、疑問がある場合は以下にコメントしてください。さらに詳しいガイドについてはフォローしてください!

参考文献:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

コーディングをお楽しみください!?‍?

以上がReact Native (Android) でプッシュ通知を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。