O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

利用 JavaScript 實作瀏覽器推播通知

21.558 visualizações

Publicada em

利用 JavaScript 實作瀏覽器推播通知

Publicada em: Internet
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Dating direct: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

利用 JavaScript 實作瀏覽器推播通知

  1. 1. 利用 JavaScript 實作瀏覽器推播通知 Summer Tang 2017 / 08 / 18
  2. 2. Agenda - 瀏覽器支援度 - 使用者授權 - 建立通知 - 標籤 - 事件綁定 - 錯誤處理 - 範例
  3. 3. Push Message - Notification API:建立和發送通知 - Push API:使用 Service Worker 接收通知
  4. 4. 流程 開始 瀏覽器 是否支 援? 使用者 是否授 權? 請求授權 建立通知 發出通知 結束 否 是 同意(granted,使用者已授權過) 尚未要求 授權 (default) 拒絕 (denied) 點擊通知 錯誤處理
  5. 5. 瀏覽器支援度檢查 檢查瀏覽器是否支援通知,若支援則可建立通知,否則提示不支援。 if (!('Notification' in window)) { console.log('This browser does not support notification'); }
  6. 6. Browser Support 目前支援的主流瀏覽器有 - Chrome:42+ 才能與 Service Worker 合用 - Firefox:22+ - Safari:6+ - Opera:25+ - Edge Can I use Web Notifications:由於不是每個 feature 都已被瀏覽器實作,所 以使用前要先查詢支援度。
  7. 7. 使用者授權 使用者提供的權限分為三種 - granted(同意) - denied(拒絕) - default(未授權),老舊瀏覽器可能會有 undefined 的狀況。
  8. 8. 請求授權 若使用者從未授權過(default)或 undefined(老舊瀏覽器的未知狀態),可使 用 Notification.requestPermission 請求使用者授權,接受通知。 if (Notification.permission === 'default' || Notification.permission === 'undefined') { Notification.requestPermission(function (permission) { // 取得使用者授權後,在這裡處理授權結果 }); }
  9. 9. 請求授權
  10. 10. 建立通知 若使用者同意授權,則可建立通知。其中通知的 title 是必須的,其他都是 optional。 var notifyConfig = { body: ' ^o^ /', // 設定內容 icon: '/images/favicon.ico' // 設定 icon }; var notification = new Notification('Hi there!', notifyConfig); // 建立通知
  11. 11. 建立通知
  12. 12. 標籤 功用 - 分類 - 決定新舊通知的顯示狀況 var notify = new Notification(Hi there! , { body: ' ^o^ /', icon: '/images/favicon.ico', tag: 'newArrival' // 設定標籤 });
  13. 13. 新舊通知的顯示狀況 新舊通知的顯示狀況: - 若標籤已在先前出現過,新通知會關閉 舊通知,只留下新通知 - 若標籤沒有出現過,新舊通知會一起出 現 同一時間,同一種標籤只會出現一個通知。 https://codepen.io/cythilya/pen/RZQPQO?e ditors=1010
  14. 14. 事件綁定 - 點擊通知 設定點擊通知之後做些什麼,例如打開特定網頁。 var notify = new Notification(Hi there! , { body: ' ^o^ /', icon: '/images/favicon.ico' }); notify.onclick = function() { // 綁定點擊事件 window.open('http://sample.com./'); // 打開特定網頁 }
  15. 15. 錯誤處理 接收錯誤事件並做處理。 notify.onerror = function(e) { // error handling }
  16. 16. 範例 https://codepen.io/cythilya/pen/RZQPQO?editors=1010

×