Notification 瀏覽器桌面通知

時間 2019-12-16

原文原文鏈接

1、Notification

Notification是HTML5新增的API，用於想用戶配置和現實桌面通知。這些通知的外觀和特定功能因平臺而異。
Notification通知是脫離瀏覽器的，即便用戶沒有停留在當前的標籤頁，甚至最小化了瀏覽器，也會在主屏幕的右下角顯示通知，而後過一段時間後消失。
Notification在操做中也能夠監聽通知的顯示，點擊，關閉等事件。

2、例子，你試試

// 判斷瀏覽器是否支持Notification
if (window.Notification) {
    switch (Notification.permission) {
        case 'default':
            alert('用戶暫未開啓該網站消息通知');
            defaultPermission();
            break;
        case 'granted':
            alert('用戶已開啓該網站消息通知');
            showNotification();
            break;
        case 'denied':
            alert('用戶拒絕該網站消息通知');
            break;
    }
} else {
    alert('暫不支持消息通知');
}

function defaultPermission() {
    Notification.requestPermission().then(permission => {
        switch (permission) {
            case 'default':  
                break;
            case 'granted':
                showNotification();
                break;
            case 'denied':
                alert('用戶仍是拒絕了該網站消息通知');
                break;
        }
    });
}

function showNotification() {
    new Notification('我是消息通知！');
}
複製代碼

注意：若是第一次在域名控制檯中執行上述代碼，會提示你是否開啓通知。若是開啓過，就會自動顯示通知。 javascript

注意：若是以前在域名中禁止消息通知，能夠本身手動在開啓，Notification是不能在禁止狀態下代碼設計開啓消息通知的。 java

用戶拒絕顯示通知：promise

一旦用戶禁止網站顯示通知，網站就不能再請求用戶受權顯示通知，須要用戶去設置中更改。瀏覽器

已谷歌爲例，在瀏覽器設置中，開始添加或者開始網站的消息通知。不一樣的瀏覽器通知設置的地方不太同樣。 bash

3、Notification檢測權限

// 判斷瀏覽器是否支持Notification
if (window.Notification) {
    switch (Notification.permission) {
        case 'default':
            alert('用戶暫未開啓該網站消息通知');
            break;
        case 'granted':
            alert('用戶已開啓該網站消息通知');
            break;
        case 'denied':
            alert('用戶拒絕該網站消息通知');
            break;
    }
} else {
    alert('暫不支持消息通知');
}
複製代碼

爲了不網站濫用通知擾民，在向用戶顯示通知以前，須要通過用戶贊成。函數

Notification.permission 用於代表當前通知顯示的受權狀態,它有三個值：網站

default: 默認值，用戶還未選擇
granted: 用戶容許該網站發送通知
denied: 用戶拒絕該網站發送通知

4、Notification請求權限

Notification.requestPermission().then(permission => {
    switch (permission) {
        case 'default':
            alert('用戶關閉了受權');
            break;
        case 'granted':
            alert('用戶贊成受權')
            break;
        case 'denied':
            alert('用戶仍是拒絕了該網站消息通知');
            break;
    }
});
複製代碼

當Notification.permission爲default的時候，咱們須要使用Notification.requestPermission()來請求用戶權限。 Notification.requestPermission()基於promise語法，then的回調函數參數是用戶權限的狀態Notification.permission的值。

5、Notification推送通知

當Notification.permission爲granted時，請求到用戶權限以後，沒必要當即發送通知，能夠在任意時刻，以任意形式來發送通知。ui

onst title = '這是自定義消息通知';
const options = {
    body: 'body：字符串。通知的body內容。',
    dir: 'auto',
    icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
複製代碼

Notification的參數：this

1. title：消息通知標題spa

2. options：

body 只讀在構造函數的options參數中指定的通知的正文字符串。
data 只讀返回通知數據的結構化克隆。
dir 只讀通知的文本方向，在構造函數的options參數中指定。
lang 只讀在構造函數的options參數中指定的通知的語言代碼。
tag 只讀在構造函數的options參數中指定的通知的ID（若是有）。
icon 只讀在構造函數的options參數中指定的用做通知圖標的圖像的URL 。
image 只讀要在通知中顯示的圖像的URL，在構造函數的options參數中指定。
renotify 只讀指定在新通知替換舊通知後是否應通知用戶。
requireInteraction 只讀甲Boolean指示通知應該保持有效，直到用戶點擊或將其關閉，而不是自動關閉。
silent 只讀指定通知是否應該保持靜音-即，不管設備設置如何，都不會發出聲音或振動。
timestamp 只讀指定建立或適用通知的時間（過去，如今或未來）。
title 只讀在構造函數的第一個參數中指定的通知的標題。
vibrate 只讀爲帶有振動硬件的設備指定振動模式。

6、Notification事件處理

click：用戶點擊通知時被觸發
show：通知顯示的時候觸發
error：通知遇到錯誤的時候觸發
close：通知被關閉的時候觸發

const title = '這是自定義消息通知';
const options = {
    body: 'body：字符串。通知的body內容。',
    dir: 'auto',
    icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
notification.onclick = e => {
    alert(1);
}
notification.onclose = e => {
    alert(2);
}
notification.onshow = e => {
    alert(3);
}
notification.onerror = e => {
    alert(4);
}
複製代碼

7、Notification使用場景

即時通信的軟件中可使用，如郵件通知。聊天的通知。
結果通知，如福利彩票結果通知。
新聞通知，如新聞網站的新聞通知。
網站更新，如在系統進行了迭代更新，能夠進行通知。

8、示例完整代碼

<template>
    <div>
        <button @click="grantedPermission">彈出消息</button>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {
        }
    },
    created() {
        // 判斷瀏覽器是否支持Notification
        if (window.Notification) {
            switch (Notification.permission) {
                case 'default':
                    this.defaultPermission();
                    break;
                case 'granted':
                    this.grantedPermission();
                    break;
                case 'denied':
                    alert('用戶拒絕該網站消息通知');
                    break;
            }
        } else {
            alert('暫不支持消息通知');
        }
    },
    methods: {
        /**
         * [defaultPermission 當用戶拒絕消息通知時，能夠詢問用戶是否開啓消息通知]
         * @version  [1.0]
         */
        defaultPermission() {
            Notification.requestPermission().then(permission => {
                switch (permission) {
                    case 'default':  
                        break;
                    case 'granted':
                        this.grantedPermission();
                        break;
                    case 'denied':
                        alert('用戶仍是拒絕了該網站消息通知');
                        break;
                }
            });
        },
        /**
         * [grantedPermission 運行消息通知狀態，能夠向發起消息通知]
         */
        grantedPermission() {
            const title = '這是自定義消息通知';
            const options = {
                body: 'body：字符串。通知的body內容。',
                dir: 'auto',
                icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
            };
            const notification = new Notification(title, options);
            notification.onclick = e => {
                alert(1);
            }
            notification.onclose = e => {
                alert(2);
            }
            notification.onshow = e => {
                alert(3);
            }
            notification.onerror = e => {
                alert(4);
            }
        }
    }
}
</script>
複製代碼