Using the Notifications API (ok)

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

to-do-notifications

16KB

to-do-notifications-gh-pages.zip

archive

Các thông báo API 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.

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ụ

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 .

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 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 hoặc xem ứng dụng đang chạy trực tiếp .

Yêu cầu sự cho phép

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>.

Kiểm tra trạng thái cho phép hiện tại

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.permissionchỉ đọc. Nó có thể có một trong ba giá trị có thể:defaultNgườ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ị.grantedNgười dùng đã cấp quyền hiển thị thông báo, sau khi được hỏi trước đó.deniedNgười dùng đã từ chối cấp phép rõ ràng để hiển thị thông báo.

Xin phép

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()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ụ

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.permissiongiá 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()trong loadxử lý sự kiện (xem vấn đề 274.284 ).

Tính năng phát hiện lời hứa requestPermission ()

Ở 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 falsetrong catch() {}khối.

Tạo thông báo

Tạo một thông báo là dễ dàng; chỉ cần sử dụng hàm Notificationtạ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 iconhoặc một văn bản body.

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

Được sử dụng close()để 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()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

Có bốn sự kiện được kích hoạt trên Notificationví dụ:clickKích hoạt khi người dùng nhấp vào thông báo.closeKích hoạt một khi thông báo được đóng lại.errorKí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.showKí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, onclose, onerror, và onshowxử lý. Bởi vì Notificationcũng thừa hưởng từ EventTarget, nên có thể sử dụng addEventListener()phương pháp trên nó.

Thay thế các thông báo hiện có

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ẻ

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!");
    }
  });
});