インストールしたアプリから受け取る通知について考えたことはありますか?または、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 件の無料メール送信、無制限のモバイル プッシュ送信、Journeys ワークフロー、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: android\app\build.gradle 内にこのコード スニペットを追加します

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

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

アプリケーションタグの直前。ただし、デフォルトで有効になっている可能性があるため、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

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