mdn · wbamberg · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025
@@ -66,6 +66,11 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "navigation-api" directory contains a basic example that demonstrates some features of the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API). [Run the demo live](https://mdn.github.io/dom-examples/navigation-api/).
 
+- The "notifications" directory contains one example showing how to make and handle persistent notifications, and another showing how to make and handle non-persistent notifications, using the [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API).
+
+  - [Run the persistent notifications demo](https://mdn.github.io/dom-examples/notifications/persistent/).
+  - [Run the non-persistent notifications demo](https://mdn.github.io/dom-examples/notifications/non-persistent/)
+
 - The "payment-request" directory contains examples of the [Payment Request API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API).
 
 - The "pointerevents" directory is for examples and demos of the [Pointer Events](https://developer.mozilla.org/docs/Web/API/Pointer_events) standard.

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Non-persistent notifications</title>
+    <script src="page.js" defer></script>
+  </head>
+
+  <body>
+    <button id="notify-me">Notify me!</button>
+
+    <p>
+      This website shows how to make and handle non-persistent notifications.
+    </p>
+
+    <p>When we click the "Notify me!" button, the website does the following:</p>
+    <ol>
+      <li>
+        Checks whether the website has permission to show notifications, asking
+        for permission if necessary.
+      </li>
+      <li>If permission is granted, starts a one-second timer.</li>
+      <li>
+        When the timer expires, creates a non-persistent notification using the
+        <code>Notification()</code> constructor.
+      </li>
+      <li>
+        Adds event handlers to the main events dispatched on the
+        <code>Notification</code> interface.
+      </li>
+    </ol>
+
+    <p>
+      When the notification is shown, the user clicks it, or the user closes it,
+      the corresponding event handler runs and logs the event.
+    </p>
+  </body>
+</html>
@@ -0,0 +1,24 @@
+const notifyMe = document.querySelector("#notify-me");
+notifyMe.addEventListener("click", async () => {
+	const permission = await Notification.requestPermission();
+
+	if (permission === "granted") {
+		setTimeout(() => {
+			const notification = new Notification("Hello!");
+
+			notification.addEventListener("show", () => {
+				console.log("showing!");
+			});
+
+			notification.addEventListener("click", () => {
+				console.log("clicked!");
+			});
+
+			notification.addEventListener("close", () => {
+				console.log("closed!");
+			});
+		}, 1000);
+	} else {
+		console.log("Permission to show notifications was not granted");
+	}
+});
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Donut</title>
+  </head>
+
+  <body>
+    <p>Enjoy your donut!</p>
+  </body>
+</html>
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Tea</title>
+  </head>
+
+  <body>
+    <p>Enjoy your tea!</p>
+  </body>
+</html>
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Persistent notifications</title>
+    <script src="page.js" defer></script>
+  </head>
+
+  <body>
+    <button id="notify-me">Notify me!</button>
+
+    <p>This website shows how to make and handle persistent notifications.</p>
+
+    <p>
+      It registers a service worker, whose job is to handle notifications. When
+      the "Notify me!" button is clicked, the website does the following:
+    </p>
+    <ol>
+      <li>
+        Checks whether the website has permission to show notifications, asking
+        for permission if necessary.
+      </li>
+      <li>If permission is granted, starts a one-second timer.</li>
+      <li>
+        When the timer expires, gets the service worker registration, waiting
+        for it to become active if necessary.
+      </li>
+      <li>
+        Calls <code>registration.showNotification()</code>, passing in two
+        actions.
+      </li>
+    </ol>
+
+    <p>
+      The notification presents the actions to the user. If the user clicks the
+      notification, then the browser starts the service worker, if it is not
+      already running, and dispatches the
+      <code>notificationclick</code> event. If the user selected an action, then
+      the event object includes the selected action.
+    </p>
+
+    <p>
+      The service worker's <code>notificationclick</code> handler checks the
+      value of the event's <code>action</code>, and responds by opening the
+      appropriate web page.
+    </p>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+navigator.serviceWorker.register("sw.js");
+
+const notifyMe = document.querySelector("#notify-me");
+notifyMe.addEventListener("click", async () => {
+  const permission = await Notification.requestPermission();
+
+  if (permission === "granted") {
+    setTimeout(async () => {
+      const registration = await navigator.serviceWorker.ready;
+      registration.showNotification("Hello!", {
+        actions: [
+          { action: "donut", title: "Eat a donut" },
+          { action: "tea", title: "Drink a cup of tea" },
+        ],
+      });
+    }, 1000);
+  } else {
+    console.log("Permission to show notifications was not granted");
+  }
+});
@@ -0,0 +1,10 @@
+self.addEventListener("notificationclick", (event) => {
+  switch (event.action) {
+    case "donut":
+      clients.openWindow("actions/donut.html");
+      break;
+    case "tea":
+      clients.openWindow("actions/tea.html");
+      break;
+  }
+});