今回はReact、ContentfulとOneSignalでPush通知を実装していきたいと思います。Next.jsを使用している方もこの記事の手順に従うことでできます。

※ 残念ながら、iOSのデバイスでは機能しませんが、iOS以外のデバイスは機能します。

前提条件

ReactやNext ウエブアプリ
Contentfulアカウント
少なくとも1つのContentfulコンテンツモデル

OneSignalの設定

OneSignalのホームページで無料アカウントを作りましょう。アカウントを作った後、アカウントのホームで「New App/Website」のボタンをクリックします。画像の画面が見なければ、ヘッダーの左上にあるOneSignalのロゴをクリックしてください。

「Name of your app or website」の枠でアプリやウェブサイトの名前を入力します。今回はReactウェブサイトでOneSignalを使いますから、真ん中の「Web」を選びます。　終わったら下の青いボタンをクリックします。

次の画面で、一番左の「Typical Site」をクリックします。
その下「Site Setup」」で、ウエブサイトの名前とURLを入力します。
注意: 選択したURLからのみpush配信できます。
テストをするために今回localhostにします。
localhostを使う時に「local testing」をオンする必要があります。
良ければ、アイコンのアップロードもできます。

下の「Permission Prompt Setup」で「edit」」をクリックします。

「Permission Prompt Editor」の画面で「Customize slide prompt text」をオンにします。メッセージとボタンのテキストをカスタマイズします。
「And」の枠の「10」を[3]にします。そうすると、ウェブサイトは3秒後に新しいユーザーの許可を求めます。通常、直ぐにユーザーの許可を求めることは余り良くないですが、テストの環境では速く機能するかどうかを確認したいです。　終わったら、下の「Done」ボタンをクリックします。最後に下の「Save」をクリックします。

次の画面で「DOWNLOAD ONESIGNAL SDK FILES」をクリックして、「Finnish」だけをクリックします。

コーディングを始める前、APIキーが必要です。OneSignalのユーザーホームから、登録したウェブサイトの名前にクリックします。ヘッダーにある「settings」---> 「Keys & IDs」をクリックします。　後で使用するためにOneSignal App IDとRest API Keyを保存します。

クライアント側（React)

react-onesignalをインストールします。npm yarn
App.js/App.tsxでonesignalを以下のように初期化します。Next.jsなら_app.js/_app.tsxでやります。 NEXT_PUBLIC_ONESIGNAL_API_KEYを.envファイルに追加します。

App.js

import OneSignal from "react-onesignal";
//...
  useEffect(() => {
    OneSignal.init({ appId: process.env.NEXT_PUBLIC_ONESIGNAL_API_KEY });
  }, []);
//...

先にダウンロードしたOneSignalのzipフォルダーの中の「OneSignal-Web-SDK-HTTPS-Integration-Files」というフォルダーの中で二つのjavascriptファイルがあります。この二つのファイルをReactやNextプロジェクトのpublicフォルダーにペーストします。

これで、locahostで機能していることを確認できます。localhostを開く3秒後、許可を求めるメッセージが表示されます。

ContentulのWebhookはlocalhostで使えないので、deployしなければなりません。では、好きなホスティングにdeployします。deployが終わったらOneSignalの設定で、URLをlocalhostから、deployのURLに変えます。「LOCAL TESTING」もオフにします。
そのURLに行って、push配信の許可を与えます。

Contentful Webhook

これからContentfulのwebhookを設定していきます。

ContentfulのダッシュボードからSettings--->Webhooksをクリックします。

好きなWebhookの名前を入力して、URLのタイプをPOSTして、URLをhttps://onesignal.com/api/v1/notificationsにします。　記事が公開される時にpush配信したいので「Content Event」」で　Entry/Publishにします。

次はHeadersを入力します。　KeyはAuthorization、バリューはあなたのOneSignal　REST API Keyです。Content-typeをapplication/jsonにします。

「Add Webhook」のボタンをクリックします。

「Payload」」で「Customize the webhook payload」をクリックします。
枠で以下のJSONを書きます。「app_id」」はあなたのOneSignal　App ID.　メッセージと見出しもカスタマイズできます。「web_url」はユーザーがクリックしたらその URLに飛びます。

「included_segments」はあなたのすべてのサブスクライバーを含むグループ。OneSignalのグループを詳しく見るにはこちらです。(英語です）

「ja」は日本語のブラウザ限定ですが、「en」は英語だけでなくあらゆる言語のブラウザが対象です。

{
  "included_segments": [
    "Subscribed Users"
  ],
  "app_id": "00000000-0000-0000-0000-000000000000",
  "contents": {
    "ja": "メッセージ",
    "en": "message"
  },
  "headings": {
    "en": "Heading",
    "ja": "見出し"
  },
  "web_url": "https://qiita.com/Code-Kat"
}

終わったら「Save」」をクリックします。

これで終わりました！　これをテストするために、新しいContentfulのエントリーを作成しましょう。公開するとpush通知が表示されれば、完成です。！

何かの問題が発生した場合は、コメントを書いてくれれば、私が一緒に解決策を考えます。