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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

flexboxとmargin: auto;を使ってレイアウトを組んでみよう

レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 目次1 左に3つの要素、右に1つの要素を置きたい2 左に1つの要素、右に3つの要素を置きたい3 左右と中央、それぞれに要素を置きたい 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考え […]

マークアップ

『toggleClass』を使ったアコーディオンを作る(heightでアニメーションが効かないのを解決)

jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 目次1 『slideToggle』を使ったアコーディオン2 『toggleClass』を使ったアコーディオン(ただの表示・非表示)3 『togg […]

マークアップ

レスポンシブサイトでjavascript(jQuery)の読み込みを切り替えよう

2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 目次1 ①画面サイズで切り分ける方法2 ②端末(UA)で切り分ける方法 ①画面サイズで切り分ける方法 $(function () { if (window. […]

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

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

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

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