push.jsでPCでもプッシュ通知を実装しよう!

push.jsでPCでもプッシュ通知を実装しよう!

プッシュ通知とは?

受信操作をしなくても、ユーザに情報を自動表示される表示方法です。
通知を許可したユーザーにWebブラウザ経由でプッシュ通知を行うことができます。
スマートフォンでは当たり前に実装されているプッシュ通知ですが、Webブラウザでも実装が可能です。
webサイトの更新、ログイン成功の文字を表示させる、メルマガの購読を促す、LINEへの登録を促すなどユーザーに目につくように情報を届けます。

push.jsで実装しよう!

push.jsとは?

「Service Worker」を使って、様々なAPIと組み合わせることでプッシュ通知を行うjsです。
簡単にいうと、ユーザーがサイトにアクセスして端末を許可すると「Service Worker」にユーザの端末を登録し「Service Worker」がイベントを検知するとプッシュ通知を行います。
もちろん個人情報を保存するものではありません。

jsを導入しよう!

公式ページからDLもできますが今回は、CDNを使用します。

公式ページ:pushpush.js/

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(‘http://mtrad-blog.com/’, ‘_blank’); //URLリンク先
    console.log(this);

  }
})}

以上で完了です!

オプション

– icon [ String ] : アイコン

– body [ String] : 通知バーの本文

– onClick [ Function ] : 通知をクリックした時のイベント

– onClose [ Function ] : 通知を閉じた時のイベント

– onError [ Function ] : エラーが発生した時のイベント

– onShow [ Function ] : 通知が表示された時のイベント

– tag [ String] : タグ

– timeout [ Integer ] : 通知が消える時間 ( * ミリ秒 )

ローカルで表示確認を!

プッシュ通知はローカルホストかHTTPSの環境で表示されます

今回はローカルでページを表示してテストを行います。

ダウンロードリンク:DEMO

1.アクセスすると共に、必ず「許可」をおしてください。

リクエスト

2.真ん中のボタンを押してください

3.通知が出ました!

対応ブラウザについて

Chrome、Safari、Firefox、Edgeなどの最新のブラウザに対応しております。
現状ios等の実装はされておりませんが、2022年現時点でiosに実装されるかもしれない噂があります。
実装したら積極的に取り入れたいですね!

最後に…

とっても簡単に導入ができ、ユーザーへのアプローチが可能になる一方で通知回数をコントロールをしないと逆にユーザー離れが起こりえるものだと思います。
しかしながら、自サイトの新しい情報を更新する以外にも「ログインしました」等の現在の状態をユーザーに通知するのにも役立ち、色々な使い方が考えられます。
また、Google Analyticsを使用して、イベントトラックキングを設定すれば効果測定も簡単ですし、便利に使いこなしちゃいましょう!

\ 私たちと一緒に働きませんか? /

エムトラッドでは現在デザイナー・エンジニアを募集しています!