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