Làm quen với API Thông báo

Trong lớp học lập trình này, bạn sẽ sử dụng các tính năng cơ bản của Notifications API để:

  • Yêu cầu cấp quyền gửi thông báo
  • Gửi thông báo
  • Thử nghiệm với các lựa chọn thông báo

Hỗ trợ trình duyệt

  • Chrome: 20.
  • Edge: 14.
  • Firefox: 22.
  • Safari: 7.

Nguồn

Thông báo sẽ tự động bị chặn khỏi ứng dụng Glitch được nhúng, vì vậy, bạn sẽ không thể xem trước ứng dụng trên trang này. Thay vào đó, bạn có thể làm như sau:

  1. Nhấp vào Remix to Edit (Trộn lại để chỉnh sửa) để có thể chỉnh sửa dự án.
  2. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.

Glitch sẽ mở trong một thẻ Chrome mới:

Ảnh chụp màn hình cho thấy ứng dụng phát trực tiếp được phối lại trong một thẻ mới

Khi bạn thực hành theo lớp học lập trình này, hãy thay đổi mã trong Glitch được nhúng trên trang này. Làm mới thẻ mới bằng ứng dụng đang chạy để xem các thay đổi.

Làm quen với ứng dụng khởi động và mã của ứng dụng

Hãy bắt đầu bằng cách xem ứng dụng đang hoạt động trong thẻ Chrome mới:

  1. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools. Nhấp vào thẻ Bảng điều khiển.

    Bạn sẽ thấy thông báo sau trong Bảng điều khiển:

    Notification permission is default

    Nếu bạn không biết điều đó có nghĩa là gì, đừng lo lắng; mọi thứ sẽ sớm được tiết lộ!

  2. Nhấp vào các nút trong ứng dụng đang hoạt động: Yêu cầu quyền gửi thông báoGửi thông báo.

    Bảng điều khiển in thông báo "TODO" (CẦN LÀM) từ một số mã giả lập hàm: requestPermissionsendNotification. Đây là các hàm bạn sẽ triển khai trong lớp học lập trình này.

Bây giờ, hãy xem mã của ứng dụng mẫu trong Glitch được nhúng trên trang này. Mở public/index.js và xem một số phần quan trọng của mã hiện có:

  • Hàm showPermission sử dụng Notifications API để lấy trạng thái quyền hiện tại của trang web và ghi trạng thái đó vào bảng điều khiển:

    // Print current permission state to console;
    // update onscreen message.
    function showPermission() {
      let permission
    = Notification.permission;
      console
    .log('Notification permission is ' + permission);
      let p
    = document.getElementById('permission');
      p
    .textContent = 'Notification permission is ' + permission;
    }

    Trước khi yêu cầu cấp quyền, trạng thái quyền là default. Ở trạng thái quyền default, trang web phải yêu cầu và được cấp quyền thì mới có thể gửi thông báo.

  • Hàm requestPermission là một mã giả lập:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
      console
    .log('TODO: Implement requestPermission()');
    }

    Bạn sẽ triển khai hàm này trong bước tiếp theo.

  • Hàm sendNotification là một mã giả lập:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      console
    .log('TODO: Implement sendNotification()');
    }

    Bạn sẽ triển khai hàm này sau khi triển khai requestPermission.

  • Trình nghe sự kiện window.onload gọi hàm showPermission khi tải trang, hiển thị trạng thái quyền hiện tại trong bảng điều khiển và trên trang:

    window.onload = () => { showPermission(); };

Yêu cầu cấp quyền gửi thông báo

Ở bước này, bạn sẽ thêm chức năng để yêu cầu người dùng cấp quyền gửi thông báo.

Bạn sẽ sử dụng phương thức Notification.requestPermission() để kích hoạt một cửa sổ bật lên yêu cầu người dùng cho phép hoặc chặn thông báo từ trang web của bạn.

  1. Thay thế mã giả lập hàm requestPermission trong public/index.js bằng mã sau:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
     
    Notification.requestPermission()
       
    .then((permission) => {
          console
    .log('Promise resolved: ' + permission);
          showPermission
    ();
       
    })
       
    .catch((error) => {
          console
    .log('Promise was rejected');
          console
    .log(error);
       
    });
    }
  2. Tải lại thẻ Chrome mà bạn đang xem ứng dụng trực tiếp.

  3. Trên giao diện ứng dụng trực tiếp, hãy nhấp vào Yêu cầu quyền gửi thông báo. Một cửa sổ bật lên sẽ xuất hiện.

Người dùng có thể đưa ra một trong ba phản hồi cho cửa sổ bật lên về quyền.

Phản hồi của người dùng Trạng thái quyền gửi thông báo
Người dùng chọn Cho phép granted
Người dùng chọn Chặn denied
Người dùng đóng cửa sổ bật lên mà không chọn lựa chọn nào default

Nếu người dùng nhấp vào Cho phép:

  • Notification.permission được đặt thành granted.

  • Trang web sẽ có thể hiển thị thông báo.

  • Các lệnh gọi tiếp theo đến Notification.requestPermission sẽ phân giải thành granted mà không có cửa sổ bật lên.

Nếu người dùng nhấp vào Chặn:

  • Notification.permission được đặt thành denied.

  • Trang web sẽ không thể hiển thị thông báo cho người dùng.

  • Các lệnh gọi tiếp theo đến Notification.requestPermission sẽ phân giải thành denied mà không có cửa sổ bật lên.

Nếu người dùng đóng cửa sổ bật lên:

  • Notification.permission vẫn là default.

  • Trang web sẽ không thể hiển thị thông báo cho người dùng.

  • Các lệnh gọi tiếp theo đến Notification.requestPermission sẽ tạo ra nhiều cửa sổ bật lên hơn.

    Tuy nhiên, nếu người dùng tiếp tục đóng cửa sổ bật lên, trình duyệt có thể chặn trang web, đặt Notification.permission thành denied. Sau đó, người dùng sẽ không thấy cửa sổ bật lên yêu cầu cấp quyền cũng như thông báo.

    Tại thời điểm viết bài, hành vi của trình duyệt khi phản hồi cửa sổ bật lên về quyền thông báo bị đóng vẫn có thể thay đổi. Cách tốt nhất để xử lý vấn đề này là luôn yêu cầu quyền gửi thông báo để phản hồi một số hoạt động tương tác mà người dùng đã bắt đầu, nhờ đó họ sẽ mong đợi thông báo và biết được điều gì đang diễn ra.

Gửi thông báo

Ở bước này, bạn sẽ gửi thông báo cho người dùng.

Bạn sẽ sử dụng hàm khởi tạo Notification để tạo một thông báo mới và cố gắng hiển thị thông báo đó. Nếu trạng thái quyền là granted, thông báo của bạn sẽ xuất hiện.

  1. Thay thế mã giả lập hàm sendNotification trong index.js bằng mã sau:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      let title
    = 'Test';
      let options
    = {
        body
    : 'Test body',
       
    // Other options can go here
     
    };
      console
    .log('Creating new notification');
      let notification
    = new Notification(title, options);
    }

    Hàm khởi tạo Notification nhận hai tham số: titleoptions. options là một đối tượng có các thuộc tính đại diện cho chế độ cài đặt hình ảnh và dữ liệu mà bạn có thể đưa vào thông báo. Hãy xem tài liệu MDN về các tham số thông báo để biết thêm thông tin.

  2. Làm mới thẻ Chrome mà bạn đang xem ứng dụng trực tiếp rồi nhấp vào nút Send notification (Gửi thông báo). Một thông báo có văn bản Test body sẽ xuất hiện.

Điều gì sẽ xảy ra khi bạn gửi thông báo mà không có sự cho phép?

Trong bước này, bạn sẽ thêm một vài dòng mã để xem điều gì sẽ xảy ra khi bạn cố gắng hiển thị thông báo mà không có sự cho phép của người dùng.

  • Trong public/index.js, ở cuối hàm sendNotification, hãy xác định trình xử lý sự kiện onerror của thông báo mới:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title
= 'Test';
  let options
= {
    body
: 'Test body',
   
// Other options can go here
 
};
  console
.log('Creating new notification');
  let notification
= new Notification(title, options);
  notification
.onerror = (event) => {
    console
.log('Could not send notification');
    console
.log(event);
 
};
}

Cách quan sát lỗi về quyền gửi thông báo:

  1. Nhấp vào biểu tượng khoá bên cạnh thanh URL của Chrome rồi đặt lại chế độ cài đặt quyền gửi thông báo của trang web về chế độ mặc định.

  2. Nhấp vào Yêu cầu cấp quyền gửi thông báo, rồi lần này chọn Chặn trong cửa sổ bật lên.

  3. Nhấp vào Gửi thông báo để xem điều gì sẽ xảy ra. Văn bản lỗi (Could not send notification) và đối tượng sự kiện được ghi vào bảng điều khiển.

Bạn có thể đặt lại quyền gửi thông báo của trang web. Bạn có thể thử yêu cầu cấp quyền và đóng cửa sổ bật lên nhiều lần để xem điều gì sẽ xảy ra.

Thử nghiệm với các lựa chọn thông báo

Giờ đây, bạn đã nắm được những thông tin cơ bản về cách yêu cầu quyền và gửi thông báo. Bạn cũng đã thấy tác động của phản hồi của người dùng đối với khả năng hiển thị thông báo của ứng dụng.

Giờ đây, bạn có thể thử nghiệm với nhiều tuỳ chọn hình ảnh và dữ liệu có sẵn khi tạo thông báo. Dưới đây là toàn bộ các lựa chọn hiện có. (Xem tài liệu về Thông báo trên MDN để biết thêm thông tin về các tuỳ chọn này.)

Xin lưu ý rằng các trình duyệt và thiết bị triển khai các tuỳ chọn này theo cách khác nhau, vì vậy, bạn nên thử nghiệm thông báo trên nhiều nền tảng để xem thông báo trông như thế nào.

let options = {
  dir
: 'auto',              // Text direction
  lang
: 'en-US',            // A language tag
  badge
: '/orange-cat.png', // Display when insufficient room
  body
: 'Hello World',      // Body text
  tag
: 'mytag',             // Tag for categorization
  icon
: '/line-cat.png',    // To display in the notification
  image
: '/orange-cat.png', // To display in the notification
  data
: {                   // Arbitrary data; any data type
    cheese
: 'I like cheese',
    pizza
: 'Excellent cheese delivery mechanism',
    arbitrary
: {
      faveNumber
: 42,
      myBool
: true
   
}},
  vibrate
: [200, 100, 200], // Vibration pattern for hardware
  renotify
: false,          // Notify if replaced? Default false
  requireInteraction
: false,// Active until click? Default false
 
/*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */

}

Hãy xem Trình tạo thông báo của Peter Beverloo để biết thêm ý tưởng!

Nếu bạn gặp khó khăn, hãy tham khảo mã hoàn chỉnh cho lớp học lập trình này tại: glitch.com/edit/#!/codelab-notifications-get-started-completed

Hãy xem lớp học lập trình tiếp theo trong loạt bài này, Xử lý thông báo bằng worker dịch vụ để tìm hiểu thêm!