Skip to content

Commit c3ca45a

Browse files
wbambergchrisdavidmills
wbamberg
and
chrisdavidmills
authored
Add notifications demos (#335)
* Add notifications demos * cleanup * Apply suggestions from code review Co-authored-by: Chris Mills <[email protected]> --------- Co-authored-by: Chris Mills <[email protected]>
1 parent 9c41b57 commit c3ca45a

File tree

8 files changed

+171
-0
lines changed

8 files changed

+171
-0
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
6666

6767
- 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/).
6868

69+
- 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).
70+
71+
- [Run the persistent notifications demo](https://mdn.github.io/dom-examples/notifications/persistent/).
72+
- [Run the non-persistent notifications demo](https://mdn.github.io/dom-examples/notifications/non-persistent/)
73+
6974
- The "payment-request" directory contains examples of the [Payment Request API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API).
7075

7176
- The "pointerevents" directory is for examples and demos of the [Pointer Events](https://developer.mozilla.org/docs/Web/API/Pointer_events) standard.

‎notifications/non-persistent/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Non-persistent notifications</title>
7+
<script src="page.js" defer></script>
8+
</head>
9+
10+
<body>
11+
<button id="notify-me">Notify me!</button>
12+
13+
<p>
14+
This website shows how to make and handle non-persistent notifications.
15+
</p>
16+
17+
<p>When we click the "Notify me!" button, the website does the following:</p>
18+
<ol>
19+
<li>
20+
Checks whether the website has permission to show notifications, asking
21+
for permission if necessary.
22+
</li>
23+
<li>If permission is granted, starts a one-second timer.</li>
24+
<li>
25+
When the timer expires, creates a non-persistent notification using the
26+
<code>Notification()</code> constructor.
27+
</li>
28+
<li>
29+
Adds event handlers to the main events dispatched on the
30+
<code>Notification</code> interface.
31+
</li>
32+
</ol>
33+
34+
<p>
35+
When the notification is shown, the user clicks it, or the user closes it,
36+
the corresponding event handler runs and logs the event.
37+
</p>
38+
</body>
39+
</html>

‎notifications/non-persistent/page.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const notifyMe = document.querySelector("#notify-me");
2+
notifyMe.addEventListener("click", async () => {
3+
const permission = await Notification.requestPermission();
4+
5+
if (permission === "granted") {
6+
setTimeout(() => {
7+
const notification = new Notification("Hello!");
8+
9+
notification.addEventListener("show", () => {
10+
console.log("showing!");
11+
});
12+
13+
notification.addEventListener("click", () => {
14+
console.log("clicked!");
15+
});
16+
17+
notification.addEventListener("close", () => {
18+
console.log("closed!");
19+
});
20+
}, 1000);
21+
} else {
22+
console.log("Permission to show notifications was not granted");
23+
}
24+
});

‎notifications/persistent/actions/donut.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Donut</title>
7+
</head>
8+
9+
<body>
10+
<p>Enjoy your donut!</p>
11+
</body>
12+
</html>

‎notifications/persistent/actions/tea.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Tea</title>
7+
</head>
8+
9+
<body>
10+
<p>Enjoy your tea!</p>
11+
</body>
12+
</html>

‎notifications/persistent/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Persistent notifications</title>
7+
<script src="page.js" defer></script>
8+
</head>
9+
10+
<body>
11+
<button id="notify-me">Notify me!</button>
12+
13+
<p>This website shows how to make and handle persistent notifications.</p>
14+
15+
<p>
16+
It registers a service worker, whose job is to handle notifications. When
17+
the "Notify me!" button is clicked, the website does the following:
18+
</p>
19+
<ol>
20+
<li>
21+
Checks whether the website has permission to show notifications, asking
22+
for permission if necessary.
23+
</li>
24+
<li>If permission is granted, starts a one-second timer.</li>
25+
<li>
26+
When the timer expires, gets the service worker registration, waiting
27+
for it to become active if necessary.
28+
</li>
29+
<li>
30+
Calls <code>registration.showNotification()</code>, passing in two
31+
actions.
32+
</li>
33+
</ol>
34+
35+
<p>
36+
The notification presents the actions to the user. If the user clicks the
37+
notification, then the browser starts the service worker, if it is not
38+
already running, and dispatches the
39+
<code>notificationclick</code> event. If the user selected an action, then
40+
the event object includes the selected action.
41+
</p>
42+
43+
<p>
44+
The service worker's <code>notificationclick</code> handler checks the
45+
value of the event's <code>action</code>, and responds by opening the
46+
appropriate web page.
47+
</p>
48+
</body>
49+
</html>

‎notifications/persistent/page.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
navigator.serviceWorker.register("sw.js");
2+
3+
const notifyMe = document.querySelector("#notify-me");
4+
notifyMe.addEventListener("click", async () => {
5+
const permission = await Notification.requestPermission();
6+
7+
if (permission === "granted") {
8+
setTimeout(async () => {
9+
const registration = await navigator.serviceWorker.ready;
10+
registration.showNotification("Hello!", {
11+
actions: [
12+
{ action: "donut", title: "Eat a donut" },
13+
{ action: "tea", title: "Drink a cup of tea" },
14+
],
15+
});
16+
}, 1000);
17+
} else {
18+
console.log("Permission to show notifications was not granted");
19+
}
20+
});

‎notifications/persistent/sw.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
self.addEventListener("notificationclick", (event) => {
2+
switch (event.action) {
3+
case "donut":
4+
clients.openWindow("actions/donut.html");
5+
break;
6+
case "tea":
7+
clients.openWindow("actions/tea.html");
8+
break;
9+
}
10+
});

0 commit comments

Comments
 (0)