資訊專欄INFORMATION COLUMN
摘要：一些情況下，我們希望網(wǎng)頁可以直接向桌面推送消息。查看一個簡單的例子請求權(quán)限彈出一個通知兩秒后關(guān)閉通知首先，我們需要判斷瀏覽器是否支持。如果通過向用戶請求權(quán)限，這是瀏覽器會彈出一個是否允許顯示通知的提示如果用戶選擇了允許，那么返回的將會是。
一些情況下，我們希望網(wǎng)頁可以直接向桌面推送消息。本文利用 HTML5 的 Web Notifications API 來展示具體的代碼該如何編寫，同時來看一看這個特性在各個瀏覽器上的兼容性如何。
查看DEMO
一個簡單的例子javascript if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) { // 請求權(quán)限
if(status === "granted") {
// 彈出一個通知
var n = new Notification("Title", {
body : "I am a Notification",
icon : "./images/test1.png"
});
// 兩秒后關(guān)閉通知
setTimeout(function() {
n.close();
}, 2000);
}
});
}
首先，我們需要判斷瀏覽器是否支持Notification。如果通過Notification.requestPermission向用戶請求權(quán)限，這是瀏覽器會彈出一個是否允許顯示通知的提示：
如果用戶選擇了“允許”，那么返回的status將會是granted。這個時候我們就可以通過Notification()來創(chuàng)建實(shí)例了：
new Notification("Title", {
body : "I am a Notification",
icon : "./images/test1.png"
})
第一個參數(shù)為標(biāo)題，第二個參數(shù)為配置參數(shù)，里面包含以下可選參數(shù)：
效果圖如下（Chrome）：
接下來，兩秒后，通知將會消失。
兼容性Web Notifications API目前在以下瀏覽器得到了支持：
Firefox 35+
Chrome 31+
Safari 7.1+
Opera 27+
Android Browser 4.4+ （需要加上webkit前綴）
詳情點(diǎn)擊這里
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85547.html
摘要：據(jù)猜測是為瀏覽器翻譯服務(wù)。通知內(nèi)容，顯示在通知標(biāo)題之下，默認(rèn)為空字符串標(biāo)記通知的類型，打上標(biāo)簽，默認(rèn)為空字符串。在最新的技術(shù)評審稿中，該參數(shù)被舍棄設(shè)置該標(biāo)志表示最終用戶將不能很容易地清除。設(shè)置該標(biāo)志，通知將為永久型通知。 Web Notification 網(wǎng)頁通知API。這是2011年由谷歌技術(shù)員John Gregg提出的一項(xiàng)網(wǎng)頁通知api。 定義 請讀者直接參考whatwg工作組對...
摘要：返回值有三種情況用戶還未被詢問是否授權(quán)，所以通知不會被顯示。用戶已經(jīng)明確的拒絕了顯示通知的權(quán)限。非必須，默認(rèn)為表示要顯示指定通知是否應(yīng)該粘滯性，即不容易被用戶清理。 本文發(fā)布在我的博客H5的Notification特性 - Web的桌面通知功能許可協(xié)議: 署名-非商業(yè)性使用-禁止演繹 4.0 國際 轉(zhuǎn)載請保留原文鏈接及作者。 目前，web網(wǎng)頁使用桌面通知功能的越來越多，包括微博...
閱讀 2773·2023-04-25 17:21
閱讀 2627·2021-11-23 09:51
閱讀 2936·2021-09-24 10:32
閱讀 3899·2021-09-23 11:33
閱讀 2036·2019-08-30 15:44
閱讀 3521·2019-08-30 11:18
閱讀 3628·2019-08-30 10:53
閱讀 701·2019-08-26 13:25
