16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

OneSignalで特定のユーザーにWEBプッシュ通知を送る方法(PHP編)

Posted at

OneSignalは無料で使いはじめることができるプッシュ通知配信サービスです。(WEBプッシュは3万ユーザーまで。モバイルは無制限で)
スクリーンショット 2019-11-26 11.41.10.png
こちらを使うと驚くほどかんたんにプッシュ通知を送れました。今回はLaravelにてOneSignalを使ってWEBブラウザ向け(Chrome、Firefox)にプッシュ通知を配信する方法をまとめます。

OneSignalでアプリを作成

スクリーンショット 2019-11-26 11.43.06.png Website Push を選択。 スクリーンショット 2019-11-26 11.43.51.png SITE NAMEとSITE URLを入力。 スクリーンショット 2019-11-26 11.44.22.png ローカルでテストする場合はSITE URLは「https://localhost 」など適宜変更してつくってください。 DEFAULT ICON URLはプッシュ通知の許可ダイアログででてくるアイコンです。 スクリーンショット 2019-12-03 10.11.41.png

Permission Prompt Setupは、最初にサイトを訪れた時にプッシュ通知の許可確認をとる方法を選べます。

スクリーンショット 2019-12-03 10.12.13.png Welcome Notificationでは許可された場合に送るプッシュ通知を設定。お礼のメッセージなどを。 ほかにもいろいろ設定はありますが、基本的にはこれだけで「SAVE」でOK。 スクリーンショット 2019-12-03 10.15.28.png 次に、「DOWNLOAD ONESIGNAL SDK FILES」を押してファイルをダウンロードして、下記の2つのファイルをサイト直下にアップしてください。 スクリーンショット 2019-12-03 10.17.30.png 最後に、JavaScriptのコードを埋め込めば完了です。

OneSignalでプッシュ通知を送る

これでプッシュ通知を送れるようになりました。OneSignalの管理画面からMessagesを開いてNEW PUSHをクリック。
スクリーンショット 2019-12-03 10.18.50.png
Send to Subscribed Usersで、購読している人に送れます。
スクリーンショット 2019-12-03 10.20.37.png

個別にプッシュ通知を送りたい

全体に送るものだけじゃなく、特定のユーザーにだけ通知を送りたいケースはよくあります。

アプリ側から下記のようにUserIdをセットすることができます。(下記の例はLaravelのbladeに書いています)

<script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(function () {
            OneSignal.init({
                appId: "ONESIGNALのAPP_ID",
            });

            @if(isset($loginUser))
            //onesignalにuser_idをセット
            OneSignal.on('subscriptionChange', function (isSubscribed) {
                if (isSubscribed == true) {
                    OneSignal.setExternalUserId('{{ $loginUser->id }}');
                    OneSignal.getExternalUserId().then(function (id) {
                    });
                } else if (isSubscribed == false) {
                    OneSignal.removeExternalUserId();
                }
            });
            @endif
        });
</script>

これでOneSignalのユーザーとアプリ側のユーザーを一致させます。

次にプッシュ通知を送りたいところで下記のようにして個別に送ることができます。headingsはタイトル、contentsは内容をいれます。

SendPush.php
$fields = array(
            'app_id' => ONESIGNALのAPP_ID,
            'include_external_user_ids' => [$user_id],
            'url' => アプリのURL,
            'headings' => array('en' => $title),
            'contents' => array('en' => $body)
);

$fields = json_encode($fields);

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://onesignal.com/api/v1/notifications");
curl_setopt($ch, CURLOPT_HTTPHEADER,
            array('Content-Type: application/json; charset=utf-8', 'Authorization: Basic '.ONESIGNALのAPP_ID));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$response = curl_exec($ch);
curl_close($ch);

いかがだったでしょうか。OneSignalがあればこれだけかんたんにプッシュ通知を送ることができるようになります。ブラウザだけでなく、スマホアプリにも対応していますのでWEBもアプリもプッシュ通知はOneSignalさえあれば捗ります。

16
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?