💦 ✌🏻 🥗 HTML 5通知API 🧣 💄 ⛺️

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

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

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

ブラウザのサポート

Safari 6
Chrome 27
Firefox 22

通知コンストラクターがあるにも関わらず、Opera 15ベータ版は通知APIで動作しません。

モバイルプラットフォームでは、この技術は機能しません。

webkitエンジンには、webkitNotificationsという形式の古い表記があります。

仕組み

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

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

最初の通知

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

許可チェック

合計で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：ページを右クリック-ページ情報-権限-通知を表示します。

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

HTML 5通知API