HTML 5通知API

こんにちは、Habr。 この記事では、 HTML Notification APIについて説明します 。

Notification APIはどのような機能を提供しますか？

APIを使用すると、ブラウザを介して通知を送信できます。 各通知にアイコンを設定し、通知をグループ化し、通知のタイトルとテキストを指定できます。

ブラウザのサポート

• Safari 6
• Chrome 27
• Firefox 22

通知コンストラクターがあるにも関わらず、Opera 15ベータ版は通知APIで動作しません。
モバイルプラットフォームでは、この技術は機能しません 。
webkitエンジンには、webkitNotificationsという形式の古い表記があります。

仕組み

作業サイクルは次のとおりです。

1. 送信する許可を取得します。
2. サイトのルールは固定されています。
3. 通知を送信します。

最初の通知

通知を送信する前に、許可を確認することをお勧めします。

許可チェック

合計で3つの解像度のバリエーションがあります。

• デフォルト
• 拒否されました
• 付与された

許可を確認するために、3つの方法を見つけました。

1. Notification.permissionプロパティの値を通じて。

switch ( Notification.permission.toLowerCase() ) { case "granted": //  break; case "denied": //  break; case "default": //  } 

短所：

• Google Chromeでは、パーミッションプロパティは定義されていません（ドキュメントにもかかわらず- 「静的パーミッション属性はパーミッションを返す必要があります」 ）。

2.送信許可を取得しようとする

 var currentPermission; Notification.requestPermission( function(result) { currentPermission = result } ); 

短所：
状態がデフォルトの場合、ユーザーには通知を送信するサイトの要望に関する質問が表示されます。 ユーザーが何かを選択するまで、コールバック関数は機能せず、ステータスを受け取りません。

小さなヒント：
コールバックの遅延を使用して、requestPermissionを介してデフォルトの状態を決定できます。

 var permission, timer = setTimeout( function() { permission = "default" }, 500 ); Notification.requestPermission( function(state){ clearTimeout(timer); permission = state } ); 

3.通知を送信する
各通知にはイベントがあり、詳細は後ほどです。

 var notify = new Notification("test"); notify.onerror = function(){ console.log("permission state = default or denied"); }; 

短所：
2つのステータスで動作します。

許可を得る

Notification.requestPermissionはデフォルトの許可で起動され、選択した許可を引数として受け取る関数を取ります。

 Notification.requestPermission( newMessage ); function newMessage(permission) { if( permission != "granted" ) return false; var notify = new Notification("Thanks for letting notify you"); }; 

upd： kromxr は 、許可要求はイベント後にのみ発生することを通知し ます 。 たとえば、ユーザーは「システム通知を許可する」ボタンをクリックしました。

通知提出

それで通知に行きました：

 var mailNotification = new Notification(" ", { tag : "ache-mail", body : ",    ...", icon : "http://habrastorage.org/storage2/cf9/50b/e87/cf950be87f8c34e63c07217a009f1d17.jpg" }); 

そして結果：


私たちは理解しています：
「Andrey Chernyshev」-通知タイトル（必須）
さまざまなブラウザとOSでさまざまな方法でトリミングされます。15文字に制限することをお勧めします。

tag-通知をチェーンにリンクするタグ。
同じタグを持つ通知を交換可能にします。

body-通知コンテンツ。
さまざまなブラウザとOSでさまざまな方法でトリミングされます。20文字に制限することをお勧めします。

icon-通知アイコン。
OS Xのクロムとサファリでは表示されません。

通知イベント

通知には4つのイベントがあります。

onclick
ユーザーが通知本文をクリックしたときに発生します。 十字ボタンまたは閉じるボタンをクリックすると機能しません（mac os）。

ショー
通知が表示されるときに機能します。

onerror
許可なしに通知を表示しようとすると機能します（デフォルト、拒否）。

onclose
ウィンドウが閉じると発生します。
WindowsのChromeに問題があります。 closeイベントは、通知がクリックされたときに発生しません。

決定の変更

ブラウザでいつでも、通知ソリューションを削除/変更できます。
Chrome：設定-設定-詳細設定を表示-プライバシー-コンテンツ設定-通知。
Safari：設定-通知。
Firefox：ページを右クリック-ページ情報-権限-通知を表示します。

情報を視覚的に知覚するためのリンク