Notification桌面提醒 HTML5新功能

2021-07-22 23:32:00 字數 2014 閱讀 3242

1.notification介紹

window.notification,是乙個通過瀏覽器呼叫桌面彈窗的api,具體效果如下

如今支援notification基礎功能的瀏覽器有chrome,firefox,opera,safari(ie在角落默默畫圈);

支援notification的option.icon功能的有chrome,firefox;

支援notification的option.sound功能的到現在為止,沒有。重要的事情說3遍:沒有!沒有!沒有!

2. notification基本用法

首先,不是每個瀏覽器都支援notification的(說你呢,ie還有edge),所以我們首先需要判斷瀏覽器是否支援if(window.notification)

其次,由於是呼叫桌面彈窗性質的高階api,使用者預設是無視彈窗api呼叫的,所以應該詢問使用者是否開啟通知功能if(notification.permission=="granted");

這裡說明一下,notification.permission有3種狀態:default(預設無視)granted(同意通知)denied(拒絕通知)

最後,當一切就緒,我們就可以呼叫api了,栗子如下:

new

notification("宣言",)

這裡的方法notification(title[,options])有兩個引數,第乙個為標題,第二個則為可選的配置;options是乙個物件,基本的屬性及例值如下

var options = ;
這裡不多說了,相信看官也猜的**不離十了

下面放一段完整地碼

lang="en">

charset="utf-8">

titletitle>

head>

id="soundfx">

src="2.***"/>

123audio>

id="notifybutton">messagebutton>

id="requestbutton">requestbutton>

var dir = window.location;

var notibtn = document.getelementbyid("notifybutton");

var reqbtn = document.getelementbyid("requestbutton");

notibtn.onclick=function

() ;

var notice = new notification("宣言",options);

}else

}else

}script>

body>

html>

效果如下

4. 高階用法略寫

通過new notification(title[,options])生成的自定義變數物件notice可以繫結諸多事件:error, click, show, close;並且可以呼叫notice.close()方法將彈窗直接關閉而不需要等待延時;

另外,options還有乙個actions屬性,此屬性關乎另外乙個新技術serviceworker或者說web worker的一部分,有興趣的同學可以一看

Notification 詳細運用

setcontentview r.layout.activity main notificationmanager獲取notification service final notificationmanager notificationmanager notificationmanager gets...

Notification高度問題

最近用到了自定義的notification布局 高度突然顯示不全,是因為在預設情況下低版本只有 builder.setcontent remoteviews 預設高度64 超出則顯示不全 而在api16 以上提供了bigcontenteview builder.setcustombigcontent...

高階Notification技巧

在接下來的章節,你將學習如何增強 notification 功能 通過硬體來提供額外的警示,如讓裝置響鈴 閃光和振動。上述描述的每個增強功能,你都將看到乙個 片段,你可以將它們新增到 earthquake 例子中,在每次檢測到 時,都會給使用者提供反饋。在這裡描述的 notification 技巧中...