+## 通知の作成
通知の作成は簡単です。 {{domxref("Notification")}} コンストラクターを使用するだけです。このコンストラクターは通知内に表示するタイトルと、通知を拡張するためのアイコン ({{domxref("Notification.icon","icon")}}) やテキスト本文 ({{domxref("Notification.body","body")}}) などのオプションを受け取ります。
@@ -131,7 +98,7 @@ function checkNotificationPromise() {
```js
const img = "/to-do-notifications/img/icon-128.png";
-const text = 'HEY! Your task "' + title + '" is now overdue.';
+const text = `HEY! Your task "${title}" is now overdue.`;
const notification = new Notification("To do list", { body: text, icon: img });
```
@@ -141,7 +108,7 @@ const notification = new Notification("To do list", { body: text, icon: img });
```js
const n = new Notification("My Great Song");
-document.addEventListener("visibilitychange", function () {
+document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
// The tab has become visible so clear the now-stale Notification.
n.close();
@@ -181,86 +148,84 @@ Notifications API の仕様では、{{domxref("Notification")}} のインスタ
以下の基本的な HTML を想定してください。
```html
-
+
+
+```
+
+```css hidden
+#demo-logs {
+ width: 90%;
+ height: 100px;
+ background-color: #ddd;
+ overflow-x: auto;
+}
```
以下の方法で、複数の通知を扱うことが可能です。
```js
-window.addEventListener("load", function () {
- const button = document.getElementsByTagName("button")[0];
-
- 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 demoLogs = document.querySelector("#demo-logs");
+
+window.addEventListener("load", () => {
+ const button = document.querySelector("#notify");
- button.addEventListener("click", function () {
- // If the user agreed to get notified
- // Let's try to send ten notifications
- if (window.Notification && Notification.permission === "granted") {
+ 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 = window.setInterval(function () {
- // Thanks to the tag, we should only see the "Hi! 9" notification
- const n = new Notification("Hi! " + i, { tag: "soManyNotification" });
- if (i++ == 9) {
- window.clearInterval(interval);
+ const interval = setInterval(() => {
+ // 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);
- }
-
- // 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.
- else if (window.Notification && Notification.permission !== "denied") {
- Notification.requestPermission(function (status) {
+ } 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 = window.setInterval(function () {
+ 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) {
- window.clearInterval(interval);
+ if (i === 9) {
+ clearInterval(interval);
}
+ i++;
}, 200);
- }
-
- // Otherwise, we can fallback to a regular modal alert
- else {
- alert("Hi!");
+ } else {
+ // Otherwise, we can fallback to a regular modal alert
+ demoLogs.innerText += `User denied the permission request.\n`;
}
});
- }
-
- // ユーザが通知を拒否している場合
- else {
- // 通常型の alert にフォールバックできます
- alert("Hi!");
+ } else {
+ // If the user refuses to get notified, we can fallback to a regular modal alert
+ demoLogs.innerText += `The site does not have permission to show notifications.\n`;
}
});
});
```
-結果は以下のとおりです。
-
-{{ EmbedLiveSample('Tag_example', '100%', 30) }}
-
-## 仕様書
-
-{{Specifications}}
+### 結果
-## ブラウザーの互換性
+{{ EmbedLiveSample('Tag_example', '100%', 150) }}
-{{Compat}}
+上記の例をテストするには、ウェブサイト `https://live.mdnplay.dev` の[通知設定](https://support.mozilla.org/en-US/kb/firefox-page-info-window#w_permissions)を変更してください。。
## 関連情報