HTML5メッセージ通知（Web通知）の利用

私は HTML5 に関する記事をたくさん書いてきましたが、関連する高レベルの API を参照する必要があると常に感じています。システムを理解し、より高いレベルから問題を考えることによってのみ、半分の労力で 2 倍の結果を得ることができます。

まず最も単純な例を試してみましょchrome 。Chrome 開発者ツールを開き、コードを貼り付けて直接実行します。

 new Notice('Jartto/ のメッセージ通知', { dir: 'rtl', body: 'これはテストとして Web 通知を通じて送信されたメッセージです!', icon: 'https://raw.githubusercontent.com /chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

メッセージ通知が表示されません。何が起こっていますか?心配しないで、読み続けてください。

上記の例によれば、実行しましたが、メッセージ プッシュ ボックスを正常にアクティブ化できませんでした。この時点で、ユーザーが許可されているかどうかを確認する必要があります。コンソールに次のように入力します。 > Notification.permission

すぐに、元のユーザー権限がdefaultあることがわかります。ユーザーの選択は不明であるため、ブラウザの動作はdeniedと同じになります。

HTML5のこれらの高レベルAPI見ると、常にいくつかの懸念があります。この例は優れていて使いやすいですが、互換性がどのようなものであるかは検討する価値のある問題です。

ご覧のとおり、 iOS SafariとOpera Mini除く基本的にすべてのブラウザーがサポートしているため、モバイル アプリケーションは注意が必要です。

4. APIドキュメント

まず、API を体系的に整理しましょう。これは非常に簡単です。5 分ほどかかります。

使用事例：

 let notification = 新しい通知(タイトル、オプション)

パラメータ:

title: 必ず表示される通知タイトル

options: 通知を設定するために使用できるオブジェクト。これには次のプロパティが含まれます。

• dir: テキストの方向。値は auto (自動)、ltr (左から右)、または rtl (右から左) です。
• lang: 通知で使用される言語を指定します。この文字列は、BCP 47 言語タグ文書内で有効である必要があります。
• body: 通知に表示される追加の文字列
• tag: 必要に応じて通知を更新、置換、または削除できるように、通知に ID を与えます。
• icon: 通知アイコンの表示に使用される画像の URL。

財産：

Notice.permission: 現在の通知表示の承認ステータスを示す文字列。可能な値は次のとおりです。

• denied (ユーザーが通知の表示を拒否しました)、
• granted (ユーザーが通知の表示を許可しました)、
• default (ユーザーの選択が不明なため、ブラウザはdenied場合と同じように動作します)

方法：

• Notice.onclick: ユーザーが通知をクリックするたびにトリガーされるクリック イベントを処理します。
• Notice.onshow: 通知が表示されるときにトリガーされる show イベントを処理します。
• Notice.onerror: 通知でエラーが発生するたびにトリガーされるエラー イベントを処理します。
• Notice.onclose: ユーザーが通知を閉じるとトリガーされる close イベントを処理します。
• Notice.requestPermission(): 現在のページで、通知を表示する権限をユーザーに適用するために使用されます。
• Notice.close(): 通知を閉じるために使用されます。

Notice.requestPermission このメソッドは、ユーザーの動作 (例: onclick イベント) によってのみ呼び出すことができ、他のメソッドから呼び出すことはできません。

上記の API に従って、完全な例を書いてみましょう。

 function NoticeMe(){ // 最初にブラウザがサポートしているかどうかを確認します if (!(Notification in window)) {alert(このブラウザはデスクトップ通知をサポートしていません) } // ユーザーが通知の受信に同意するかどうかを確認します else if (Notification. Permission = == Grant) { // 問題なければ通知を作成しましょう var notification = new Notice(Hi there!) } // それ以外の場合はユーザーから許可を得る必要があります else if (Notification.permission !== 'denied; '){ Notice.requestPermission(function (permission){ // ユーザーが同意した場合は、通知を送信できます if (permission === Grant) { var notification = new Notice(Hi there!); } }); // 最後に, 実行がこの時点に達した場合、ユーザーが関連する通知の承認を拒否したことを意味します // 敬意を表し、これ以上通知を邪魔しないでください}

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。