contentfulの記事が公開される時にPush通知を行う

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

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

## 前提条件

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

## OneSignalの設定

OneSignalの[ホームページ](https://app.onesignal.com/)で無料アカウントを作りましょう。アカウントを作った後、アカウントのホームで「New App/Website」のボタンをクリックします。画像の画面が見なければ、ヘッダーの左上にあるOneSignalのロゴをクリックしてください。
![start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/15d4cfe8-97cd-0878-6184-caf215faca0a.png)

「Name of your app or website」の枠でアプリやウェブサイトの名前を入力します。今回はReactウェブサイトでOneSignalを使いますから、真ん中の「Web」を選びます。　終わったら下の青いボタンをクリックします。
![new app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/4f5cf15d-c906-b61d-71bf-d926fb4015f0.png)

次の画面で、一番左の「Typical Site」をクリックします。
その下「Site Setup」」で、ウエブサイトの名前とURLを入力します。
__注意__: 選択したURLからのみpush配信できます。
テストをするために今回localhostにします。
localhostを使う時に「local testing」をオンする必要があります。
良ければ、アイコンのアップロードもできます。
![web configuration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/1adbd6ad-9b59-7e78-ded2-386531316576.png)

下の「Permission Prompt Setup」で「edit」」をクリックします。
![edit welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/7a623d78-1197-f559-d57c-3554cd4d5270.png)
「Permission Prompt Editor」の画面で「Customize slide prompt text」をオンにします。メッセージとボタンのテキストをカスタマイズします。
「And」の枠の「10」を[3]にします。そうすると、ウェブサイトは3秒後に新しいユーザーの許可を求めます。通常、直ぐにユーザーの許可を求めることは余り良くないですが、テストの環境では速く機能するかどうかを確認したいです。　終わったら、下の「Done」ボタンをクリックします。最後に下の「Save」をクリックします。
![Capture d’écran (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/0248d7c9-f19c-eb53-1f21-a17d88d97249.png)

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

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

## クライアント側（React)

react-onesignalをインストールします。[npm](https://www.npmjs.com/package/react-onesignal) [yarn](https://yarnpkg.com/package/react-onesignal)
App.js/App.tsxでonesignalを以下のように初期化します。Next.jsなら_app.js/_app.tsxでやります。 NEXT_PUBLIC_ONESIGNAL_API_KEYを.envファイルに追加します。

```react: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をクリックします。
![Capture d’écran (41).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/e1407345-084b-0d31-49a4-0dca19324e8a.png)

好きなWebhookの名前を入力して、URLのタイプをPOSTして、URLを`https://onesignal.com/api/v1/notifications`にします。　記事が公開される時にpush配信したいので「Content Event」」で　Entry/Publishにします。
![Capture d’écran (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/3add778d-012e-695e-a534-3a897efc3dff.png)


次はHeadersを入力します。　Keyは`Authorization`、バリューはあなたのOneSignal　REST API Keyです。Content-typeを`application/json`にします。
![Capture d’écran (44).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/bf456828-be2b-ab2c-9624-74c3a5b6ac3b.png)

「Add Webhook」のボタンをクリックします。
![Capture d’écran (42).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080708/a646bc75-f89c-30ab-72a9-12d51d31d16f.png)

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

「included_segments」はあなたのすべてのサブスクライバーを含むグループ。OneSignalのグループを詳しく見るには[こちら](https://documentation.onesignal.com/docs/segmentation)です。(英語です）

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

```json
{
  "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通知が表示されれば、完成です。！ 

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