HTML5 デスクトップ通知 (Web 通知) の例 分析_html5 チュートリアル スキル

html5 デスクトップ通知 (Web 通知) は、新しいメッセージがオンラインになったときにデスクトップ通知効果が必要な場合に非常に役立ちます。ここでは、html5 のこの新しい属性について簡単に説明します。

これは良いデモです: html5 Web 通知デモ

上記のデモから、次のように必要な基本的なコア コードを取得できます。

コードをコピーします

コードは次のとおりです:

<script><br> var 通知= window.mozNotification || window.webkitNotification;<br> <br> Notice.requestPermission(function (permission) {<br> // console.log(permission);<br> });<br> <br> function show() {<br> var instance = new Notice(<br> "テスト タイトル", {<br> 本体: "テスト メッセージ"<br> }<br> );<br> <br>instance.onclick = function () {<br> // やるべきこと<br> };<br> instance.onerror = function () {<br> // やるべきこと<br> };<br> インスタンス.onshow = function () {<br> // やるべきこと<br> };<br> instance.onclose = function () {<br> // やるべきこと<br> };<br> <br> return false; <br> }<br></script>

その例: Notification.requestPermission このコードの機能は、ユーザー に許可を要求することです。

上記の例を通して、最初にドキュメントをロードするときに、ユーザーに許可を求めるという基本的な考え方はすでに理解しています。

コードをコピーします

コードは次のとおりです:

window.addEventListener('load', function () {
// まず、通知の権限があるか確認してみましょう
if (Notification && Notice.permission !== "granted") {
Notice.requestPermission(function (status) {
if (Notification.permission !== status) {
Notice.permission = status;
}
});
}
});

Firefox では検証が成功しましたが、Chrome では常に失敗しました。後でこの段落を見つけました。

コードをコピー

コードは次のとおりです:

バグではありません。機能です。

デスクトップ通知は、
JavaScript コンソールに入力することによってのみ、Web
ページに埋め込まれた生の JavaScript コードと同じ効果があります (ユーザー アクションなし)。ただし、
はユーザー アクションを表します (ユーザーは意図的に JavaScript リンクにアクセスして
通知を有効にしています。おそらく、onclick="" の
の代わりに href="javascript：" を使用する傾向があるサイトの場合です)。 .

これは問題ないと確信しています。

は、Chrome でユーザーが手動でトリガーする必要があることがわかりました。そうしないと、Chrome ブラウザーはこの js を無視します

しかし、ユーザーに明示的に許可するボタンやハイパーリンクを追加することは確かに不可能です。実際には、これはユーザーが頻繁にクリックするボタンを許可するだけで問題ありません。 Chrome では、1 つの認証は生涯有効です。設定に入って彼を禁止しない限り。

まとめると、コードは次のようになります:

コードをコピーします

コードは次のとおりです:

function showMsgNotification(title, msg){
var Notice = window.Notification || window.moz通知 || window.webkitNotification;

if (Notification && Notice.permission === "granted") {
var instance = new Notice(
title, {
body: msg,
icon: "image_url"
}
);

instance.onclick = function () {
// 何かすること
};
instance.onerror = function ( ) {
// やるべきこと
};
instance.onshow = function () {
// やるべきこと
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// 何かすること
};
}else if (Notification && Notice.permission !== "denied") {
Notice.requestPermission(function (status) {
if (Notification.permission !== status) {
Notice.permission = status;
}
// ユーザーが OK と言った場合
if (status === "granted") {
var instance = new Notice(
title, {
body: msg,
icon: "image_url"
}
) ;

instance.onclick = function () {
// やるべきこと
};
instance.onerror = function () {
// やるべきこと
};
instance.onshow = function () {
// やるべきこと
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// 何かすること
};

}else {
return false
}
});
}else{
return false;
}

}