Notification（通知）：利用JavaScript 實作瀏覽器推播通知

目前支援的主流瀏覽器有Chrome（42+ 才能與Service Worker 合用）、Firefox（22+）、Safari（6+）、Opera（25+）和Edge。

以下程式碼檢查瀏覽器是否支援 ... Summer。

桑莫。

夏天 ❤️🍰🌹🎬🚴‍♀️🏋️‍♀️💻🚀💜 這裡記錄了我的前端學習和開發筆記，歡迎交流(*´∀`)~♥ 關於我、所有文章和標籤列表 關於我 所有文章 標籤列表 ©2022.Allrightsreserved. Notification（通知）：利用JavaScript實作瀏覽器推播通知 09Jul2017 PushNotification javascript 讀書會 概述 實作瀏覽器推播通知的過程以下面的流程圖表示，會經過幾個步驟：瀏覽器支援度檢查、請求授權、建立通知、發出通知、分門別類通知、事件處理和錯誤處理。

備註 老舊瀏覽器可能會有undefined狀況 使用標籤（Tag）做為分類通知的依據和決定新舊通知的顯示狀況 瀏覽器支援度檢查 目前支援的主流瀏覽器有Chrome（42+才能與ServiceWorker合用）、Firefox（22+）、Safari（6+）、Opera（25+）和Edge。

以下程式碼檢查瀏覽器是否支援通知，若支援則可建立通知，否則提示不支援。

if(!('Notification'inwindow)){ console.log('Thisbrowserdoesnotsupportnotification'); } 使用者授權 使用者提供的權限分為三種：「granted」（同意）、「denied」（拒絕）和「default」（未授權），其中老舊瀏覽器可能會有undefined的狀況。

請求授權 若使用者從未授權過（default）或undefined（老舊瀏覽器的未知狀態），可使用Notification.requestPermission請求使用者授權，接受通知。

if(Notification.permission==='default'||Notification.permission==='undefined'){ Notification.requestPermission(function(permission){ //permission可為「granted」（同意）、「denied」（拒絕）和「default」（未授權） //在這裡可針對使用者的授權做處理 }); } 對使用者提出請求後，瀏覽器上方會出現對話框（RequestDialog）。

建立通知 若使用者同意授權，則可建立通知。

其中通知的title是必須的，其他都是optional。

如下範例，設定通知的title為「Hithere!」，第二個參數（在此包裝為notifyConfig）設定body（通知的內容）為「\^o^/」、icon放置圖片網址，圖片網址可為相對或絕對路徑。

一旦使用者同意授權通知，即建立一個新的通知，就會在右下角看到。

varnotifyConfig={ body:'\\^o^/',//設定內容 icon:'/images/favicon.ico',//設定icon }; if(Notification.permission==='default'||Notification.permission==='undefined'){ Notification.requestPermission(function(permission){ if(permission==='granted'){ //使用者同意授權 varnotification=newNotification('Hithere!',notifyConfig);//建立通知 } }); } 成功建立新通知！ 標籤（Tag） 用來做為分類通知的依據和決定新舊通知的顯示狀況。

建立通知時可設定通知的標籤，若新通知的標籤已在先前出現過，新通知會關閉舊通知，只留下新通知；若沒有出現過，新舊通知會一起出現。

varnotify=newNotification(Hithere!,{ body:'\\^o^/', icon:'/images/favicon.ico', tag:'newArrival'//設定標籤 }); 在下圖範例中，假設要建立三種通知： 第一種是沒有設定標籤的，範例中會建立1個通知。

第二種是標籤為「newArrival」，每1秒建立一次。

範例中會建立10個通知，編號0~9。

第三種是標籤為「newFeature」，每0.5秒建立一次。

範例中會建立10個通知，編號0~9。

由下圖可知，同一時間，同一種標籤只會出現一個通知。

點擊通知 設定點擊通知之後做些什麼，例如打開特定網頁。

varnotify=newNotification(Hithere!,{ body:'\\^o^/', icon:'/images/favicon.ico' }); notify.onclick=function(e){//綁定點擊事件 e.preventDefault();//preventthebrowserfromfocusingtheNotification'stab window.open('http://sample.com./');//打開特定網頁 } 錯誤處理 接收錯誤事件並做處理。

notify.onerror=function(e){ //errorhandling }; 資料來源：NotificationsAPI 範例 附上露天讀書會投影片-利用JavaScript實作瀏覽器推播通知。

利用JavaScript實作瀏覽器推播通知fromHsin-HaoTang 標籤： PushNotification javascript 讀書會 commentspoweredbyDisqus RecentPosts HelloLambdaFunction 28Sep2022 精通Go程式設計-程式結構|閱讀筆記 01Sep2022 VisualTesting：忽略特定元件 17Aug2022