Webプッシュ通知は、Webサイトの閲覧者に対してブラウザから通知を送る機能です。プッシュ通知というと、iOSやAndroid向けのネイティブプッシュ通知がよく知られていますが、Webプッシュ通知はWebサービスやアプリケーションがネイティブアプリのような機能を実現するために用意されている機能の一つです。

今回は、このWebプッシュ通知を手軽に実装できるサービスOneSignalを使い、Webプッシュ通知を実装する方法を解説します。

OneSignalについて

OneSignalは、さまざまな通知を一元管理できるプッシュ通知サービスです。Webプッシュ通知だけでなく、iOSやAndroid向けのネイティブプッシュ通知も管理できます。他にもメール、SMS、InAppなどさまざまな通知に対応しています。

機能としては全体に対する通知やセグメント通知、さらにA/Bテストなども行えるため、通知の効果測定や改善も行いやすくなっています。

OneSignalの利用方法

OneSignalを利用するためには、まずアカウントを作成する必要があります。アカウントは無料で作成でき、各種ソーシャルログインも利用できます。

アプリの作成

ログインすると、ダッシュボードが表示されます。まず最初にアプリを作成します。ここではチャンネルを指定します。選べるチャンネルは、以下の10個があります。複数のチャンネルを一つのアプリで管理できます。

  • iOS
  • Android
  • Web
  • メール
  • SMS
  • Windows
  • macOS
  • Chrome機能拡張
  • Amazon Fire
  • Huawei

今回はWebプッシュ通知を実装するため、Webを選択します。

URLの登録

Webプッシュ通知では、通知の送信対象となるURLを設定します。情報としては、以下の3つが必要です。

  • サイト名
  • サイトURL
  • サイトアイコン

この他、WordPressではプラグインが用意されている他、カスタムコードで細かく実装もできます。

購読確認ダイアログの設定

プッシュ通知の受信確認ダイアログは、ブラウザでも用意されています。しかし、ブラウザの通知確認で受信拒否されると、再度表示させるのは困難です（ユーザー側で、設定にて解除する必要があります）。そのため、OneSignalのダイアログを利用して、拒否されても再度表示させる可能性を高められます。

この設定画面でのプロンプト作成を通じて、購読率を高められるでしょう。

SDKのダウンロード

最後にSDKをダウンロードし、さらに指定されたコードを head タグ内に埋め込みます。これでOneSignalの設定は完了です。

購読する

ではテストで購読してみましょう。先ほどのダイアログ設定に従って、規定数の画面を閲覧したり、規定秒数以上閲覧していると、ダイアログが表示されます。ここで購読を開始し、さらにブラウザネイティブの購読を許可すると、購読が開始されます。

その結果は、OneSignalのダッシュボードで確認できます。

購読者の詳細を確認できます。

テスト通知を送る

最後に、テスト通知を送ってみましょう。ダッシュボードから通知を送信することができます。プレビューも表示されるので、実際に送られる通知の内容が確認できます。

送信すると、ブラウザに通知が届きます。

まとめ

OneSignalを使えば、Webプッシュ通知を簡単に実現できます。購読を依頼するタイミングは細かくカスタマイズできますので、訪問者が購読したくなるタイミングを図って表示するようにしてください。また、通知の内容も重要ですので、適切なタイミングと内容で通知を送るようにしましょう。

Webプッシュ通知は、Webサイトの運営・活性化において重要なツールの一つです。ぜひOneSignalを使って、効果的なWebプッシュ通知を実現してください。

Push Notification Software to Improve Customer Engagement - OneSignal