WEBブラウザからプッシュ通知を送信 【Push.js】の使い方

  • はてブ

2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。
確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。

ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。
調べたところ、なんと便利なjsライブラリが存在するそう。

※先に大事な点ですが、WEBブラウザからのプッシュ通知はまだiPhoneなどのiOS端末はブラウザ側のサポートがなされていないため、非対応です。そのほか、Android端末でもOSの仕様上HTTPS環境でなあいと上手く表示されないとか。IEは実装予定との告知が出ています。(2017/04/19時点)


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


導入して叩くだけ、「Push.js」

02
その名も「Push.js」。
本来はAPIを設計し…となりますが、これがあればAPIをイチから組み立てる必要もありません。

Window10では画面の右下からこんな感じでニョキっと生えてきました。楽しい。
01

対応ブラウザは下記。
・Firefox 22+
・Chrome 5+
・Safari 6+
・Opera 25+
・Android Browser 4.4+
・Blackberry Browser 10+
・Opera Mobile 37+
・Firefox Android 47+
・Samsung Internet

IEは実装予定との告知が出ています。
また、Edgeは私の環境で動かしてみたところ、動作しました。

その他の制約としては、初回の通知を受け取る時にブラウザ側から許可のアラートが出ます。一度許可すればOKです。
03

導入方法

・STEP1:jsを読み込む
・STEP2:通知の内容を作る

◆STEP1:jsを読み込む

Push.js」をダウンロードして、読み込みます。(GitHub
CDN経由で読み込む場合は下記をソースに記述してください。


対応ブラウザが増える可能性があるので、CDN経由の方が良いかもしれませんね。

◆STEP2:通知の内容を作る



それぞれ通知のどこに対応しているかなんとなく分かるかと思います。

01

Hello world! こんにちは!とかメッセージでも良いですが、
サイトやアプリケーションの名前が無難かなと思います
body: “How’s it hangin’? プッシュ通知の内容
icon: ‘icon.png アイコン画像のリンク
*以下のように分けて記述も可能です。
icon: {
x16: ‘images/icon-x16.png’,
x32: ‘images/icon-x32.png’
}
timeout: 4000 通知が消える秒数(ミリ秒)
onClick: function () {} 通知をクリックした時の処理を追加できます。
*「window.focus();」windowにフォーカス
*「this.close()」通知を閉じる

その他の設定


vibrate:[200, 100] モバイル端末での、バイブレーションの振動パターン配列。
数値は振動の長さ。
link:”../sample.html モバイル端末で通知をクリックしたときのリンク先。相対URLパス。
(サーバー上にserviceWorker.jsファイルが必要)
requireInteraction:false trueにすると、手動でクリックするか閉じるかしない限り通知が消えないそうです。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ