Web Notification(Push)_使用html5原生Notification桌面通知
Web Notifications API 可將通知傳送至頁面以外的系統層級並顯示通知。
因此即使 Web Apps 處於閒置狀態，亦可傳送資訊予使用者。
https://www.bennish.net/web-notifications.html
Web Notifications 技術使頁面可以發出通知，通知將被顯示在頁面之外的系統層面上。
能夠為用戶提供更好的體驗，即使用戶忙於其他工作時也可以收到來自頁面的消息通知，
例如一個新郵件的提醒，或者一個在線聊天室收到的消息提醒等等。
在 Apps 傳送通知之前，使用者必須先許可 Apps 的動作。只要 APIs 嘗試予網頁之外的東西互動，均必須先獲得使用者的授權。如此可避免濫發通知而影響使用經驗。
透過 Notification.permission 唯讀屬性，
要傳送通知的 Apps 將檢查目前的授權狀態。此屬性共有 3 組參數：
- default：使用者尚未給予任何權限 (因此不會顯示任何通知)
- granted：使用者允許接收到 Apps 的通知
- denied：使用者拒絕接收 Apps 的通知
但在實際上到主機時候
會必須要有SSL才能work
程式碼範例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <button>點擊發起通知</button> </body> <script> if (!window.Notification) { console.log("Browser does not support notifications."); } else { // display message here } window.addEventListener("load", function () { // 先檢查我們是否有權限發出通知 // 如果沒有，我們就請求獲得權限 if (window.Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { console.log("起初:" + status); if (Notification.permission !== status) { Notification.permission = status; } }); } var button = document.getElementsByTagName("button")[0]; button.addEventListener("click", function () { // 如果同意就創建通知 if (window.Notification && Notification.permission === "granted") { var n = new Notification("Hi！"); } // 如果沒有選擇是否顯通知 // 注：因為在 Chrome 中我們無法確定 permission 屬性是否有值，因此 // 檢查該屬性的值是否是 "default" 是不安全的。 else if (window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function (status) { console.log("起初:" + status); if (Notification.permission !== status) { Notification.permission = status; } console.log(status); // 如果同意了 if (status === "granted") { console.log("同意:"+status); var n = new Notification("Hi! Notification"); } // 否則 else { console.log("沒同意:"+status); alert("Hi! not granted"); } }); } // 如果拒絕接受通知 else { alert("Hi!"); } }); }); </script> </html> |
留言
張貼留言