notification(瀏覽器通知)

時間 2019-12-20

原文原文鏈接

1、notification簡介

Web Notifications是HTML5 的一個特性，目前我知道的有谷歌瀏覽器和windows edge對它進行了支持，用於向用戶配置和顯示桌面通知。javascript

2、notification方法

2.1靜態方法

這些方法僅在 Notification 對象中有效。
Notification.requestPermission()
用於當前頁面想用戶申請顯示通知的權限。這個方法只能被用戶行爲調用（好比：onclick 事件），而且不能被其餘的方式調用。html

2.2實例方法

這些方法僅在 Notification 實例或其 prototype 中有效。
1，Notification.close()
用於關閉通知。
Notification 對象繼承自 EventTarget 接口。
2，EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
3，EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
4，EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.vue

3、notification舉例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style>
            body{position: relative;}
            .notification {
                width: 200px;
                height: 50px;
                padding: 20px;
                line-height: 50px;
                text-align: center;
                background: #008800;
                border-radius: 5px;
                font-size: 30px;
                position: absolute;
                left: 45%;
            }
        </style>
    </head>

    <body>
        <div class="notification" @click="notifyMe()">notification</div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: '.notification',
            data: {},
            methods: {
                notifyMe() {
                    // 先檢查瀏覽器是否支持
                    if(!("Notification" in window)) {
                        alert("This browser does not support desktop notification");
                    }

                    // 檢查用戶是否贊成接受通知
                    else if(Notification.permission === "granted") {
                        // If it's okay let's create a notification
                        var notification = new Notification("你好snowball:", {  
                            dir: "auto",  //auto（自動）, ltr（從左到右）, or rtl（從右到左）
                            lang: "zh",  //指定通知中所使用的語言。這個字符串必須在 BCP 47 language tag 文檔中是有效的。
                            tag: "testTag",  //賦予通知一個ID，以便在必要的時候對通知進行刷新、替換或移除。
                            icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG",  //提示時候的圖標
                            body: "今天是個好天氣"  // 一個圖片的URL，將被用於顯示通知的圖標。
                        }); 
                    }

                    // 不然咱們須要向用戶獲取權限
                    else if(Notification.permission !== 'denied') {
                        Notification.requestPermission(function(permission) {
                            // 若是用戶贊成，就能夠向他們發送通知
                            if(permission === "granted") {
                                var notification = new Notification("你好snowball:", {  
                                    dir: "auto",  //auto（自動）, ltr（從左到右）, or rtl（從右到左）
                                    lang: "zh",  //指定通知中所使用的語言。這個字符串必須在 BCP 47 language tag 文檔中是有效的。
                                    tag: "testTag",  //賦予通知一個ID，以便在必要的時候對通知進行刷新、替換或移除。
                                    icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG",  //提示時候的圖標
                                    body: "今天是個好天氣"  // 一個圖片的URL，將被用於顯示通知的圖標。
                                }); 
                            }
                        });
                    }

                    // 最後，若是執行到這裏，說明用戶已經拒絕對相關通知進行受權
                    // 出於尊重，咱們不該該再打擾他們了
                }
            }
        })
    </script>

</html>