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

Cung cấp 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 với sự ra mắt của Push API và Notification API, một phần của Nhóm làm việc với ứ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 ứng dụng web của họ và để người dùng nhận và tương tác với thông báo trên trình duyệt web. Thông báo đẩy là 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 đã cấp quyền gửi thông báo trước đó. Bạn có thể dùng những thông báo này để thông báo cho 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 cho các ứ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 ứng dụng thể thao, hoặc cho các 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 sử dụng từ khoá async và await để đăng ký worker dịch vụ và đăng ký nhận thông báo đẩy. Sau đây là ví dụ về cách bạn có thể 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 web cho ứng dụng web trên iOS và iPadOS