用於瀏覽器桌面通知的Web API 接口 -notification

時間 2019-12-10

標籤用於瀏覽器桌面通知 web api 接口 notification 欄目瀏覽器简体版

原文原文鏈接

 接口用於瀏覽器向用戶提供通知內容；常見的如網頁版的微信：

notification

一、實現，須要Notifications API 提供的通知接口：html

用法：promise

let notification = new Notification(title, options)

title參數：用於通知的主題；瀏覽器

options參數：是一個對象；用於配置被通知對象 notification 的屬性；安全

 var options={
    dir://auto自動；ltr 從左到右；rtl 從右到左；
    lang：//指定通知使用的語言；
    body://通知中額外顯示的字符串；
    icon://圖片的URL，用於通知的圖標；
}

var options = {
  body: 'this is a beautiful world',
  dir: 'rtl'
}

var notify1 = new Notification('hello world',options);

console.log(options.body==notify1.body)//true;
console.log(options.dir==notify1.dir)//true;

//options對象的屬性都是綁定到 Notifiaction 的實例對象屬性上的。

僅僅是構造一個Notification 對象的實例還不夠；微信

二、獲取通知權限 Notification.permission：函數

　　granted: //用戶已經明確的授予了顯示通知的權限。.
　　denied: //用戶已經明確的拒絕了顯示通知的權限。
　　default: //用戶還未被詢問是否受權; 這種狀況下權限將視爲 denied.

三、請求用戶權限：測試

Notification.requestPermission()

requestPermission()方法接受一個回調函數；這個回調函數接受一個參數；即requestPermission()返回的 permission 狀態；this

四、完整的通知權限請求：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <button onclick="notify()">點我查看</button>
    </div>
    <script>
//先檢查瀏覽器是否支持
function notify(){
    if (!('Notification' in window)) {
        alert('你的瀏覽器不支持Notification')
    }
//檢查是否擁有通知權限；有就通知，沒有請求；
else if (Notification.permission=='granted') {
    var options={
        icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',
        body:'such a beautiful wolrld!'
    }
    var notification=new Notification('hello wolrld!',options);
}else if (Notification.permission !== 'denied'){
    Notification.requestPermission(
            function(permission){
                if (permission=='granted'){
                    var notification=new Notification('hello wolrld!');
                }
            }
        );
}
}
    </script>
</body>
</html>

須要注意的是；第一次須要申請權限；用戶受權以後就能正常顯示通知內容；用戶若是忽視請求，再次點擊會再次請求；用戶選擇拒絕，則瀏覽器會忽視，代碼終止。code

再次注意的是；Notification.requestPermission(callback)這種回調寫法已經被棄用；取而代之的是基於promise的語法；其中js部分

//先檢查瀏覽器是否支持
function notify(){
    if (!('Notification' in window)) {
        alert('你的瀏覽器不支持Notification')
    }
//檢查是否擁有通知權限；有就通知，沒有請求；
else if (Notification.permission=='granted') {
    var options={
        icon:'http://www.itechat.cn/ya8526/html/images/img10.jpg',
        body:'such a beautiful wolrld!'
    }
    var notification=new Notification('hello wolrld!',options);

}else if (Notification.permission !== 'denied'){
    Notification.requestPermission().then(function(result){
        if(result=='granted'){
            var notification=new Notification('hello wolrld!',options);
        }
    })    
}

}