[Javascript] 取得顯示通知權限,顯示通知

2018-01-10


今天要寫的筆記是關於 顯示通知的服務像是這樣,最近很多網站導入,感覺網站沒來放一個就不潮了..

Image 585

Step 1 . 取的權限,因為必須取的顯示通知的權限才可以之後發動顯示通知

    <!-- Get Permsiion -->
    <button type="button" id="btnGetNotification">取得顯示通知權限</button>

    <script>
        $('#btnGetNotification').click(function () {

            if (Notification && Notification.permission === 'default') {
                Notification.requestPermission(function (permission) {
                    if (!('permission' in Notification)) {
                        Notification.permission = permission;
                    }
                });
            }
            else if (Notification.permission === 'granted') {
                alert('已經有取得權限了!');
            }
            else {
                alert('請檢查是否你的瀏覽器支援');
            }
        });
    </script>


點下取得顯示通知權限 按鈕後就會出現取的下列權限

image


Step2. 顯示通知

    <!-- Display Notification -->
    <button type="button" id="btnShowNotification">跑一個顯示通知範例</button>
    <script>

        var notification = null;
        function ShowNotification(title, body) {
            notification = new Notification(title, {
                icon: '/icon/ms-icon-310x310.png',
                body: body,
                onclick: function () {
                    parent.focus();
                    window.focus(); //just in case, older browsers
                    this.close();
                }
            })
        }

        $('#btnShowNotification').click(function () {
            if (Notification && Notification.permission === 'default') {
                Notification.requestPermission(function (permission) {
                    if (!('permission' in Notification)) {
                        Notification.permission = permission;
                    }
                });
            }
            else if (Notification.permission === 'granted') {
                ShowNotification("測試標題", "測試內文");
                //三秒後自動關閉
                setTimeout(notification.close.bind(notification), 3000);
            }
            else {
                alert('請檢查是否你的瀏覽器支援');
            }
        });
    </script>


結果:

Image 585


很簡單吧,就看範例就懂了…

如果你是在 Chrome 你要開關顯示通知權限 可以透過這個網址  chrome://settings/content/notifications


當麻許的超技八 2014 | Donma Hsu Design.