Cách hoạt động của thông báo

Alexey Rodionov

Matt Gaunt

Tới đây, chúng ta đã xem xét các tuỳ chọn thay đổi giao diện của một thông báo. Có cũng có các tuỳ chọn làm thay đổi hoạt động của thông báo.

Theo mặc định, việc gọi showNotification() chỉ bằng các tuỳ chọn hình ảnh sẽ có những nội dung sau hành vi:

• Việc nhấp vào thông báo sẽ không có tác dụng gì.
• Mỗi thông báo mới sẽ hiển thị lần lượt. Trình duyệt sẽ không thu gọn thông báo theo bất kỳ cách nào.
• Nền tảng có thể phát ra âm thanh hoặc rung thiết bị của người dùng (tuỳ thuộc vào nền tảng).
• Trên một số nền tảng, thông báo sẽ biến mất sau một khoảng thời gian ngắn, trong khi những nền tảng khác thì hiện thông báo trừ phi người dùng tương tác với thông báo đó. (Ví dụ: so sánh các thông báo của bạn trên Android và máy tính.)

Trong phần này, chúng ta sẽ xem xét cách thay đổi những hành vi mặc định này bằng các tuỳ chọn một mình. Việc triển khai và tận dụng các tính năng này tương đối dễ dàng.

Sự kiện nhấp vào thông báo

Khi người dùng nhấp vào một thông báo, hành vi mặc định sẽ không có gì xảy ra. Không thậm chí là đóng hoặc xoá thông báo.

Phương pháp phổ biến đối với một lượt nhấp vào thông báo là đóng và thực hiện một số logic khác (ví dụ: mở một cửa sổ hoặc thực hiện lệnh gọi API đến ứng dụng).

Để làm được việc này, bạn cần thêm một trình nghe sự kiện 'notificationclick' vào trình chạy dịch vụ của chúng ta. Chiến dịch này sẽ được gọi mỗi khi có người nhấp vào thông báo.

self.addEventListener('notificationclick', (event) => {
  const clickedNotification = event.notification;
  clickedNotification.close();

  // Do something as the result of the notification click
  const promiseChain = doSomething();
  event.waitUntil(promiseChain);
});

Như bạn có thể thấy trong ví dụ này, thông báo mà người dùng nhấp vào có thể truy cập như sau: event.notification. Từ đó, bạn có thể truy cập vào các thuộc tính và phương thức của thông báo. Trong phần này trong trường hợp, bạn sẽ gọi phương thức close() và thực hiện thêm tác vụ.

Cảnh báo: Bạn cần sử dụng event.waitUntil() để trình chạy dịch vụ tiếp tục chạy trong khi mã của bạn đang bận.

Thao tác

Thao tác cho phép bạn tạo một cấp độ tương tác khác với người dùng chỉ bằng việc nhấp vào .

Nút

Trong phần trước, bạn đã xem cách xác định các nút hành động khi gọi showNotification():

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      title: 'Coffee',
      type: 'button',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Nếu người dùng nhấp vào một nút hành động, hãy kiểm tra giá trị event.action trong noticationclick để cho biết nút hành động nào đã được nhấp vào.

event.action sẽ chứa giá trị action được đặt trong các tuỳ chọn. Trong ví dụ ở trên, Giá trị event.action sẽ là một trong các giá trị sau: 'coffee-action', 'doughnut-action', 'gramophone-action' hoặc 'atom-action'.

Bằng cách này, chúng tôi sẽ phát hiện lượt nhấp vào thông báo hoặc lượt nhấp để thực hiện hành động như sau:

self.addEventListener('notificationclick', (event) => {
  if (!event.action) {
    // Was a normal notification click
    console.log('Notification Click.');
    return;
  }

  switch (event.action) {
    case 'coffee-action':
      console.log("User ❤️️'s coffee.");
      break;
    case 'doughnut-action':
      console.log("User ❤️️'s doughnuts.");
      break;
    case 'gramophone-action':
      console.log("User ❤️️'s music.");
      break;
    case 'atom-action':
      console.log("User ❤️️'s science.");
      break;
    default:
      console.log(`Unknown action clicked: '${event.action}'`);
      break;
  }
});

Câu trả lời cùng dòng

Ngoài ra, trong phần trước, bạn đã biết cách thêm câu trả lời cùng dòng vào thông báo:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

event.reply sẽ chứa giá trị do người dùng nhập vào trường nhập dữ liệu:

self.addEventListener('notificationclick', (event) => {
  const reply = event.reply;

  // Do something with the user's reply
  const promiseChain = doSomething(reply);
  event.waitUntil(promiseChain);
});

Thẻ

Tuỳ chọn tag về cơ bản là một mã nhận dạng chuỗi để "nhóm" thông báo cùng nhau, giúp bạn dễ dàng để xác định cách hiển thị nhiều thông báo cho người dùng. Đây là nội dung dễ giải thích nhất với ví dụ.

Hãy hiện thông báo và gắn thẻ 'message-group-1' cho thông báo đó. Chúng tôi sẽ hiển thị thông báo có mã này:

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Việc này sẽ hiển thị thông báo đầu tiên của chúng tôi.

Hãy hiện thông báo thứ hai với thẻ mới của 'message-group-2', như sau:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Thao tác này sẽ hiển thị thông báo thứ hai cho người dùng.

Bây giờ, hãy hiển thị thông báo thứ ba nhưng sử dụng lại thẻ đầu tiên của 'message-group-1'. Đang thực hiện việc này sẽ đóng thông báo đầu tiên và thay thế bằng thông báo mới của chúng tôi.

const title = 'Notification 3 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

Hiện tại, chúng ta có 2 thông báo mặc dù showNotification() được gọi 3 lần.

Tuỳ chọn tag chỉ là một cách để nhóm các thông báo để mọi thông báo cũ đang hiển thị sẽ bị đóng nếu chúng có cùng thẻ với thông báo mới.

Một điểm tinh tế khi sử dụng tag là khi thay thế một thông báo, mã này sẽ không có âm thanh hoặc rung.

Đây là lúc tuỳ chọn renotify phát huy tác dụng.

Thông báo lại

Điều này chủ yếu áp dụng cho thiết bị di động tại thời điểm viết bài. Việc đặt tùy chọn này sẽ tạo thông báo sẽ rung và phát âm thanh hệ thống.

Có những trường hợp mà bạn có thể muốn có thông báo thay thế để thông báo cho người dùng thay vì tự động cập nhật. Ứng dụng Chat là một ví dụ điển hình. Trong trường hợp này, bạn nên đặt tag và renotify đến true.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Cảnh báo: Nếu đặt renotify thành true trên một thông báo không có tag, bạn sẽ gặp lỗi sau: TypeError: Failed to execute 'showNotification' on 'ServiceWorkerRegistration': Notifications which set the renotify flag must specify a non-empty tag

Im lặng

Tùy chọn này cho phép bạn hiển thị thông báo mới nhưng ngăn chặn hành vi rung mặc định, phát âm thanh và bật màn hình của thiết bị.

Điều này rất phù hợp nếu thông báo của bạn không cần người dùng chú ý ngay.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Lưu ý: Nếu bạn xác định cả silent và renotify, silent sẽ được ưu tiên.

Cần tương tác

Chrome trên máy tính sẽ hiển thị thông báo trong một khoảng thời gian nhất định trước khi ẩn thông báo. Bật Chrome Android không có hành vi này. Thông báo sẽ xuất hiện cho đến khi người dùng tương tác với thông báo.

Để buộc một thông báo luôn hiển thị cho đến khi người dùng tương tác với thông báo đó, hãy thêm requireInteraction . Lúc này, thông báo sẽ xuất hiện cho đến khi người dùng đóng hoặc nhấp vào thông báo.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Hãy cân nhắc khi sử dụng phương án này. Hiển thị thông báo và buộc người dùng dừng nội dung họ đang làm để loại bỏ thông báo của bạn có thể gây khó chịu.

Trong phần tiếp theo, chúng ta sẽ xem xét một số mẫu phổ biến được sử dụng trên web cho quản lý thông báo và thực hiện những hành động như mở trang khi có người nhấp vào thông báo.

Điểm đến tiếp theo

• Tổng quan về thông báo đẩy trên web
• Cách hoạt động của chế độ đẩy
• Đăng ký người dùng
• Trải nghiệm người dùng về quyền
• Gửi thông báo bằng thư viện thông báo đẩy trên web
• Giao thức đẩy web
• Xử lý sự kiện đẩy
• Hiển thị thông báo
• Cách hoạt động của thông báo
• Các mẫu thông báo phổ biến
• Câu hỏi thường gặp về thông báo đẩy
• Các vấn đề thường gặp và lỗi báo cáo

Phòng thí nghiệm lập trình

• Xây dựng ứng dụng thông báo đẩy
• Xây dựng máy chủ thông báo đẩy