HTML5でのデスクトップ通知通知の実装

まえがき: フロントエンド開発者としては、Web を閲覧するときに常にいくつかの新しい機能に注目します。仕事で Teambition を常に使用している私にとっては、常に通知を受け取ります。そこで、今日はこの H5 関数を勉強します。

 let n = new Notice( これは通知メッセージです。 // これは必須のタイトルと表示される通知のタイトルです { icon: xxx.png, // このアイコンは、通知本文の左側の画像を表示するために使用されます。こんにちは、xxx です。 // 通知内のコンテンツ文字 dir: auto, // テキストの方向値には、auto (自動)、ltr (左から右)、rtl (右から左) が含まれます。 tag: gxlself / / この通知メッセージの ID を指定して、この通知メッセージの更新、削除、置換などの操作に使用されます。 // long: en-US //lang フィールドは https://tools.ietf.org/html/bcp47 を参照する必要があります。これは必須ではありません。効果はありません。 .. // ... // 他のオプションのプロパティについては、以下のインスタンスのプロパティを参照してください。})

n.actions // NoticeAction オブジェクトの読み取り専用配列。各オブジェクトは、ユーザーが通知内で選択できる単一のアクションを記述します。

n.image // 通知の一部として表示される画像の URL

n.badge // 通知自体を表示するのに十分なスペースがない場合に、通知を表すために使用される画像の URL。

n.permission // 値は 3 つあります: granted 、 denied 、またはdefault 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝

n.renotify // ブール値。新しい通知が表示されたときに、前の通知を置き換えるかどうか。 true に設定すると、置換を意味します。つまり、現在のマークの通知が 1 つだけ表示されます。ここで現在のマークアップに気づきましたか?そうです、 trueパラメータが機能するには、 tag必须。

n.requireInteraction // ブール値。ユーザーが通知をクリックするか、通知を自動的に閉じるのではなくキャンセルするまで、通知がアクティブのままであるかどうかを示します。

n.silent // ブール値。通知が表示されたときに音を鳴らすかどうか。デフォルトはfalse 、サイレントを意味します。

n.timestamp //通知が作成された時刻、または通知が使用可能になった時刻。

n.data // 通知に関連付けられた任意のタイプのデータ。

n.vibrate // 通知が表示されるとき、デバイスの振動ハードウェアに必要な振動モード。いわゆる振動モードとは、振動と非振動のミリ秒数をそれぞれ表す交互時間を記述する配列を指し、交互に続きます。たとえば、[200, 100, 200] は、デバイスが 200 ミリ秒間振動し、その後 100 ミリ秒間停止し、その後 200 ミリ秒間振動することを意味します。 (モバイル版)

n.sound // 文字列。音声アドレス。再生する音声リソースの存在を通知することを示します。

n.sticky // 通知の吸着をクリアするのは簡単ではありません...（モバイル版）

n.noscreen // ブール値。画面への通知情報の表示を停止するかどうか。デフォルトはfalseで、通知コンテンツが画面に表示されることを意味します。 (モバイル版)

1> onclick ユーザーの通知情報に関するクリック イベント

2> 通知メッセージが表示された後にトリガーされる onshow イベント

3> onerror は、エラーが発生したときにトリガーされるイベントです。

4> onclose closeイベントの処理

requestPermission() メソッドは、インスタンス オブジェクトではなく、Notification オブジェクトでのみ有効であることに注意してください。!!! このメソッドは、通知を表示する権限をユーザーに適用するために使用され、ユーザーによってのみアクティブに呼び出すことができます (ページのオンロードで呼び出すことができ、ユーザーに適用して後で送信できます...)

インスタンス オブジェクトが持つメソッドは次のとおりです。

(1). close() は通知メッセージを閉じるために使用されます --> ユーザー エクスペリエンスを向上させるために、onshow メソッドに遅延呼び出しを追加することもできます。

(2). addEventListener() イベントをリッスンします (この一般的なメソッド)

(3).removeEventListener はリスニング イベントをアンインストールします (一般、上記と同じ)。

(4).dispatchEvent ディスパッチイベント (上記と同じ)

次に、js テストを作成します。Google Chrome を使用している場合は、設定で通知を表示し、通知を許可するローカル サービス アドレスを追加することをお勧めします。

ただし、http ドメイン名は Google Chrome ではデフォルトで閉じられており、変更することはできません。Google Chrome コンソールで警告メッセージが表示されるかどうかを確認してください --->

Index.js:78 [非推奨] 通知 API は安全でないオリジンからは使用できなくなります。詳細については、https://goo.gl/rStTGz を参照してください。

まあ、わかりました、https 証明書を追加するのは本当に有害です...この機能をホームページに追加するのは Firefox でのみ楽しめることですが...

(Tencent Cloud には 1 年間無料の SSL 証明書があり、自分でインストールできます...)

 //index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{constructor(){ this. isNotificationSupported = ウィンドウ内の通知 } isPermissionGranted(){ return Notice.permission === '許可'; } requestPermission(){ if(!this.isNotificationSupported){ return; } Notice.requestPermission(status=>{ let Permission = Notice.permission; }) } showNotification(){ if (!this.isNotificationSupported) {戻り値; } if (!this.isPermissionGranted()) { 戻り値 n = 新しいNotice(gxlself があなたに挨拶を送ります, { icon : 'gxlself.png', body : '訪問へようこそ、とても感謝しています! クリックすると私のブログページにジャンプします~' }); n.onshow = function () { console .log('gxl自身が通知情報を送信しました'); setTimeout(function() { n.close(); }, 5000); location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' gxlself メッセージ ウィンドウが閉じられました') } } }

これは、Firefox ブラウザを実行した後の効果の表示です。

Google をローカルで実行する効果を見てみましょう: (ドメイン名はデフォルトで傍受され、オフになっています。これについては上で説明したので繰り返しません)

Google の効果は実際にはかなり良いです、そうですね... https が私をブロックしただけです...

------- デスクトップアプリ -----------

開いている Web アプリケーションで通知を使用する場合は、マニフェスト ファイルにdesktop-notification権限を必ず追加してください。通知は、ホスト型以上の任意の権限レベルで使用できます。

権限: { デスクトップ通知:{} }

この通知はもっと楽しいものであり、将来メッセージを送信するための重要な部分でもあります。この記録を残してください。これが皆さんの学習に役立つことを願っています。また、皆さんが VeVb Wulin Network をサポートしてくれることを願っています。