HTML5 Notification

時間 2019-11-19

原文原文鏈接

H5的Notification特性

Web桌面通知

Notification API的通知接口用於向用戶配置和顯示桌面通知。
生產環境僅支持https下使用；不然會被默認禁止。開發環境能夠在localhost或者127.0.0.1下調用。javascript

1. 構造方法

const notification = new Notification(title, options)

title 通知標題

options 可選

用來設置通知的對象。html

dir 值包括auto(自動)，ltr(從左到右)，rtl(從右到左)。
lang 指定通知中所使用的語言。
body 通知中額外顯示的字符串。
image string，正文圖片地址。
tag 賦予通知一個ID，以便在必要的時候對通知進行刷新、替換或移除。
icon 一個圖片的URL，將被用於顯示通知的圖標。
data 任意類型和通知相關聯的數據；經常使用於方法的回調參數。
timestamp string，通知顯示延遲時間。
badge 當沒有足夠空間來顯示通知本體時，用於表示通知的圖像的URL。
renotify bool值，新通知出現是否替換以前的，true表示替換，不然隊列顯示。【chrome無明顯效果，FF能夠顯示，見圖1-1】
silent bool，通知出現的時候，是否靜音；默認false。
vibrate 通知顯示的時候，設備震動，好比：[200, 100, 200]表示震動200ms，而後中止100ms，而後再震動200ms。【設置此屬性，silent必須爲false，不然會拋出錯誤】
sound string，表示通知出現要播放的音頻資源。【windows實測無效】
noscreen bool，是否再也不屏幕上顯示通知信息。默認false。
sticky bool，是否應該粘滯性，即不容易被用戶清理。默認false。
requireInteraction bool，指定通知是否保持活性，知道用戶點擊或關閉；默認false。

2. 屬性

2.1 靜態屬性

`Notification.permission`

只讀屬性。一個用於代表當前通知顯示受權狀態的字符串。java

denied 用戶拒絕顯示通知
granted 用戶容許顯示通知
default 用戶未受權操做，行爲等同於denied

2.2 實例屬性

2.2.1 `Notification.title`

只讀，獲取構造方法中指定的title值。
如下屬性類同。web

2.2.2 `Notification.dir`

2.2.3 `Notification.lang`

2.2.4 `Notification.body`

2.2.5 `Notification.tag`

2.2.6 `Notification.icon`

2.2.7 事件處理

`Notification.onclick`

處理click事件。當用戶點擊通知時被觸發。chrome

`Notification.onshow`

當通知顯示的時候被觸發。windows

`Notification.onerror`

當通知遇到錯誤時觸發。瀏覽器

`Notification.onclose`

當用戶關閉通知時觸發。dom

3. 方法

3.1 靜態方法

`Notification.requestPermission()`

用於當前頁面向用戶申請顯示通知的權限。
這個方法只能被用戶行爲調用，不能被其它方式調用。async

3.2 實例方法

`Notification.close()`

關閉通知。ui

4. 示例

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Notification</title>
</head>
<body>

<button onclick="notification.show()">有MM要加你爲好友！</button>

<script type="text/javascript">
    const NOTIFICATION_PERMISSION = Object.create(null, {
        GRANTED: { value: 'granted' },
        DENIED: { value: 'denied' },
        DEFAULT: { value: 'default' }
    });
    const notification = {
        show() {
            if (!('Notification' in window)) {
                console.warn('當前瀏覽器不支持！若是想加MM請當即升級瀏覽器！');
                return;
            }

            if (Notification.permission !== NOTIFICATION_PERMISSION.GRANTED) {
                // 未受權
                this.permission();
                return;
            }

            this.notify();
        },
        async permission() {
            const permission = await Notification.requestPermission();
            if (permission === NOTIFICATION_PERMISSION.GRANTED) {
                this.notify();
                return;
            }
            alert('您已拒絕MM好友邀請！');
        },
        notify() {
            const notification = new Notification('Hi, 有MM想要加你爲好友！', {
                tag: Math.random().toString(16).substring(2, 8) + (+new Date()),
                icon: './img/wxlogo.png',
                body: '一位漂亮MM距離你0.01km，請接收她的好友邀請吧~',
                image: './img/user-img-girl.jpg',
                lang: 'zh-cmn-Hans',
                sound: './audio/HOT PINK.mp3',
                renotify: false,
                silent: false,
                vibrate: [300, 100, 200, 100, 100],
                noscreen: false,
                sticky: true,
                requireInteraction: true
            });

            notification.onclick = function () {
                console.log('用戶點擊了通知');
                window.open('https://www.google.com');
            };

            notification.onshow = function () {
                console.log('通知顯示了');
            };

            notification.onclose = function () {
                console.log('通知被關閉了');
            };

            setTimeout(() => {
                notification.close();
            }, 30000);
        }
    };
</script>

</body>
</html>

圖4-1