WP サイトにWEBプッシュ通知を組み込む〜SuperPWA with OneSignal

OneSignalプラグインを使ってサイトにWeb プッシュ通知を組み込んでみました。
先週あたりから右下隅にチラホラ出ていたベルマークがそれです。

  • サイト右下のBell をクリックして「新着記事を通知」ボタンをクリックすると、ご利用中のWEBブラウザを通じて、我が家のサイトの新着記事が通知されるようになります。※
     
  • 我が家のサイトの新着記事の通知を止めたい場合は、もう一度サイト右下のBell をクリックすると「新規記事通知の解除」ボタンが表示されて、いつでも通知を止められます。
     
  • 通知するのはいまのところ「新着記事(タイトル)のお知らせ」だけです。

※Android端末で我が家の”inmycab.com”PWAアプリを画面登録してくださった方には、PWAアプリに通知されます。iOS端末で我が家の”inmycab.com”PWAアプリを画面登録してくださった方には残念ながら通知されません(safari経由で通知)

Web プッシュ通知は、JavaScript APIを用いてブラウザにプッシュ通知を設定し、受信できるようにする仕組みのことで、2年以上前から標準化の作業がおこなわれていますが、案の定アップルの足取りは重く、昨年やっとMac/iOS版safariで部分的サポートがはじまったものの、Web プッシュ通知と対になるPWA(Progressive Web Apps)への対応にもアップルは未だ中途半端な状態...とにかくGoogle提唱案にはおいそれ乗っかりたくないアップルです。

我が家のサイトのPWA対応については以前、記事にしましたが、OneSignalプラグインを導入することでPWAアプリに向けてもプッシュ通知する(OneSignalのプッシュ通知サービスを利用する)ことが出来るようになります。

OneSignalの利用登録

OneSignalのプッシュ通知サービスを利用するためには、https://onesignal.com/ で会員登録をする必要があります。

サインインにはGoogle、facebook等のアカウントが使えます。

サインインして管理画面にログインしたら「All Applications」をクリック、WEBプッシュ通知させるサイトを登録します。「NEW APP/WEBSITE」をクリックします。

管理画面上でわかりやすい APP NAMEを記入して「CREATE」をクリック。

プラットフォーム「Web Push」を選択して「NEXT」をクリック。

「Wordpress plugin」利用で、CMSとして WordPressを選択、SITE NAME、SITE URLを記入したら「SAVE」をクリック。

「APP ID」「API KEY」が発行されるので手持ちメモにコピー、「FINISH」をクリックしたらとりあえずサイト登録は完了です。

OneSignalプラグインのインストールと設定

OneSignal – Web Push Notifications – WordPress プラグインをプラグインの新規追加からインストールして、有効化します。

サイドメニュー「OneSignal Push」をクリック、Configuration画面で初期設定、動作設定を行います。下記が我が家のサイトでの設定例です。

ヒトによっては便利な「通知機能」ですが、SNS通知にうんざりするジブンのようなヒトには迷惑機能にも映りかねないワケで、実際「通知機能」を埋め込んで登録の催促をバンバン表示してくるサイトも見かけます。性悪なのが「通知機能」の取り消しまでフォローしているサイトが少ないコトで、わざわざブラウザ詳細設定の深いトコロまでいって通知設定リストから削除する手間がなんとも煩わしい...

なので我が家のサイトでは「通知登録」と「通知登録解除」をいつでも出来るように設定しております。気が向いたらお試しください。

 

Macのデスクトップだとこんな風に通知されます