通知APIガイド

Notifications APIは、ユーザーシステムの通知を表示する役割を果たします。これは、ブラウザが開発者に公開するインターフェイスであり、Webサイトがブラウザで開かれていない場合でも、ユーザーの許可を得てメッセージを表示できるようにします。

通知APIの概要

ザ・通知APIブラウザーが開発者に公開して許可するインターフェースですユーザーにメッセージを表示する、Webサイト/ Webアプリがブラウザで開かれていない場合でも、許可を得て。

これらのメッセージは一貫性がありネイティブです。つまり、受信者はメッセージのUIとUXに慣れており、システム全体であり、サイトに固有のものではありません。

と組み合わせてプッシュAPIこのテクノロジーは、ユーザーエンゲージメントを高め、アプリの機能を強化するための成功した方法です。

Notifications APIは、サービスワーカー、プッシュ通知に必要なため。君はできるプッシュなしでNotificationsAPIを使用しますが、そのユースケースは限られています。

if (window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission((status) => {
    // status is "granted", if accepted by user
		var n = new Notification('Title', {
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		})
	})
}
n.close()

権限

ユーザーに通知を表示するには、そのための権限が必要です。

ザ・Notification.requestPermission()メソッド呼び出しはこの許可を要求します。

あなたは呼び出すことができます

Notification.requestPermission()

この非常に単純な形式で、許可がすでに付与されていない限り、許可許可付与パネルが表示されます。

ユーザーが対話する(許可または拒否する)ときに何かを行うために、処理関数をそれにアタッチできます。

const process = (permission) => {
  if (permission === "granted") {
    // ok we can show the permission
  }
}

Notification.requestPermission((permission) => { process(permission) }).then((permission) => { process(permission) })

コールバックを渡す方法を確認し、また、約束する。これは、の実装が異なるためです。Notification.requestPermission()過去に作成されたものですが、ブラウザで実行されているバージョンが事前にわからないため、現在はサポートする必要があります。だから、物事を単一の場所に保つために、私は許可処理を抽出しましたprocess()関数。

どちらの場合も、その関数は渡されますpermission次のいずれかの値を持つことができる文字列:

  • granted:ユーザーが承認しましたできる許可を表示する
  • denied:ユーザーが拒否しましたできません許可を表示する

これらの値は、Notification.permissionプロパティ。これは、ユーザーがすでにアクセス許可を付与している場合、次のように評価されます。grantedまたはdenied、しかしあなたが電話していない場合Notification.requestPermission()それでも、それは解決されますdefault

通知を作成する

ザ・Notificationによって公開されたオブジェクトwindowブラウザのオブジェクトを使用すると、通知を作成し、その外観をカスタマイズできます。

これは、権限を要求した後に機能する最も単純な例です。

Notification.requestPermission()
new Notification('Hey')

Create a notification

通知をカスタマイズするためのいくつかのオプションがあります。

ボディを追加する

まず、本文を追加できます。これは通常、1行で表示されます。

new Notification('Hey', {
  body: 'You should see this!'
})

Add a body to the notification

画像を追加する

アイコンプロパティを追加できます。

new Notification('Hey', {
  body: 'You should see this!',
  icon: '/user/themes/writesoftware/favicon.ico'
})

Add an image to the notification

プラットフォーム固有のプロパティを備えたその他のカスタマイズオプションは、次のURLにあります。https://developer.mozilla.org/docs/Web/API/Notification

通知を閉じる

通知を開いたら、通知を閉じることをお勧めします。

これを行うには、開いた通知への参照を作成します。

const n = new Notification('Hey')

その後、次を使用して閉じることができます。

n.close()

またはタイムアウトあり:

setTimeout(n.close(), 1 * 1000)

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: