BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. ウェブサービス
  5. サイトにWebプッシュを導入してユーザーにリアルタイムで告知しよう
by 漢ムラタ 漢ムラタ

サイトにWebプッシュを導入してユーザーにリアルタイムで告知しよう

サイトにWebプッシュを導入してユーザーにリアルタイムで告知しよう

以前投稿した「PWAでウェブアプリとしてスマホのホーム画面に追加しよう」で少しだけ触れたWEBプッシュ機能を今回は「OneSignal」というサービスを利用して実際にサイトに導入してみます。

そもそもWEBプッシュって?

WEBプッシュとは「WebWorker」という仕組みを使用して、ユーザーが該当のページどころかブラウザ自体を立ち上げていなくても、画面に通知を出す仕組みになります。

当然無作為に通知を送れるわけではなく、ユーザーが該当のサイトに訪れた際にWEBプッシュを送信しても良いというお許しを頂いた場合のみ送ることができ、ユーザーも任意のタイミングで送信を不許可にすることもできます。

現時点で対応しているブラウザは「Edge」「chrome」「Firefox」「Safari」が対応していて、主要なブラウザであれば問題なく使えます。
ただ使えるといってもブラウザごとに出力されるデザインやオプション機能などに差があり、そこに関してはchromeが頭一つ抜けているイメージです。

OneSignalへ登録

サインイン

OneSignalのサイトからまずは会員登録を行う必要があります。
Web Push Notifications」より「GET STARTED」ボタンを選択します。

githubやgoogle、facebookのいずれかのアカウントでログインするか新しく登録するかします。

新しいappの登録

ログインすると「All Aplications」の画面に遷移すると思いますので、まず「Add a New app」をクリックして新しくAPPを設定します。

何でもいいので分かりやすい名前を入力し、「CREATE」ボタンを選択します。

ダッシュボードへ画面遷移後「Edit app 【app名】」というダイアログボックスが表示されるので、「Web Push」を選択して「Next」ボタンを選択します。

次に「Configure Web Push」という画面に遷移するので、最初の「Choose Integration」から今回は「Custom Code」を選択します。

その下の「Site Setup」では「サイト名」と「サイトURL」「デフォルトアイコン」を設定します。

デフォルトアイコンに関しては最低192×192pxのサイズである必要があります。
アップロードするのではなく自分のサイト内の画像のURLで指定してもいいですが、その際は必ずhttpsである必要があります。今回はPWAサイトを前提としているので気にしないでもいいですが。

My Site is not fully HTTPS」はサイトがSSL化されていない場合の話なので無視して「SAVE」ボタンを選択します。

次の画面に移るので「Upload Files」より「DOWNLOAD ONESIGNAL SDK FILES」を選択してzipファイルをダウンロードします。

zipファイルを解凍すると以下の3つのファイルが入っています。

これらのファイルをサイトのルートディレクトリに設置する必要があるのですが、manifest.jsonファイルは既に存在しているので中身を既存のmanifest.jsonに移します。

この部分ですね。「gcm_sender_id_comment」はもしかしたら不要かもしれないです。

また、manifest以外の2つのjsファイルによってServiceworkerへ登録するのですが、既にPWA化しているので自前のServiceworkerに登録したjsファイルがあると思います。例えば前回の記事でいうところの「serviceworker.js」です。

両方を登録することはできないので、今回ダウンロードした「OneSignalSDKUpdaterWorker.js」と「OneSignalSDKWorker.js」の先頭に下記の記述を追加します。

異なるファイル名にしている場合は適宜変更してください。

上記3ファイルのルートディレクトリへの設置が完了したら先ほどの画面に戻ります。

次に「Add Code to Site」よりhead内に埋め込むコードが提供されているので、全ページに埋め込みます。

最後の「Add your first user」は無視しても大丈夫です。「FINISH」ボタンを選択してappの登録を完了させます。

通知の許可

これで問題なければサイトの右下にベルのアイコンが出ていると思います。

このベルにカーソルを合わせると「Subscribe to notifications」という通知購読を促すメッセージが出ます。
早速アイコンをクリックしてみましょう。

閲覧している端末やブラウザによって表示される位置や文言に多少違いがあると思いますが、PC版Firefoxだと下記のようにURLバーの直下に通知を許可するかどうかのポップアップが表示されます。

通知を許可する」を選択してこのサイトからの通知を受け取るようにします。ユーザーの許可を得ずに勝手に通知を送ることはできません。

正常に登録できたらベルのアイコンが小さく半透明になっていると思います。

通知登録ユーザーの確認

OneSignalの管理画面から現在何人のユーザーが通知を登録しているかをチェックできます。

管理画面上部の「USERS」を選択します。

「Segments」という画面に遷移するので、そこの「Subscribed Users」より登録したユーザーの数を知ることができます。

先ほど登録した分が反映されて「1」になっているのが分かります。
ちなみにその上の「VIEW ALL USERS」を選択すると一覧で確認することができ、ユーザーの様々な情報も見ることができます。

通知を送る

ではいよいよ登録したユーザーに対して通知を送ってみましょう。

管理画面上部メニューより「MESSAGES」を選択してメッセージ管理画面に遷移したら、「NEW PUSH」ボタンより送信する内容を設定していきます。

送る相手

まず誰に送るかを以下の3つから選択します。

  • Send to Subscribed Users
    先ほどのユーザーリストに載っているユーザー全員に送ります。
  • Send to Particular Segment(s)
    ユーザー管理画面にて設定したセグメントで送る相手を選べるようです。
    グループ分けみたいなものでしょうか。
  • Send to Test Device(s)
    ユーザー管理画面にて「テストユーザー」として設定したユーザーの中から選んで送ります。テストでプッシュ通知したい時などに使えますね。

通知内容の入力

送信先を選んだら次にメッセージの本文を入力します。

メッセージは各言語ごとに設定することができますが、デフォルトの英語の入力は必須となっています。ただ別に日本語で入力しても問題ありません。
ただこの場合だと仮にアメリカのユーザーがWEBプッシュに登録してメッセージを受け取っても日本語のメッセージになるので、恐らく登録を解除されてしまいますよね。

そういった場合、鉛筆のアイコンをクリックすると様々な言語の一覧が表示されるので分けて設定したい言語にチェックをいれて「SELECT」をクリックします。

すると「ENGLISH」の横に選択した言語のボタンが追加されるので、言語ごとにメッセージを設定することができます。

タイトルと本文を入力すると画面右側に実際に通知された際のビジュアルを確認することができます。
ただし、反映されるのはデフォルトの「ENGLISH」の内容だけです。

また「Mac OS」「windows」「Android」の3パターンでのビジュアルをタブを選択することで切り替えて確認することができます。

オプション

送信するメッセージに対して各ブラウザごとのオプションを指定することができます。

Google Chrome

アイコン
メッセージにアイコン画像を掲載することができます。
macのchromeだとメッセージの右側、windowsのchromeだと左側に出るそうです。
「+UPLOAD」ボタンより画像をアップするか、画像の絶対パスを入力することでも設定できるようです。ただしその場合は「https」である必要があります。
ここは普通にローカルから画像をアップするのが無難だと思います。
また画像の推奨サイズは「192×192px」です。

画像
メッセージに対して大きめの画像を一緒に掲載することが出来ます。
ただしこれは現時点ではwindowsのchromeとandroidのみの設定になり、macの場合はメッセージの右側に小さい画像として表示されるようです。
アップ方法は「アイコン」と同じで、推奨サイズは「360×180px」で2:1の比率のものになります。

バッジ
Android chromeのみの設定で、通常chromeのロゴが表示されている箇所の画像を任意の画像に変えることができます。
推奨サイズは「72×72px」です。

Edge

現時点では特にオプションはないようです。今後増えることに期待しましょう。

Firefox

アイコン
前述のGoogleChromeと同様のオプションになります。
現時点でFirefoxが設定できるオプションはこれのみです。

アディショナルデータ

通知が開かれた際、ここで設定したキーと値のペア情報が受け取れるらしいです。
ちょっと活用方法が思い浮かばないです。

遷移先URL

メッセージをクリック(タップ)した際の遷移先URLを指定します。

優先度

Android端末に対するオプションのようですが、ちょっと理解できなかったです。

通知の有効期間

どれくらいの間通知を開かずに放置していたら通知を削除するかを秒で設定できます。デフォルトでは「259,200秒(3日間)」となっているようです。

スケジュール

通知を今すぐ送信するか決められた時間に送信するかの設定が可能です。
また送信するユーザー毎に最適化した時間帯に自動送信するなどもできるようなのですが詳細は不明です。

送信

ここまで設定が完了したらあとは送信するだけです。
画面下部の「CONFIRM」をクリックすることで送信が完了します。
「SAVE AS DRAFT」で送信前に下書きで保存することもできるようです。

送信すると無事モニター右下にこのように表示されました。(windows chromeでの受信)

送信が完了したら、先ほど送信したメッセージがクリックされたかなどのデータがリアルタイムで見れる画面に遷移します。

過去に送信したメッセージの情報が知りたい場合は、画面上部メニューの「MESSAGES」に再度アクセスすると、過去の送信分のメッセージが一覧で表示されているので、ここから確認することが可能です。

最後に

今回はここまでですが、次回はAPIを活用してWordpressで記事を公開したら自動でメッセージを送信する仕組みをご紹介したいと思います。

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る