---
description: >-
  https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
---

# Using the Notifications API (ok)

## to-do-notifications

{% file src="https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-MDkHELz1qoHUl8eR84w%2F-MDkKVuCyn6VH_9y8PkY%2Fto-do-notifications-gh-pages.zip?alt=media&token=30b65335-f838-43e8-a5aa-666e37658d10" %}



Các [thông báo API](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API\&usg=ALkJrhjsg7UG8gR-jVimaLqNGV-5W9wv5g) cho phép một trang web hoặc ứng dụng thông báo gửi được hiển thị bên ngoài trang ở cấp hệ thống; điều này cho phép các ứng dụng web gửi thông tin đến người dùng ngay cả khi ứng dụng không hoạt động hoặc ở chế độ nền. Bài viết này xem xét những điều cơ bản về sử dụng API này trong các ứng dụng của riêng bạn.

Thông thường, thông báo hệ thống đề cập đến cơ chế thông báo tiêu chuẩn của hệ điều hành: suy nghĩ ví dụ về cách hệ thống máy tính để bàn hoặc thiết bị di động thông thường phát thông báo.

![](https://mdn.mozillademos.org/files/10959/android-notification.png)

Tất nhiên, hệ thống thông báo hệ thống sẽ khác nhau tùy theo nền tảng và trình duyệt, nhưng điều này vẫn ổn và API Thông báo được viết đủ chung để tương thích với hầu hết các hệ thống thông báo hệ thống.

### Ví dụ <a href="#examples" id="examples"></a>

Một trong những trường hợp sử dụng rõ ràng nhất cho thông báo web là thư hoặc ứng dụng IRC dựa trên web cần thông báo cho người dùng khi nhận được tin nhắn mới, ngay cả khi người dùng đang làm gì đó với ứng dụng khác. Nhiều ví dụ về điều này hiện tồn tại, chẳng hạn như [Slack](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://slack.com/\&usg=ALkJrhgw5nAcIUAvKEHIM5p7r-UV72ftMg) .

Chúng tôi đã viết một ví dụ trong thế giới thực - một ứng dụng danh sách việc cần làm - để cung cấp thêm ý tưởng về cách sử dụng thông báo web. Nó lưu trữ dữ liệu cục bộ bằng [IndexedDB](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\&usg=ALkJrhgkVh3JvOC5yd8RuPKL0fmPXoUtHQ) và thông báo cho người dùng khi đến hạn sử dụng thông báo hệ thống. [Tải xuống mã danh sách Công việc](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://github.com/mdn/to-do-notifications/tree/gh-pages\&usg=ALkJrhgkHuZZyo-byOvr_4eaCv3ro5F3gQ) hoặc [xem ứng dụng đang chạy trực tiếp](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://mdn.github.io/to-do-notifications/\&usg=ALkJrhg9PXx5EP0CY4A6hJzeJG4yfjrqZg) .

### Yêu cầu sự cho phép <a href="#requesting_permission" id="requesting_permission"></a>

Trước khi một ứng dụng có thể gửi thông báo, người dùng phải cấp cho ứng dụng quyền làm như vậy. Đây là một yêu cầu phổ biến khi API cố gắng tương tác với một thứ gì đó bên ngoài trang web - ít nhất một lần, người dùng cần cấp quyền cụ thể cho ứng dụng đó để hiển thị thông báo, từ đó cho phép người dùng kiểm soát ứng dụng / trang web nào được phép hiển thị thông báo.

Do lạm dụng thông báo đẩy trong quá khứ, các trình duyệt và nhà phát triển web đã bắt đầu thực hiện các chiến lược để giúp giảm thiểu vấn đề này. Bạn chỉ nên yêu cầu đồng ý hiển thị thông báo để đáp lại cử chỉ của người dùng (ví dụ: nhấp vào nút). Đây không chỉ là cách thực hành tốt nhất - bạn không nên spam người dùng bằng các thông báo mà họ không đồng ý - nhưng các trình duyệt chuyển tiếp sẽ không cho phép rõ ràng các yêu cầu cấp phép thông báo không được kích hoạt để đáp ứng cử chỉ của người dùng. Firefox đã làm điều này từ phiên bản 72, ví dụ, và Safari đã thực hiện nó một thời gian.

Ngoài ra, trong Chrome và Firefox, bạn hoàn toàn không thể yêu cầu thông báo trừ khi trang web là bối cảnh an toàn (ví dụ: HTTPS) và bạn không còn có thể cho phép quyền thông báo được yêu cầu từ các nguồn gốc chéo [`<iframe>`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe\&usg=ALkJrhhGRf9_40lvj5ONeOiBXkauNvNA5g).

#### Kiểm tra trạng thái cho phép hiện tại <a href="#checking_current_permission_status" id="checking_current_permission_status"></a>

Bạn có thể kiểm tra xem bạn đã có quyền hay chưa bằng cách kiểm tra giá trị của thuộc tính [`Notification.permission`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/permission\&usg=ALkJrhgFeRy5SDi4RW9_Wh7agNxBlLtsZQ)chỉ đọc. Nó có thể có một trong ba giá trị có thể:`default`Người dùng chưa được yêu cầu cho phép, vì vậy thông báo sẽ không được hiển thị.`granted`Người dùng đã cấp quyền hiển thị thông báo, sau khi được hỏi trước đó.`denied`Người dùng đã từ chối cấp phép rõ ràng để hiển thị thông báo.

#### Xin phép <a href="#getting_permission" id="getting_permission"></a>

Nếu quyền hiển thị thông báo chưa được cấp, ứng dụng cần sử dụng [`Notification.requestPermission()`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission\&usg=ALkJrhj06Dn-0iLXOODpcjspvYjirrP9cw)phương thức để yêu cầu điều này từ người dùng. Ở dạng đơn giản nhất, chúng tôi chỉ bao gồm các mục sau:

```
Notification.requestPermission().then(function(result) {
  console.log(result);
});
```

Điều này sử dụng phiên bản dựa trên lời hứa của phương pháp. Nếu bạn muốn hỗ trợ các phiên bản cũ hơn, bạn có thể phải sử dụng phiên bản gọi lại cũ hơn, trông giống như sau:

```
Notification.requestPermission();
```

Phiên bản gọi lại tùy chọn chấp nhận chức năng gọi lại được gọi một khi người dùng đã trả lời yêu cầu hiển thị quyền.

#### Thí dụ <a href="#example" id="example"></a>

Trong bản demo danh sách việc cần làm của chúng tôi, chúng tôi bao gồm nút "Bật thông báo", khi được nhấn, sẽ yêu cầu quyền thông báo cho ứng dụng.

```
<button id="enable">Enable notifications</button>
```

Bấm vào đây gọi `askNotificationPermission()`hàm:

```
function askNotificationPermission() {
  // function to actually ask the permissions
  function handlePermission(permission) {
    // Whatever the user answers, we make sure Chrome stores the information
    if(!('permission' in Notification)) {
      Notification.permission = permission;
    }

    // set the button to shown or hidden, depending on what the user answers
    if(Notification.permission === 'denied' || Notification.permission === 'default') {
      notificationBtn.style.display = 'block';
    } else {
      notificationBtn.style.display = 'none';
    }
  }

  // Let's check if the browser supports notifications
  if (!('Notification' in window)) {
    console.log("This browser does not support notifications.");
  } else {
    if(checkNotificationPromise()) {
      Notification.requestPermission()
      .then((permission) => {
        handlePermission(permission);
      })
    } else {
      Notification.requestPermission(function(permission) {
        handlePermission(permission);
      });
    }
  }
}
```

Nhìn vào khối chính thứ hai trước, bạn sẽ thấy rằng trước tiên chúng tôi sẽ kiểm tra xem Thông báo có được hỗ trợ hay không. Nếu có, chúng tôi sẽ chạy kiểm tra xem phiên bản dựa trên lời hứa có `Notification.requestPermission()`được hỗ trợ hay không. Nếu đúng như vậy, chúng tôi chạy phiên bản dựa trên lời hứa (được hỗ trợ ở mọi nơi trừ Safari) và nếu không, chúng tôi sẽ chạy phiên bản dựa trên cuộc gọi lại cũ hơn (được hỗ trợ trong Safari).

Để tránh trùng lặp mã, chúng tôi đã lưu trữ một vài bit mã vệ sinh bên trong `handlePermission()`hàm, đây là khối chính đầu tiên bên trong đoạn mã này. Bên trong đây, chúng tôi đặt `Notification.permission`giá trị một cách rõ ràng (một số phiên bản cũ của Chrome không thể tự động làm điều này) và hiển thị hoặc ẩn nút tùy thuộc vào những gì người dùng đã chọn trong hộp thoại cấp phép. Chúng tôi không muốn hiển thị nếu quyền đã được cấp, nhưng nếu người dùng chọn từ chối cấp phép, chúng tôi muốn cho họ cơ hội thay đổi ý định sau này.

**Lưu ý:** Trước khi phiên bản 37, Chrome không cho phép bạn gọi [`Notification.requestPermission()`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission\&usg=ALkJrhj06Dn-0iLXOODpcjspvYjirrP9cw)trong `load`xử lý sự kiện (xem [vấn đề 274.284](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://code.google.com/p/chromium/issues/detail%3Fid%3D274284\&usg=ALkJrhi1lOsqNPleNZLyK7wgKtfsqeh6iw) ).

#### Tính năng phát hiện lời hứa requestPermission () <a href="#feature-detecting_the_requestpermission_promise" id="feature-detecting_the_requestpermission_promise"></a>

Ở trên chúng tôi đã nói rằng chúng tôi phải kiểm tra xem trình duyệt có hỗ trợ phiên bản hứa hẹn hay không `Notification.requestPermission()`. Chúng tôi đã làm điều này bằng cách sử dụng như sau:

```
function checkNotificationPromise() {
    try {
      Notification.requestPermission().then();
    } catch(e) {
      return false;
    }

    return true;
  }
```

Về cơ bản chúng tôi cố gắng xem liệu `.then()`phương pháp có sẵn trên `requestPermission()`. Nếu vậy, chúng tôi di chuyển và trở về `true`. Nếu thất bại, chúng tôi trở lại `false`trong `catch() {}`khối.

### Tạo thông báo <a href="#creating_a_notification" id="creating_a_notification"></a>

Tạo một thông báo là dễ dàng; chỉ cần sử dụng hàm [`Notification`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification\&usg=ALkJrhihYEPwxYO0P632tT0BBIDcX35q2g)tạo. Nhà xây dựng này hy vọng một tiêu đề sẽ hiển thị trong thông báo và một số tùy chọn để tăng cường thông báo như một [`icon`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/icon\&usg=ALkJrhg1N7rb6UK1kT-btDVFpKAaV16xqA)hoặc một văn bản [`body`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/body\&usg=ALkJrhhDXYXuyEIi73e9WZYGeX3VP_jRQg).

Ví dụ: trong ví dụ về danh sách việc cần làm, chúng tôi sử dụng đoạn mã sau để tạo thông báo khi được yêu cầu (được tìm thấy bên trong `createNotification()`hàm):

```
var img = '/to-do-notifications/img/icon-128.png';
var text = 'HEY! Your task "' + title + '" is now overdue.';
var notification = new Notification('To do list', { body: text, icon: img });
```

### Thông báo kết thúc <a href="#closing_notifications" id="closing_notifications"></a>

Được sử dụng [`close()`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/close\&usg=ALkJrhjLIkozle3uTdqxiUcYoe5ccS6i3A)để xóa thông báo không còn phù hợp với người dùng (ví dụ: người dùng đã đọc thông báo trên trang web, trong trường hợp ứng dụng nhắn tin hoặc bài hát sau đang phát trong ứng dụng nhạc để thông báo khi thay đổi bài hát) . Hầu hết các trình duyệt hiện đại sẽ tự động loại bỏ thông báo sau một vài giây (khoảng bốn giây) nhưng đây không phải là điều bạn thường quan tâm vì nó phụ thuộc vào người dùng và tác nhân người dùng. Việc sa thải cũng có thể xảy ra ở cấp hệ điều hành và người dùng nên kiểm soát việc này. Các phiên bản cũ của Chrome không tự động xóa thông báo để bạn chỉ có thể làm như vậy sau [`setTimeout()`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout\&usg=ALkJrhiBM4OdGCZK80siDigtn1rtx8RDKA)các phiên bản cũ để không xóa thông báo khỏi khay thông báo trên các trình duyệt khác.

```
var n = new Notification('My Great Song');
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // The tab has become visible so clear the now-stale Notification.
    n.close();
  }
});
```

**Lưu ý:** API này không nên được sử dụng chỉ để xóa thông báo khỏi màn hình sau một độ trễ cố định (trên các trình duyệt hiện đại) vì phương pháp này cũng sẽ xóa thông báo khỏi bất kỳ khay thông báo nào, ngăn người dùng tương tác với nó sau khi ban đầu cho xem.

**Lưu ý** : Khi bạn nhận được một sự kiện "đóng", không có gì đảm bảo rằng đó là người dùng đã đóng thông báo. Điều này phù hợp với đặc điểm kỹ thuật, trong đó nêu rõ: "Khi đóng thông báo, bởi nền tảng thông báo cơ bản hoặc bởi người dùng, các bước đóng cho thông báo phải được chạy."

### Sự kiện thông báo <a href="#notification_events" id="notification_events"></a>

Có bốn sự kiện được kích hoạt trên [`Notification`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification\&usg=ALkJrhihYEPwxYO0P632tT0BBIDcX35q2g)ví dụ:`click`Kích hoạt khi người dùng nhấp vào thông báo.`close`Kích hoạt một khi thông báo được đóng lại.`error`Kích hoạt nếu có gì đó không đúng với thông báo; điều này thường là do thông báo không thể được hiển thị vì một số lý do.`show`Kích hoạt khi thông báo được hiển thị cho người dùng.

Những sự kiện này có thể được theo dõi bằng cách sử dụng [`onclick`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/onclick\&usg=ALkJrhiLN_drNoVCagh0nGEQ1qJqFRkkYA), [`onclose`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/onclose\&usg=ALkJrhjkOjxW7AX7jNVIoh66yIcO3Pcpeg), [`onerror`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/onerror\&usg=ALkJrhhQ2__gFaJQX9HG8bTtAf9PWbwOlg), và [`onshow`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification/onshow\&usg=ALkJrhjNWZRAsirzW34yw_YxZhEEzoetvw)xử lý. Bởi vì [`Notification`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/Notification\&usg=ALkJrhihYEPwxYO0P632tT0BBIDcX35q2g)cũng thừa hưởng từ [`EventTarget`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/EventTarget\&usg=ALkJrhgeYVx20Pu9YK2hf-4I74zFLROqVw), nên có thể sử dụng [`addEventListener()`](https://translate.googleusercontent.com/translate_c?depth=1\&pto=aue\&rurl=translate.google.com.vn\&sl=en\&sp=nmt4\&tl=vi\&u=https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\&usg=ALkJrhgr4mgCpGpsgfjWgWayrR84faJAng)phương pháp trên nó.

### Thay thế các thông báo hiện có <a href="#replacing_existing_notifications" id="replacing_existing_notifications"></a>

Người dùng thường không mong muốn nhận được nhiều thông báo trong một khoảng thời gian ngắn - ví dụ: nếu ứng dụng nhắn tin thông báo cho người dùng cho mỗi tin nhắn đến và chúng được gửi nhiều thì sao? Để tránh spam người dùng có quá nhiều thông báo, có thể sửa đổi hàng đợi thông báo đang chờ xử lý, thay thế một hoặc nhiều thông báo đang chờ xử lý bằng một thông báo mới.

Để làm điều này, có thể thêm một thẻ vào bất kỳ thông báo mới nào. Nếu một thông báo đã có cùng một thẻ và chưa được hiển thị, thông báo mới sẽ thay thế thông báo trước đó. Nếu thông báo có cùng thẻ đã được hiển thị, thông báo trước đó sẽ bị đóng và thông báo mới được hiển thị.

#### Ví dụ về thẻ <a href="#tag_example" id="tag_example"></a>

Giả sử HTML cơ bản sau:

```
<button>Notify me!</button>
```

Có thể xử lý nhiều thông báo theo cách này:

```
window.addEventListener('load', function () {
  // At first, let's check if we have permission for notification
  // If not, let's ask for it
  if (window.Notification && Notification.permission !== "granted") {
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

  var button = document.getElementsByTagName('button')[0];

  button.addEventListener('click', function () {
    // If the user agreed to get notified
    // Let's try to send ten notifications
    if (window.Notification && Notification.permission === "granted") {
      var i = 0;
      // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
      var interval = window.setInterval(function () {
        // Thanks to the tag, we should only see the "Hi! 9" notification 
        var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
        if (i++ == 9) {
          window.clearInterval(interval);
        }
      }, 200);
    }

    // If the user hasn't told if he wants 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) {
        // If the user said okay
        if (status === "granted") {
          var i = 0;
          // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
          var interval = window.setInterval(function () {
            // Thanks to the tag, we should only see the "Hi! 9" notification 
            var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
            if (i++ == 9) {
              window.clearInterval(interval);
            }
          }, 200);
        }

        // Otherwise, we can fallback to a regular modal alert
        else {
          alert("Hi!");
        }
      });
    }

    // If the user refuses to get notified
    else {
      // We can fallback to a regular modal alert
      alert("Hi!");
    }
  });
});
```
