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