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 API Thông báo để:
- 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
Phối lại ứng dụng mẫu và xem trong thẻ mới
Thông báo sẽ tự động bị chặn khỏi ứng dụng Glitch đã 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 đó, dưới đây là những việc bạn nên làm:
- Nhấp vào Remix to Edit (Remix để chỉnh sửa) để chỉnh sửa dự án.
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn vào
Toàn màn hình
.
Nhiễu này sẽ xuất hiện trong thẻ Chrome mới:
Khi thực hiện lớp học lập trình này, hãy sửa đổi mã trong Nhược điểm được nhúng trên trang này. Hãy làm mới thẻ mới bằng ứng dụng đang hoạt động để xem các thay đổi.
Làm quen với ứng dụng khởi động và mã của ứng dụng
Bắt đầu bằng cách xem ứng dụng đang hoạt động trong thẻ Chrome mới:
Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển. 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; tất cả sẽ sớm được tiết lộ!
Nhấp vào các nút trong ứng dụng phát trực tiếp: Yêu cầu quyền gửi thông báo và Gửi thông báo.
Bảng điều khiển sẽ in thông báo "TODO" từ một vài mã giả lập hàm:
requestPermission
vàsendNotification
. Đâ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 Nhược điểm đượ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 tại:
Hàm
showPermission
sử dụng API thông báo để nhận trạng thái cấp quyền hiện tại của trang web và ghi nhật ký 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 của quyền là
default
. Ở trạng thái quyềndefault
, 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
chỉ là 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 chức năng này trong bước tiếp theo.
Hàm
sendNotification
chỉ là 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àmshowPermission
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.
Thay thế mã giả lập hàm
requestPermission
trong public/index.js bằng đoạn 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); }); }
Tải lại thẻ Chrome mà bạn đang xem ứng dụng trực tiếp.
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ể phản hồi bằng một trong ba cách trong cửa sổ bật lên cấp 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 lựa chọn | default |
Nếu người dùng nhấp vào Cho phép:
Notification.permission
được đặt thànhgranted
.Trang web sẽ có thể hiển thị thông báo.
Các lệnh gọi tiếp theo tới
Notification.requestPermission
sẽ phân giải thànhgranted
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ànhdenied
.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 tới
Notification.requestPermission
sẽ phân giải thànhdenied
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 tới
Notification.requestPermission
sẽ tạo thêm cửa sổ bật lên.Tuy nhiên, nếu người dùng tiếp tục đóng cửa sổ bật lên, thì trình duyệt có thể chặn trang web và đặt
Notification.permission
thànhdenied
. Khi đó, cửa sổ bật lên hoặc thông báo yêu cầu cấp quyền sẽ không hiển thị với người dùng.Tại thời điểm viết, hành vi của trình duyệt để phản hồi cửa sổ bật lên cấp quyền thông báo bị loại bỏ vẫn có thể thay đổi. Cách tốt nhất để xử lý việc 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 để họ lường trước nội dung đó và biết đ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ẽ dùng hàm khởi tạo Notification
để tạo thông báo mới và cố gắng hiển thị thông báo đó.
Nếu trạng thái của quyền là granted
, thông báo của bạn sẽ hiển thị.
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 2 tham số:title
vàoptions
.options
là một đối tượng có các thuộc tính thể hiện các chế độ cài đặt hình ảnh và dữ liệu mà bạn có thể đưa vào một thông báo. Xem tài liệu về MDA về tham số thông báo để biết thêm thông tin.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 Gửi thông báo. Một thông báo có nội dung
Test body
sẽ xuất hiện.
Điều gì xảy ra khi bạn gửi thông báo khi chưa được phép?
Ở bước này, bạn sẽ thêm một vài dòng mã cho phép bạn xem điều gì sẽ xảy ra khi bạn cố gắng hiển thị một 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àmsendNotification
, hãy xác định trình xử lý sự kiệnonerror
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 gặp lỗi về quyền gửi thông báo:
Nhấp vào biểu tượng khoá bên cạnh thanh URL của Chrome và đặt lại chế độ cài đặt quyền gửi thông báo của trang web về chế độ mặc định.
Nhấp vào Yêu cầu quyền gửi thông báo, và lần này hãy chọn Chặn khỏi cửa sổ bật lên.
Nhấp vào Gửi thông báo và 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.
Nếu muốn, hãy đặt lại quyền gửi thông báo của trang web. Bạn có thể thử yêu cầu 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ờ thì bạn đã nắm được các 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 đã biết phản hồi của người dùng ảnh hưởng như thế nào đến 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à tập hợp đầy đủ các lựa chọn có sẵn. (Xem Tài liệu về thông báo trên MDN để biết thêm thông tin về những lựa chọn này.)
Xin lưu ý rằng các trình duyệt và thiết bị triển khai những tuỳ chọn này theo cách khác nhau. Vì vậy, bạn nên kiểm thử thông báo của mình trên các nền tảng khác nhau để xem thông báo hiển thị 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 một số ý tưởng!
Nếu bạn gặp khó khăn, sau đây là mã hoàn chỉnh cho lớp học lập trình này: glitch.com/edit/#!/codelab-notifications-get-started-completed
Hãy xem lớp học lập trình tiếp theo trong chuỗi nội dung Xử lý thông báo bằng trình chạy dịch vụ để tìm hiểu thêm!