Trình kích hoạt thông báo cho phép bạn lên lịch cho các thông báo cục bộ không cần kết nối mạng, rất lý tưởng cho các trường hợp sử dụng như ứng dụng lịch.
Trình kích hoạt thông báo là gì?
Nhà phát triển web có thể cho thấy thông báo bằng API Thông báo trên web. Tính năng này thường được dùng với API đẩy để thông báo cho người dùng về thông tin có giới hạn về thời gian, chẳng hạn như sự kiện tin nổi bật hoặc thông báo đã nhận. Thông báo hiển thị bằng cách chạy JavaScript trên thiết bị của người dùng.
Vấn đề với API Đẩy là không đáng tin cậy để kích hoạt các thông báo phải xuất hiện khi một điều kiện cụ thể, như thời gian hoặc vị trí, được đáp ứng. 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 của mình 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 đi vào khu vực lân cận cửa hàng tạp hoá. Kết nối mạng hoặc các tính năng tiết kiệm pin như chế độ nghỉ có thể làm chậm việc gửi thông báo đẩ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 trước cho thông báo về điều kiện kích hoạt. Nhờ đó, hệ điều hành sẽ gử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
Các ứng dụng Lịch có thể sử dụng điều kiện 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 1 giờ trước khi cuộc họp diễn ra, sau đó 5 phút trước khi cuộc họp khẩn cấp diễn ra.
Mạng truyền hình có thể nhắc người dùng rằng chương trình truyền hình yêu thích của họ sắp bắt đầu hoặc sự kiện phát trực tiếp hội nghị truyền hình sắp bắt đầu.
Các trang web chuyển đổi múi giờ có thể sử dụng điều kiện 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 báo thức cho cuộc gọi video hoặc hội nghị truyền hình qua điện thoại.
Trạng thái hiện tại
| Bước | Trạng thái |
|---|---|
| 1. Tạo nội dung giải thích | Hoàn tất |
| 2. Tạo bản nháp ban đầu của thông số kỹ thuật | Not started |
| 3. Thu thập ý kiến phản hồi và cải tiến 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 | Not started |
Cách sử dụng kích hoạt thông báo
Bật thông qua about://flags
Để thử nghiệm cục bộ Notification Triggers API (API Trình kích hoạt thông báo) mà không cần mã bản dùng thử theo nguyên 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ợ Trình kích hoạt thông báo hay không bằng cách kiểm tra sự tồn tại của thuộc tính showTrigger:
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
Lên lịch thông báo
Việc lên lịch gửi thông báo 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 một thuộc tính điều kiện showTrigger có đối tượng TimestampTrigger dưới dạng giá trị đến đố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 đã lên lịch
Để 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ả cá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 chuyển cờ includeTriggered để đưa thông báo theo lịch 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 Thông báo 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 tổ hợp phím Bắt đầu sự kiện ghi
hoặc nhấn tổ hợp phím Control + E (Command + E trên máy Mac). Công cụ của Chrome cho nhà phát triển ghi lại tất cả các sự kiện thông báo, bao gồm thông báo đã lên lịch, đã hiển thị và đã đóng trong 3 ngày, ngay cả khi Công cụ cho nhà phát triển đã đóng.
Bản minh hoạ
Bạn có thể xem Trình kích hoạt thông báo đang hoạt động trong bản minh hoạ. Điều này cho phép bạn lên lịch thông báo, liệt kê các thông báo đã lên lịch và huỷ các thông báo đó. Mã nguồn có trên Glitch.
Tính bảo mật và quyền
Nhóm Chrome đã thiết kế và triển khai API Trình kích hoạt thông báo theo 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 của nền tảng web mạnh mẽ, bao gồm cả quyền kiểm soát người dùng, tính minh bạch và tính hiệu quả. Vì API này yêu cầu trình chạy dịch vụ, nên nó cũng yêu cầu ngữ cảnh bảo mật. Để sử dụng API này, bạn cần có quyền tương tự 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ỉ dùng được trong ngữ cảnh của ServiceWorkerRegistration. Tức là mọi dữ liệu cần thiết được lưu trữ trong cùng một ngữ cảnh và tự động bị xoá khi trình chạy 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 trình chạy dịch vụ được cài đặt 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ư API đẩy, 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 tất cả dữ liệu cần thiết trước, bao gồm cả các tài nguyên hình ảnh được các thuộc tính badge, icon và image tham chiếu. Tức là nhà phát triển không thể quan sát một thông báo đã lên lịch và không đánh thức trình chạy dịch vụ cho đến khi người dùng tương tác với thông báo đó.
Do đó, hiện chưa có cách nào rõ ràng để nhà phát triển có thể lấy 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ư, chẳng hạn như tra cứu vị trí địa lý của địa chỉ IP. Thiết kế này cũng cho phép tính năng tuỳ ý sử dụng 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.
Ý kiến phản hồi
Nhóm Chrome muốn biết ý kiến của bạn về trải nghiệm của bạn với tính năng Trình kích hoạt thông báo.
Cho chúng tôi biết về thiết kế API
Có điều gì đó về API không hoạt động như bạn 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 không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật? Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ Thông báo kích hoạt trên GitHub hoặc thêm ý kiến của bạn vào vấn đề hiện có.
Bạn gặp vấn đề khi triển khai?
Bạn có tìm thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với quy cách không?
Gửi lỗi tại new.crbug.com. Hãy nhớ bao gồm nhiều chi tiết nhất có thể, hướng dẫn đơn giản để tái tạo và đặt Thành phần thành UI>Notifications. Glitch rất hữu ích trong việc chia sẻ các bản tái tạo lỗi nhanh chóng và dễ dàng.
Bạn định sử dụng API này?
Bạn dự định sử dụng tính năng Kích hoạt thông báo trên trang web của mình? Sự hỗ trợ công khai của bạn giúp chúng tôi sắp xếp mức độ ưu tiên cho 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 bài đăng trên Twitter tới @ChromiumDev bằng hashtag
#NotificationTriggers
và cho chúng tôi biết vị trí cũng như cách bạn sử dụng tính năng đó.
Các Liên kết Hữu dụng
- Nội dung giải thích công khai
- Bản minh hoạ về Trình kích hoạt thông báo | Nguồn minh hoạ về Trình kích hoạt thông báo
- Lỗi theo dõi
- Mục ChromeStatus.com
- Thành phần nhấp nháy:
UI>Notifications
Xác nhận
Trình kích hoạt thông báo được Richard Walgreensl triển khai và phần giải thích do Peter Beverloo viết, với sự đóng góp của Richard. Những người sau đây đã xem lại bài viết: Joe Medley, Pete LePage, cũng như Richard và Peter. Hình ảnh chính của Lukas Blazek trên Unsplash.