Using the Notifications API (ok)

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

to-do-notifications

Các 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ụ

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.

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

Xin phép

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.

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

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

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

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

PreviousSử dụng indexedDB (ok)NextNotificationEvent (chưa có ví dụ :((

Last updated 4 years ago

Was this helpful?