前端HTML5桌面通知

notification api 是 html5 新增的桌面通知 api，用於向使用者顯示通知資訊。該通知是脫離瀏覽器的，即使使用者沒有停留在當前標籤頁，甚至最小化了瀏覽器，該通知資訊也一樣會置頂顯示出來。通過這種方式，就可以利用瀏覽器來為使用者推送訊息啦。facebook的web版本，就已經應用了這個新特性。

**注意：**這個h5特性相容性，不是特別好。建議在新版chrome，firefox，safari上使用。

想要向使用者顯示通知訊息，需要獲取使用者許可權，而相同的網域名稱只需要獲取一次許可權。只有使用者允許的許可權下，notification 才能起到作用，避免某些**的廣告濫用 notification 或其它給使用者造成影響。

請求許可權：

notification.
requestpermission()
.then
(function
(permission)
else
if(permission ===
'denied')}
);

**注意：**chrome使用者授權只有一次，首次後使用時會觸發，如果使用者拒絕後期將不再彈出許可權獲取提示。只能去chrome中手動修改通知許可權。

var notification =
newnotification
(title, options)

notification.
close
()

頁面測試中，發現本地檔案開啟的網頁將不會觸發彈窗，而是不停地跳出使用者授權彈窗。這是因為，chrome在記錄彈窗許可權時，會繫結到網域名稱上，在使用本地檔案開啟時，沒有對應的網域名稱，沒法儲存授權資訊，所有瀏覽器會不停地進行授權彈窗。

在伺服器上，使用http發現頁面不會彈出彈窗，有乙個黃色的警告資訊。

要使用這個必須要使用https進行配置。

瀏覽器畢竟是依存在作業系統中，window設定中的通知模組，必須要允許chrome進行通知，我們才可以收到通知。注意：在開啟window的專注助手後，通知不會跳出，而會被立刻關閉，然後放置到window的通知助手中，等待使用者檢視。

前端HTML5桌面通知

HTML5 桌面通知 Notification

HTML 5 桌面提醒

html5 桌面提醒 Notifycations

前端HTML5桌面通知

HTML5 桌面通知 Notification

HTML 5 桌面提醒

html5 桌面提醒 Notifycations

相關推薦