diff --git a/README.md b/README.md
index 86e5efd6..c3277556 100644
--- a/README.md
+++ b/README.md
@@ -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.
diff --git a/notifications/non-persistent/index.html b/notifications/non-persistent/index.html
new file mode 100755
index 00000000..689091e0
--- /dev/null
+++ b/notifications/non-persistent/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Non-persistent notifications
+
+
+
+
+
+
+
+ This website shows how to make and handle non-persistent notifications.
+
+
+
When we click the "Notify me!" button, the website does the following:
+
+
+ Checks whether the website has permission to show notifications, asking
+ for permission if necessary.
+
+
If permission is granted, starts a one-second timer.
+
+ When the timer expires, creates a non-persistent notification using the
+ Notification() constructor.
+
+
+ Adds event handlers to the main events dispatched on the
+ Notification interface.
+
+
+
+
+ When the notification is shown, the user clicks it, or the user closes it,
+ the corresponding event handler runs and logs the event.
+
This website shows how to make and handle persistent notifications.
+
+
+ It registers a service worker, whose job is to handle notifications. When
+ the "Notify me!" button is clicked, the website does the following:
+
+
+
+ Checks whether the website has permission to show notifications, asking
+ for permission if necessary.
+
+
If permission is granted, starts a one-second timer.
+
+ When the timer expires, gets the service worker registration, waiting
+ for it to become active if necessary.
+
+
+ Calls registration.showNotification(), passing in two
+ actions.
+
+
+
+
+ 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
+ notificationclick event. If the user selected an action, then
+ the event object includes the selected action.
+
+
+
+ The service worker's notificationclick handler checks the
+ value of the event's action, and responds by opening the
+ appropriate web page.
+
+
+
diff --git a/notifications/persistent/page.js b/notifications/persistent/page.js
new file mode 100755
index 00000000..f76b98e0
--- /dev/null
+++ b/notifications/persistent/page.js
@@ -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");
+ }
+});
diff --git a/notifications/persistent/sw.js b/notifications/persistent/sw.js
new file mode 100644
index 00000000..b76bce6c
--- /dev/null
+++ b/notifications/persistent/sw.js
@@ -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;
+ }
+});