Androidでプッシュ通知を加える方法

プッシュ通知を従事し、アプリケーションのユーザーを保持することができます.このチュートリアルでは、あなたのAndroidアプリで通知を押して活用するonesignalとの統合方法を示します.

Onesignal &ブラウザのプッシュAPI
ブラウザのプッシュAPIは、Webアプリケーションには、Webアプリケーションがフォアグラウンドにあるか、現在ユーザーエージェントにロードされているかどうかをサーバーからメッセージを受信する機能を提供します.これにより、非同期の通知と更新を提供するユーザーに更新することができます.
このチュートリアルでは、Androidアプリのセットアッププロセスを使用してアプリケーションにOnesignalプッシュ通知を統合する方法をカバーします.このガイドの一部はonesignalセットアッププロセスをカバーします.このガイドのパート2は、あなたのAndroidアプリのイオン+コンデンサ(反応)でonesignalwithの統合をカバーします.

ガイド概要

Part 1: Set Up Your OneSignal Account

Part 2: Push Notification Setup For Android In Ionic + Capacitor (React)

このチュートリアルでは、反応の基礎知識が必要です.私は、使用しているIonic CLI プロジェクトとnodejsのバージョン14.16を生成します.

リポジトリ資源
Ionic + Capacitor (React) OneSignal Setup

第1部:onesignalアカウントの設定
始めましょう.log in あなたのonesignalアカウントまたはcreate a free account . 次に、青色のボタンをクリックしてあなたのアプリやウェブサイトに合わせてonesignalアカウントを構成するために新しいアプリ\/ウェブサイトをクリックしてください.

あなたのアプリやウェブサイトの名前を挿入します.あなたのプラットフォームとして選択してください.

次の青いボタンをクリックします.

FCMの設定
FireBaseサーバーキーを使用してAndroidアプリを設定する時間です.あなたがプッシュ通知を送信する場合は、すべてのAndroidアプリは、このキーとサーバーのIDが必要です.あなたがFireBaseサーバーキーを持っていないならば、学ぶために我々のドキュメンテーションを見てくださいhow to generate a Firebase server API key .

今すぐあなたのターゲットSDKを選択します.私たちはあなたの最初のユーザーを取得し、最初のテスト通知を送信する手順を取るよ.

表示される次の画面では、あなたのアプリケーションのIDが表示されます-あなたのイオンアプリケーションの内部でそれを使用するため、アプリケーションのIDをコピーします.クリックしないでください.


パート2:プッシュ通知セットアップAndroid用
今すぐあなたのAndroidアプリにプッシュ通知を追加するために必要な項目を収集した、次のステップは、それが通知を受け取ることができるようにあなたのイオンのアプリOne信号を認識することです.

あなたのイオン+コンデンサを作成する
端末内で、次のコマンドを実行して、コマンドライン内のイオンを使用するために、イオンプロジェクトをグローバルに追加します.

npm install -g @ionic/cli

次に、次のコマンドを実行して、新しいイオン+キャパシタIonic CLI . フレームワークを選択するように求められますReact .

ionic start

プロジェクト名を入力するよう求められたら、必要な名前を入力できます.私の場合、私はプロジェクトを指名しました​​ OneSignal-Ionic .

また、テンプレートを選択するように求められます.好きなテンプレートを選択してください.以下の例ではtabs テンプレートとして.


イオンアプリケーションへのonesignalの追加
このプロセスをガイドするために、私はonesignal SDKを統合する方法を示す簡単なイオン反応Androidアプリを使用しています.それは、Cordova NPMパッケージで動いていますonesignal-cordova-plugin リリース
まず、目的のプラットフォームをプロジェクトに追加します.私のアプリでは、私の希望するプラットフォームとしてAndroidを実行して選びました.ionic capacitor add android . 次に、実行してプロジェクト内のonesignal cordovaプラグインをインストールしますnpm install onesignal-cordova-plugin . The ionic capacitor build android コマンドはAndroidのスタジオでAndroidのビルドを開きます.
新しいAndroidアプリにイオンのアプリケーションを構築した後cap sync 入ることによってnpx cap sync .
あなたの上にApp.tsx ファイルをインポートOneSignal NPMパッケージをコンポーネントにします.

import OneSignal from 'onesignal-cordova-plugin';

次の初期化コードをApp.tsx ファイル.Google AndroidのFCMの設定中に以前にコピーしたアプリIDを追加してください.

// Call this function when your app starts
function OneSignalInit(): void {
  // NOTE: Update the setAppId value below with your OneSignal AppId.
  OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID");
  OneSignal.setNotificationOpenedHandler(function(jsonData) {
      console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
  });
}

作成後OneSignalInit() 関数は、あなたのアプリケーションが起動するときにそれを呼び出すつもりです.にApp.tsx ファイルを次の行に追加します.

OneSignalInit();

最後に、再度実行してアプリケーションを構築するionic capacitor build android Android Studioプロジェクトを開きます.
私は、通知をテストするために実際のAndroidデバイス上でアプリケーションを実行することをお勧めします.そうするには、あなたのAndroidデバイスを接続し、有効にする必要がありますdeveloper mode .
一度デバイスに接続して、開発者モードを有効にすると、ターゲットデバイスとしてデバイスを選択してデバイス上でアプリケーションを実行します.私の例では、私はGoogleのピクセル5上のアプリを実行している.

したら、デバイス上のアプリケーションを開いている、デバイスが自動的に通知を購読されます.今、あなたのデバイスの通知を送信することができますonesignalによって送信されます.
セットアッププロセスを完了するには、あなたのonesignalダッシュボードにあなたが以前に去ったポイントに戻る.をクリックすると、下記のイメージのいずれかのように緑色のメッセージが表示されます.

ボタンをクリックします.

プッシュ通知を送信する
それはあなたの最初のWebプッシュ通知を送信する時間です!これを行うには、あなたのonesignalアカウントにログインしてください.ダッシュボードのページでは、ボタンをクリックします.
注:通知は、デフォルトでAndroidデバイスで有効になっていますが、携帯電話の設定を介してユーザーが無効にすることができます.手動で通知を無効にした場合は、確認してくださいenable notifications again 彼らがどのように働くかテストするために.

あなたのプッシュ通知をカスタマイズできるようになります新しいウィンドウにリダイレクトされます.当面のユーザは、ユーザが送信したユーザーに対して送信してください.次に、メッセージのタイトル、コンテンツ、および画像を追加することによってあなたのメッセージを作成します.これがあなたの購読者が受け取る最初の通知であるので、あなたは彼らが購読されて、通知が提供する価値を強化するのを確かめるために単純な歓迎メッセージを巧みに作ることを選ぶかもしれません.
支給配送スケジュールのセクションの下では、すぐにあなたのすべての現在のプッシュ購読者に送信するために、当たり前に電話してください.あなただけのonesignalアカウントを設定して完了したら、チャンスは、最初と唯一の加入者です.あなたのアプリやウェブサイトが大量に取引され、他のユーザーが既にプッシュ通知を受信するように選択している場合は、特定のセグメントにあなたのメッセージをテストするために特定のセグメントに送信を選択することがあります.あなたのメッセージを送信する準備ができたら、青色のレビューをクリックして、画面の下部にあるボタンを押してください.

小さなポップアップメッセージを確認するために表示されます.一度ブルーボタンをクリックして満足しているメッセージを送信ボタンをクリックします.あなたのデバイス上のWebプッシュ通知を受け取る必要があります!🚀

今、あなたはあなたのイオンのアプリの向こう側にonesignalOneSignal さまざまなコンポーネントに変数.イオンSDKの詳細については、イオンプッシュをご覧くださいSDK documentation .