From 26f758d0cd597e5d3e95881486c50a5a8a33066d Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:06:45 +0530
Subject: [PATCH 1/2] fix(api): remove alert() and update Notification demo

---
 .../using_the_notifications_api/index.md      | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

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..294ffb581782274 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
-<button>Notify me!</button>
+<button id="notify">Notify me!</button>
+<section id="demo-logs"></section>
+```
+
+```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,7 @@ window.addEventListener("load", () => {
 
 ### Result
 
-{{ EmbedLiveSample('Tag_example', '100%', 30) }}
+{{ EmbedLiveSample('Tag_example', '100%', 150) }}
 
 ## See also
 

From 632e38b81c3595667cffdf21db5d98c9c1f95efb Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:46:23 +0530
Subject: [PATCH 2/2] add notification setting note

---
 .../api/notifications_api/using_the_notifications_api/index.md  | 2 ++
 1 file changed, 2 insertions(+)

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 294ffb581782274..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
@@ -222,6 +222,8 @@ window.addEventListener("load", () => {
 
 {{ 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
 
 - {{ domxref("Notification") }}