【Web Push通知】無料で使えるOneSignal設定

ちょっといつまで無料で使えるかは分かりませんが、Push7を使っていて2日で無料送信の限界を超えてPushしてくれなくなったので無料のOneSignalを使ってみます。

ほとんどのサイトをSSL化したので今度はPush通知の充実をするためにOneSignal導入。

WordPressのプラグインなので新規インストールで「OneSignal」を検索すると出て来るのでインストールします。

OneSignalのAppID・API Key取得

プラグインを導入したら以下のようにOneSignalのサイトにアクセスして、右上LoginリンクからOneSignalのID登録する。

OneSignal is a free push notification service designed for mobile apps and websites.

One SignalのAppID・API Key取得 サイト

リンクを押すとログイン画面が表示されるので、一番下「Sign up」を押す。

One SignalのAppID・API Key取得 サイト Sign up

メルアドとパスワード入力して登録するとメール↓が届くので「Click Here To Confirm Your Account」を押して本登録完了させる。

One SignalのAppID・API Key取得 サイト 本登録

OneSignalサイトでAppID・API Key取得

Add a new app

ユーザー登録が完了したらOne Signalサイトで、新しいAppを作る。

One SignalのAppID・API Key コピペ

以下のようにWebsite Pushを選んでいく。

サイトにApp IDなどが表示されますがコピーしないで「DONE」ボタンを押して終了。

One SignalのApp作成5

OneSignal AppID・API KeyをWPにコピペ

OneSignalサイトの App Settings > Keys & IDsにアクセス↓してAppIDとAPI KeyをコピーしてWordPressの所定の場所に貼り付ける。

OneSignal AppID・API Key取得

WordPressでプラグインのOneSignalをインストールしておいたら左メニューに「OneSignal Push」が表示されているので、「Configuration」タブを選択↓

Account SettingsにそれぞれOneSignalのAppIDとAPI Keyをコピペする。

OneSignal AppID・API Key取得 Configuration

それと下のほうにある「Prompt Settings & Notify Button」はデフォルトで「Enable the notify button」がオンになっていて、サイトの右下のように鈴アイコンが表示されてちょっと邪魔なのでオフにして、Push通知でよくあるURLバーの左に通知されるタイプの「Automatically prompt new site visitors to subscribe to push notifications」をオンにしてみる。

OneSignal Prompt Settings & Notify Button

これでとりあえずはWeb Pushはできるようになりました。↓

OneSignal WebPush完了

ChromeとFirefoxのブラウザからアクセスするとPush許可するか表示されるようになった。↓すでにChromeで一人Push通知許可した人がいる。

OneSignal WebPush完了2

とりあえずは、ChromeとFirefoxのブラウザを使っている方のみにWebPushできるようになりました。後ほどAndroidやiOSのPush通知設定もしてみます。←Androidアプリなど開発した人が使うので必要ない。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする