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

  • このエントリーをはてなブックマークに追加

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

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

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


導入して叩くだけ、「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にすると、手動でクリックするか閉じるかしない限り通知が消えないそうです。

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

iOSアプリでREST APIを使うお話

前回のREST APIをiOSアプリでも使うお話です。 こちらも割と簡単ですが、Kotlin=Javaに比べると型に関してはシビアです。 目次1 インストール1.1 CocoaPodsでインストールする。2 使い方2.1 GETの場合2.2 POSTの場合 インストール CocoaPodsでインストールする。 ライブラリが対応していれば簡単ですね。 その後、 これでインストール完了です。 使い方 こちらもAndroidの時と同じような感じでできますが、今回はModelでデータ […]

プログラミング

AndroidでREST APIを取り扱うお話

前回のお話でREST APIを気軽に確認する内容を書きましたが、今回は実際にスマホアプリ内でREST APIのやりとりを行う方法をまとめます。 以前はOkHttpというライブラリを使うことが多く、現在もそれが主流になりますが、今回はkotlinで使えるRetrofitと呼ばれるライブラリを使っていきましょう 目次1 インストール2 使い方2.1 GETの場合2.2 POSTの場合2.3 PUT通信の場合3 まとめ インストール 通信するので当然アプリ側にインターネット接続の設 […]

スマホアプリ

無音カメラが国内ではリリースできなかったお話

みなさん、無音カメラ(Silent Camera)で撮影してますか? いきなりグレーゾーンの発言ぽくなりましたが、App StoreもGoogle Playにも無音カメラは割とたくさんリリースされています。 そこで弊社でもその波(!?)に乗り、無音カメラのリリースを検討しました。 目次1 実際どうなった?2 リジェクト理由1 スパイウェアの扱いになった3 ちなみにGoogle Playでは?4 終わりに5 参考 実際どうなった? 結果から言うと、リリースはできませんでした。 […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。