API Trình kích hoạt thông báo

Trình kích hoạt thông báo cho phép bạn lên lịch thông báo cục bộ không yêu cầu kết nối mạng. Đây là lựa chọn lý tưởng cho các trường hợp sử dụng như ứng dụng lịch.

Điều kiện kích hoạt thông báo là gì?

Nhà phát triển web có thể hiển thị thông báo bằng cách sử dụng API Thông báo web. Tính năng này thường được dùng với Push API để thông báo cho người dùng về thông tin có tính thời gian, chẳng hạn như các sự kiện tin tức mới nhất hoặc tin nhắn đã nhận. Thông báo sẽ xuất hiện bằng cách chạy JavaScript trên thiết bị của người dùng.

Vấn đề với Push API là API này không đáng tin cậy để kích hoạt các thông báo phải hiển thị khi đáp ứng một điều kiện cụ thể, chẳng hạn như thời gian hoặc vị trí. Ví dụ về điều kiện dựa trên thời gian là thông báo trên lịch nhắc bạn về một cuộc họp quan trọng với sếp vào lúc 2 giờ chiều. Ví dụ về điều kiện dựa trên vị trí là thông báo nhắc bạn mua sữa khi bạn đến gần cửa hàng tạp hoá. Các tính năng kết nối mạng hoặc tiết kiệm pin như chế độ nghỉ có thể trì hoãn việc phân phối thông báo dựa trên tính năng đẩy.

Trình kích hoạt thông báo giải quyết vấn đề này bằng cách cho phép bạn lên lịch thông báo với điều kiện kích hoạt trước, để hệ điều hành phân phối thông báo vào đúng thời điểm ngay cả khi không có kết nối mạng hoặc thiết bị đang ở chế độ tiết kiệm pin.

Trường hợp sử dụng

Ứng dụng Lịch có thể sử dụng trình kích hoạt thông báo dựa trên thời gian để nhắc người dùng về các cuộc họp sắp tới. Lược đồ thông báo mặc định cho ứng dụng lịch có thể là hiển thị thông báo quan trọng đầu tiên một giờ trước cuộc họp, sau đó là một thông báo khẩn cấp hơn 5 phút trước cuộc họp.

Một mạng truyền hình có thể nhắc người dùng rằng chương trình truyền hình mà họ yêu thích sắp bắt đầu hoặc một sự kiện phát trực tiếp sắp bắt đầu.

Các trang web chuyển đổi múi giờ có thể sử dụng trình kích hoạt thông báo dựa trên thời gian để cho phép người dùng lên lịch chuông báo cho các cuộc họp điện thoại hoặc cuộc gọi video.

Trạng thái hiện tại

Bước Trạng thái
1. Tạo video giải thích Hoàn tất
2. Tạo bản nháp ban đầu của quy cách Chưa bắt đầu
3. Thu thập ý kiến phản hồi và lặp lại thiết kế. Đang tiến hành
4. Bản dùng thử theo nguyên gốc Hoàn chỉnh
5. Khởi chạy Chưa bắt đầu

Cách sử dụng trình kích hoạt thông báo

Bật thông qua about://flags

Để thử nghiệm Notification Triggers API cục bộ mà không cần mã thông báo dùng thử gốc, hãy bật cờ #enable-experimental-web-platform-features trong about://flags.

Phát hiện tính năng

Bạn có thể tìm hiểu xem trình duyệt có hỗ trợ Điều kiện kích hoạt thông báo hay không bằng cách kiểm tra xem thuộc tính showTrigger có tồn tại hay không:

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

Lên lịch gửi thông báo

Việc lên lịch thông báo cũng tương tự như việc hiển thị thông báo đẩy thông thường, ngoại trừ việc bạn cần truyền thuộc tính điều kiện showTrigger có đối tượng TimestampTrigger làm giá trị cho đối tượng options của thông báo.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

Huỷ thông báo định kỳ

Để huỷ thông báo đã lên lịch, trước tiên, hãy yêu cầu danh sách tất cả thông báo khớp với một thẻ nhất định thông qua ServiceWorkerRegistration.getNotifications(). Xin lưu ý rằng bạn cần truyền cờ includeTriggered để thông báo được lên lịch được đưa vào danh sách:

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

Gỡ lỗi

Bạn có thể sử dụng bảng điều khiển Thông báo trong Công cụ của Chrome cho nhà phát triển để gỡ lỗi thông báo. Để bắt đầu gỡ lỗi, hãy nhấn vào biểu tượng Start recording events (Bắt đầu ghi lại sự kiện) Bắt đầu ghi lại sự kiện hoặc tổ hợp phím Control+E (Command+E trên máy Mac). Công cụ dành cho nhà phát triển của Chrome ghi lại tất cả sự kiện thông báo, bao gồm cả thông báo được lên lịch, hiển thị và đóng trong 3 ngày, ngay cả khi Công cụ dành cho nhà phát triển bị đóng.

Một sự kiện thông báo theo lịch đã được ghi vào ngăn Thông báo của Công cụ cho nhà phát triển Chrome, nằm trong bảng điều khiển Ứng dụng.
Một thông báo được lên lịch.
Một sự kiện thông báo hiển thị đã được ghi vào ngăn Thông báo của Công cụ dành cho nhà phát triển của Chrome.
Thông báo hiển thị.

Bản minh hoạ

Bạn có thể xem Trình kích hoạt thông báo hoạt động trong bản minh hoạ. Bản minh hoạ này cho phép bạn lên lịch thông báo, liệt kê thông báo đã lên lịch và huỷ thông báo. Bạn có thể tìm thấy mã nguồn trên Glitch.

Ảnh chụp màn hình ứng dụng web minh hoạ về Trình kích hoạt thông báo.
Bản minh hoạ về Trình kích hoạt thông báo.

Tính bảo mật và quyền truy cập

Nhóm Chrome đã thiết kế và triển khai Notification Triggers API bằng cách sử dụng các nguyên tắc cốt lõi được xác định trong bài viết Kiểm soát quyền truy cập vào các tính năng mạnh mẽ của nền tảng web, bao gồm cả quyền kiểm soát của người dùng, tính minh bạch và tính công thái học. Vì API này yêu cầu worker dịch vụ nên cũng yêu cầu một bối cảnh bảo mật. Việc sử dụng API này yêu cầu quyền giống như thông báo đẩy thông thường.

Quyền kiểm soát của người dùng

API này chỉ có trong ngữ cảnh của ServiceWorkerRegistration. Điều này có nghĩa là tất cả dữ liệu bắt buộc được lưu trữ trong cùng một ngữ cảnh và tự động bị xoá khi worker dịch vụ bị xoá hoặc người dùng xoá tất cả dữ liệu trang web cho nguồn gốc. Việc chặn cookie cũng ngăn việc cài đặt worker dịch vụ trong Chrome, do đó, API này không được sử dụng. Người dùng luôn có thể tắt thông báo cho trang web trong phần cài đặt trang web.

Sự minh bạch

Không giống như Push API, API này không phụ thuộc vào mạng, điều này có nghĩa là thông báo theo lịch cần có tất cả dữ liệu bắt buộc trước đó, bao gồm cả tài nguyên hình ảnh được tham chiếu bằng các thuộc tính badge, iconimage. Điều này có nghĩa là nhà phát triển không thể quan sát việc hiển thị thông báo theo lịch và không liên quan đến việc đánh thức worker dịch vụ cho đến khi người dùng tương tác với thông báo. Do đó, hiện tại, nhà phát triển không có cách nào để có được thông tin về người dùng thông qua các phương pháp có thể xâm phạm quyền riêng tư như tra cứu vị trí địa lý theo địa chỉ IP. Thiết kế này cũng cho phép tính năng này tuỳ ý sử dụng các cơ chế lên lịch do hệ điều hành cung cấp, chẳng hạn như AlarmManager của Android, giúp tiết kiệm pin.

Phản hồi

Nhóm Chrome muốn biết trải nghiệm của bạn với Trình kích hoạt thông báo.

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật không? Gửi vấn đề về thông số kỹ thuật trên Kho lưu trữ GitHub của Trình kích hoạt thông báo hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Bạn gặp vấn đề khi triển khai?

Bạn có phát hiện lỗi khi triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi tại new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện lỗi và đặt Thành phần thành UI>Notifications. Glitch rất hữu ích để chia sẻ các bản sao lỗi nhanh chóng và dễ dàng.

Bạn có dự định sử dụng API này không?

Bạn có dự định sử dụng Trình kích hoạt thông báo trên trang web của mình không? Sự ủng hộ công khai của bạn giúp chúng tôi ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó. Gửi một tweet đến@ChromiumDev bằng hashtag #NotificationTriggers và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Liên kết Hữu ích

Lời cảm ơn

Richard Knoll đã triển khai Trình kích hoạt thông báo và Peter Beverloo đã viết nội dung giải thích, với sự đóng góp của Richard. Những người sau đây đã xem xét bài viết này: Joe Medley, Pete LePage, cũng như Richard và Peter. Hình ảnh chính của Lukas Blazek trên Unsplash.