fix(api): remove alert() and update Notification demo (mdn#34734)

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,20 +207,22 @@ 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`;
     }
   });
 });
 ```
 
 ### 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