場合によっては、デスクトップの右下隅に次のプロンプトが表示されることがあります。
このデスクトップ プロンプトは、HTML5 の新しい Web プッシュ通知テクノロジです。
Web 通知テクノロジを使用すると、ページの外部のシステム レベルで表示される通知をページで発行できます。ユーザーが他の仕事で忙しいときでも、新しいメールのリマインダーやオンライン チャット ルームで受信したメッセージのリマインダーなどのメッセージ通知をページから受け取ることができ、より良いエクスペリエンスをユーザーに提供できます。
PS: IE に加えて、すべての主要な最新ブラウザーはこのデスクトップ プッシュを基本的にサポートしています。
始める
メッセージ通知を作成するには、window オブジェクトの下にある Notice クラスを使用するだけです。コードは次のとおりです。
var n = new Notice(デスクトッププッシュ, { icon: 'img/icon.png', body: 'これが初めてのデスクトップ通知です。', image: 'img/1.jpg'});次に、上で撮ったスクリーンショットの通知がシステムのデスクトップにポップアップ表示されます。
PS: メッセージ通知は、Web サービスを通じてページにアクセスした場合にのみ有効になり、ローカル ファイルを直接ダブルクリックして開いた場合は効果がありません。つまり、ブラウザを直接使用してローカル ファイルを開くのではなく、ファイルをサーバー上で開く必要があります。
もちろん、何も表示されない可能性もありますので、心配せずに読み続けてください。
基本的な文法もちろん、上記の通知をポップアップ表示する前に、通知の基本構文を理解する必要があります。
let myNotification = 新しい通知(タイトル、オプション);
title: 通知がトリガーされたときに通知ウィンドウの上部に表示される通知のタイトルを定義します。
オプション (オプション) オブジェクトには、通知に適用されるカスタム設定オプションが含まれます。
一般的に使用されるオプションは次のとおりです。body: 通知の本文。タイトルの下に表示されます。
タグ: 各通知の ID に似ており、必要に応じて通知を更新、置換、または削除できます。
icon: 通知を表示するアイコン
image: 通知本文に表示する画像の URL。
データ: 通知に関連付ける任意のデータ。これは任意のデータ型にすることができます。
renotify: 新しい通知が古い通知を置き換えた後にユーザーに通知するかどうかを指定するブール値。デフォルト値は false で、通知されないことを意味します。
requireInteraction: 通知は自動的に閉じるのではなく、ユーザーがクリックするか閉じるまでアクティブのままである必要があることを示します。デフォルト値は false です。
このコードが実行されると、次の図に示すように、ブラウザーはサイトにメッセージ通知の表示を許可するかどうかをユーザーに尋ねます。
通知は、ユーザーが [許可] をクリックして通知を承認した場合にのみ表示されます。
承認するユーザーが許可またはブロックをクリックしたかどうかを取得するにはどうすればよいですか?
window の Notice インスタンスには、ユーザーの承認ステータスを取得する requestPermission 関数があります。
// まず、通知を表示する権限があるかどうかを確認します // ない場合は、権限を申請します if (window.Notification && Notice.permission !== Grant) { Notice.requestPermission(function (status) { //status は認証ステータス . // ユーザーが「許可」をクリックすると、ステータスは「許可」になります。 // ユーザーが「無効」をクリックすると、ステータスは「拒否」になります。 // これにより、Chrome/Safari の場合は Notice.permission を使用できるようになります。 (通知.許可 !== ステータス) { 通知.許可 = ステータス });注: ユーザーが承認の右上隅にある閉じるボタンをクリックすると、ステータスの値はデフォルトになります。
その後は、status の値が付与されているかどうかを判断するだけで、通知を表示するかどうかを決定できます。
通知イベントただし、単にメッセージ ボックスを表示するだけでは魅力的ではないため、メッセージ通知にはある程度の対話性が必要であり、メッセージの表示の前後にイベントが関与する必要があります。
通知では、最初から一連のイベント関数が策定されており、開発者はこれらの関数を使用してユーザー インタラクションを包括的な方法で処理できます。
onshow、onclick、onerror、onclose があります。
var n = new Notice(Desktop Push, { icon: 'img/icon.png', body: 'これが初めてのデスクトップ通知です。'}); // メッセージ ボックスが表示されると onshow 関数がトリガーされます // OK Doデータを記録し、定期的にメッセージ ボックスを閉じます。 n.onshow = function() { console.log('表示メッセージ ボックス') //5 秒後にメッセージ ボックスを閉じます。 setTimeout(function() { n.close(); } 、 3000);};//メッセージ ボックスがクリックされたときに呼び出されます //関連するビューを開いたり、メッセージ ボックスを閉じたり、その他の操作を同時に行うことができます n.onclick = function() { console.log('メッセージをクリックしますbox'); // 関連するビューを開きます。 n.close();};// エラーが発生すると、onerror 関数が呼び出されます。 // 権限が付与されていない場合、onerror 関数は作成時にも実行されます。通知オブジェクト インスタンス n.onerror = function() { console.log('メッセージ ボックス エラー'); // 他の処理を行う}; // メッセージ ボックスが閉じられると、onclose 関数が呼び出されます。 n.onclose = function() { console.log('メッセージ ボックスを閉じる' ) ; //何か他のことをする};簡単な例
<!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>ドキュメント</title> </head> <body> <button>クリックして通知を開始します</button> < / body> <script> window.addEventListener(load, function() { // まず、通知を送信する権限があるかどうかを確認します // ない場合は、権限を要求します if (window.Notification && Notice.permission !== 許可) { Notice.requestPermission(function(status) { if (Notification.permission !== status) { Notice.permission = status; } }) } var button = document.getElementsByTagName(button); button.addEventListener(click, function() { // ユーザーが同意した場合に通知を作成 if (window.Notification && Notice.permission === Grant) { var n = new Notice(Hi!); } // ユーザーが通知を表示するかどうかを選択しない場合 // 注: Chrome では権限属性に値があるかどうかを判断できないため、 // この属性の値を確認することは安全ではありませんデフォルトです。 else if (window.Notification && Notice.permission !== 拒否されました) { Notice.requestPermission(function(status) { if (Notification.permission !== status) { Notice.permission = status; } //ユーザーが同意した場合 if (status === Grant) { var n = new Notice(Hi!) } // それ以外の場合は、妥協して通常モードのアラートを使用できます else {alert(Hi!) } }; // ユーザーが通知の受け入れを拒否した場合、 { // 妥協して通常モードのアラートを使用できます (Hi!) } });インターフェースを開くと、認証アプリケーションがポップアップします。「許可」をクリックしてからボタンをクリックすると、デスクトップに通知が送信され、デスクトップの右下隅にこの通知が表示されます。
上ではメッセージを表示するだけです。
if (ステータス === 許可) { var n = 新しい通知(Hi);}たとえば、大量のメッセージがある場合は、for ループを使用して多数の通知をシミュレートします。
for(var i=0; i<10; i++) { var n = 新しい通知(Hi,+i);}10件の通知が表示されていることがわかります。ただし、場合によっては、大量の通知を表示することがユーザーにとって苦痛になることがあります。
たとえば、インスタント メッセージング アプリがすべての受信メッセージをユーザーに要求する場合です。ユーザーのデスクトップに何百もの不要な通知があふれないようにするために、保留中のメッセージのキューを引き継ぐことが必要になる場合があります。
したがって、新しく作成した通知にタグを追加する必要があります。
以前の通知と同じタグを持つ新しい通知がある場合、新しい通知が以前の通知を置き換え、最新の通知のみがデスクトップに表示されます。
引き続き上記の例を使用すると、トリガー通知にタグ属性を追加するだけで済みます。
for (var i = 0; i < 10; i++) { // 最後に、内容 Hi! 9 の通知のみが表示されます var n = new Notice(Hi! + i, {tag: 'soManyNotification'});}やっとメッセージ通知は優れた機能ですが、一部のサイトがこの機能を悪意を持って使用する可能性は否定できませんが、ユーザーがこの機能を許可すると、時々不快なメッセージがプッシュされ、ユーザーの作業が妨げられる可能性があります。サイトの権限を無効にしてメッセージ通知機能を無効にします。
ブラウザのアドレス入力ボックスの左側にある感嘆符をクリックすると、通知オプションが表示され、承認を変更できます。または、通知ページで通知を変更するオプションがあり、特定の状況に応じて承認通知を変更できます。
したがって、最も基本的な Web 通知が実装されます。
要約する上記は編集者が紹介した HTML5 での Web 通知デスクトップ通知機能の実装方法です。ご質問がございましたら、メッセージを残していただければ編集者がすぐに返信させていただきます。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。