HTML5 デスクトップ通知 通知 API の使用法

はじめに

Notification API は、HTML5 の新しいデスクトップ通知 API であり、ユーザーに通知情報を表示するために使用されます。この通知はブラウザーから分離されており、ユーザーが現在のタブ ページに留まらない場合でも、ブラウザーを最小化した場合でも、通知情報は引き続き上部に表示されます。

ユーザー権限

ユーザーに通知メッセージを表示したい場合は、ユーザー権限を取得する必要があります。同じドメイン名で権限を取得する必要があるのは 1 回だけです。通知は、特定の Web サイトからの広告が通知を悪用したり、その他の方法でユーザーに影響を与えたりすることを防ぐために、ユーザーが許可した権限でのみ機能します。では、ユーザーが許可されているかどうかをどのようにして知ることができるのでしょうか?

Notification.permission この属性は、現在の通知表示の承認ステータスを示すために使用されます。 可能な値は次のとおりです。

• default: ユーザーの選択は不明、デフォルト。

• 許可: ユーザーが許可されました。

• denied: ユーザーによって拒否されました。

if(Notification.permission === 'granted'){
    console.log('用户允许通知');}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');}else{
    console.log('用户还没选择，去向用户申请权限吧');}

リクエスト許可

ユーザーがまだ選択していない場合、ユーザーに許可をリクエストする必要があります。通知オブジェクトは、現在のソースに通知を表示するためのユーザーの許可を要求する requestPermission() メソッドを提供します。

以前のコールバックベースの構文は非推奨になりました (もちろん、現在のブラウザーでは引き続き使用できます)。最新の仕様では、このメソッドが Promise ベースの構文に更新されました:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }});

プッシュ通知

ユーザーを取得する認証後、プッシュ通知を送信できるようになります。

var notification = new Notification(title, options)

パラメータは次のとおりです:

• title: 通知のタイトル

• options: 通知の設定オプション (オプション)。

• body: 通知の内容。

• タグ: 通知を表す識別タグ。同じタグで同じ通知ウィンドウのみが開きます。

• icon: 通知に表示されるアイコンの URL。

• HTML5 デスクトップ通知 通知 API の使用法: 通知に表示される画像の URL。

• data: 通知に関連付けるタスクタイプのデータ。

• requireInteraction: 通知は有効なままであり、自動的に閉じられません。デフォルトは false です。

他にもいくつかのパラメータがありますが、使用できないか役に立たないため、ここで言及する必要はありません。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态，快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/HTML5 デスクトップ通知 通知 API の使用法s/avatar.jpg',
    requireInteraction: true})

通知メッセージのレンダリングは次のとおりです:

通知を閉じる

上記のパラメータからわかるように、表示時間を設定するパラメータはありません。 3 秒後に自動的に閉じるようにしたい場合は、close() メソッドを呼び出して通知を閉じます。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态，快去查看吧'})setTimeout(function() {
    n.close();}, 3000);

Event

Notification インターフェースの onclick 属性は、クリック イベントを受信するイベント リスナーを指定します。通知ウィンドウをクリックすると、URL を開いてユーザーを自分の Web サイトに戻すなど、対応するイベントがトリガーされます。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态，快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }})n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知}

アプリケーションシナリオ

上記のように、実際に使用するためのものです。では、どこで使用できるのでしょうか?

ウェブサイト上のメッセージ リマインダーのほとんどは、メッセージ センターにメッセージ数を表示し、このプロセスに問題がないことをユーザーに通知する電子メールを送信します。しかし、私のようなユーザーにとっては、誰かが何かを気に入ったり、保存したりすると、リマインドするメールが届き、そのメールを常に削除しなければなりません（強迫性障害）ので、非常に煩わしく感じ、メールをオフにすることもあります。電子メールのリマインダー。

もちろん、これは通知を使用する必要があるという意味ではありません。結局のところ、通知はメールとはまったく異なる機能を持っています。

ニュースサイトの方が適していると思います。ユーザーがニュースを閲覧すると、リアルタイムのニュースをユーザーにプッシュできます。 Tencent Sports を例に挙げると、Notification API が使用されています。 notification2017_v0118.js がページ内で紹介されていますので、興味があれば他の人がどのように成熟しているかを確認することができます。

ページに入るとすぐに承認が得られます。同時に、承認を許可するように求めるフローティングボックスがページに表示されます。許可されている場合、プッシュ通知の送信が開始されます。ただし、タブを閉じると、アンロード イベントの前にページをリッスンするため、通知もオフになります。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();}if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);}

互換性

互換性といえば、当然多くの互換性があり、各ブラウザのパフォーマンスは若干異なります。ほぼすべてのモバイル版がサポートされていますが、幸いなことに、IE を除くほとんどの PC 版がサポートされています。したがって、使用する前に、ブラウザが通知をサポートしているかどうかを確認する必要があります。

以上がHTML5 デスクトップ通知 通知 API の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。