[outline]
プッシュ通知とは？
受信操作をしなくても、ユーザに情報を自動表示される表示方法です。
通知を許可したユーザーにWebブラウザ経由でプッシュ通知を行うことができます。
スマートフォンでは当たり前に実装されているプッシュ通知ですが、Webブラウザでも実装が可能です。
webサイトの更新、ログイン成功の文字を表示させる、メルマガの購読を促す、LINEへの登録を促すなどユーザーに目につくように情報を届けます。
push.jsで実装しよう！
push.jsとは？
「Service Worker」を使って、様々なAPIと組み合わせることでプッシュ通知を行うjsです。
簡単にいうと、ユーザーがサイトにアクセスして端末を許可すると「Service Worker」にユーザの端末を登録し「Service Worker」がイベントを検知するとプッシュ通知を行います。
もちろん個人情報を保存するものではありません。
jsを導入しよう！
公式ページからDLもできますが今回は、CDNを使用します。
CDNの記載内容
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js">
プッシュ内容の記載
function push(){
Push.create(‘エムトラッドブログを更新しました！’, { //タイトル
body: ’10分で出来る簡単プッシュ通知の方法’, //内容
icon: ‘img/mtrad_logo.jpg’, //ロゴ等の画像
timeout: 6000, // 通知が消えるタイミング
vibrate: [100, 100, 100], // モバイル端末でのバイブレーション秒数
onClick: function() {
// 通知がクリックされた場合の設定
window.open(‘https://mtrad-blog.com/wp/’, ‘_blank’); //URLリンク先
console.log(this);
}
})}
以上で完了です！
オプション
– icon [ String ] : アイコン
– body [ String] : 通知バーの本文
– onClick [ Function ] : 通知をクリックした時のイベント
– onClose [ Function ] : 通知を閉じた時のイベント
– onError [ Function ] : エラーが発生した時のイベント
– onShow [ Function ] : 通知が表示された時のイベント
– tag [ String] : タグ
– timeout [ Integer ] : 通知が消える時間 ( * ミリ秒 )
ローカルで表示確認を！
今回はローカルでページを表示してテストを行います。
1.アクセスすると共に、必ず「許可」をおしてください。
2.真ん中のボタンを押してください
3.通知が出ました！
対応ブラウザについて
Chrome、Safari、Firefox、Edgeなどの最新のブラウザに対応しております。
現状ios等の実装はされておりませんが、2022年現時点でiosに実装されるかもしれない噂があります。
実装したら積極的に取り入れたいですね！
最後に…
とっても簡単に導入ができ、ユーザーへのアプローチが可能になる一方で通知回数をコントロールをしないと逆にユーザー離れが起こりえるものだと思います。
しかしながら、自サイトの新しい情報を更新する以外にも「ログインしました」等の現在の状態をユーザーに通知するのにも役立ち、色々な使い方が考えられます。
また、Google Analyticsを使用して、イベントトラックキングを設定すれば効果測定も簡単ですし、便利に使いこなしちゃいましょう！
