[Javascript] 取得顯示通知權限,顯示通知
2018-01-10
今天要寫的筆記是關於 顯示通知的服務像是這樣,最近很多網站導入,感覺網站沒來放一個就不潮了..
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>
點下取得顯示通知權限 按鈕後就會出現取的下列權限
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>
結果:
很簡單吧,就看範例就懂了…
如果你是在 Chrome 你要開關顯示通知權限 可以透過這個網址 chrome://settings/content/notifications
標籤:
.Net
,
Javascript
-- Yesterday I wrote down the code. I bet I could be your hero. I am a mighty little programmer. 如果這篇文章有幫助到您,簡單留個言,或是幫我按個讚,讓我有寫下去的動力...