diff --git a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md index 0466332ac83ab5c..d0308f0c18940c3 100644 --- a/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/en-us/web/api/notifications_api/using_the_notifications_api/index.md @@ -145,50 +145,59 @@ To do this, it's possible to add a tag to any new notification. If a notificatio Assume the following basic HTML: ```html - + +
+``` + +```css hidden +#demo-logs { + width: 90%; + height: 100px; + background-color: #ddd; + overflow-x: auto; +} ``` It's possible to handle multiple notifications this way: ```js +const demoLogs = document.querySelector("#demo-logs"); + window.addEventListener("load", () => { - const button = document.querySelector("button"); - - if (window.self !== window.top) { - // Ensure that if our document is in a frame, we get the user - // to first open it in its own tab or window. Otherwise, it - // won't be able to request permission to send notifications. - button.textContent = "View live result of the example code above"; - button.addEventListener("click", () => window.open(location.href)); - return; - } + const button = document.querySelector("#notify"); button.addEventListener("click", () => { if (Notification?.permission === "granted") { + demoLogs.innerText += `The site has permission to show notifications. Showing notifications.\n`; // If the user agreed to get notified // Let's try to send ten notifications let i = 0; // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time. const interval = setInterval(() => { - // Thanks to the tag, we should only see the "Hi! 9" notification - const n = new Notification(`Hi! ${i}`, { tag: "soManyNotification" }); + // Thanks to the tag, we should only see the "Hi no 9 from MDN." notification + const n = new Notification(`Hi no ${i} from MDN.`, { + tag: "soManyNotification", + }); if (i === 9) { clearInterval(interval); } i++; }, 200); } else if (Notification && Notification.permission !== "denied") { + demoLogs.innerText += "Requesting notification permission.\n"; // If the user hasn't told if they want to be notified or not // Note: because of Chrome, we are not sure the permission property // is set, therefore it's unsafe to check for the "default" value. Notification.requestPermission().then((status) => { // If the user said okay if (status === "granted") { + demoLogs.innerText += + "User granted the permission. Sending notifications.\n"; let i = 0; // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time. const interval = setInterval(() => { // Thanks to the tag, we should only see the "Hi! 9" notification - const n = new Notification(`Hi! ${i}`, { + const n = new Notification(`Message no ${i} from MDN.`, { tag: "soManyNotification", }); if (i === 9) { @@ -198,12 +207,12 @@ window.addEventListener("load", () => { }, 200); } else { // Otherwise, we can fallback to a regular modal alert - alert("Hi!"); + demoLogs.innerText += `User denied the permission request.\n`; } }); } else { // If the user refuses to get notified, we can fallback to a regular modal alert - alert("Hi!"); + demoLogs.innerText += `The site does not have permission to show notifications.\n`; } }); }); @@ -211,7 +220,9 @@ window.addEventListener("load", () => { ### Result -{{ EmbedLiveSample('Tag_example', '100%', 30) }} +{{ EmbedLiveSample('Tag_example', '100%', 150) }} + +To test the above example, change the [send notification setting](https://support.mozilla.org/en-US/kb/firefox-page-info-window#w_permissions) for the `https://live.mdnplay.dev` website. ## See also