Thông báo đẩy hiện được hỗ trợ trên nhiều trình duyệt

Gửi thông báo kịp thời và hữu ích cho người dùng.

Thomas Steiner

Thông báo đẩy được chuẩn hoá vào năm 2016 khi Push API và Notification API được phát hành. Đây là các API thuộc Nhóm công tác về ứng dụng web của W3C. Các API này cung cấp chức năng cần thiết để nhà phát triển web tích hợp thông báo đẩy vào các ứng dụng web của họ và để người dùng nhận cũng như tương tác với thông báo trên trình duyệt web. Thông báo đẩy là những thông báo được gửi đến trình duyệt web của người dùng từ một trang web hoặc ứng dụng mà người dùng đã từng cấp quyền gửi thông báo. Bạn có thể dùng những thông báo này để cảnh báo người dùng về nội dung hoặc thông tin cập nhật mới, nhắc họ về các sự kiện hoặc thời hạn sắp tới hoặc cung cấp thông tin quan trọng khác. Thông báo đẩy có thể đặc biệt hữu ích đối với những ứng dụng cần cung cấp thông tin kịp thời và phù hợp cho người dùng, chẳng hạn như ứng dụng tin tức hoặc thể thao, hoặc đối với những trang web thương mại điện tử muốn gửi thông báo cho người dùng về các ưu đãi đặc biệt hoặc chương trình giảm giá.

Để đăng ký nhận thông báo đẩy, trước tiên, hãy kiểm tra xem trình duyệt của bạn có hỗ trợ thông báo đẩy hay không bằng cách kiểm tra các đối tượng serviceWorker và PushManager trong các đối tượng navigator và window.

Nếu thông báo đẩy được hỗ trợ, hãy dùng các từ khoá async và await để đăng ký trình chạy dịch vụ và đăng ký nhận thông báo đẩy. Sau đây là ví dụ về cách thực hiện việc này bằng JavaScript:

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Tài liệu đọc thêm

• Tổng quan về thông báo đẩy
• Push API
• Thông báo đẩy trên web cho ứng dụng web trên iOS và iPadOS