Lớp học lập trình: Xây dựng ứng dụng thông báo đẩy

Kate Jeffreys
Kate Jeffreys
Kayce Basques

Lớp học lập trình này sẽ hướng dẫn bạn từng bước cách tạo ứng dụng thông báo đẩy. Khi kết thúc lớp học lập trình, bạn sẽ có một ứng dụng:

  • Đăng ký người dùng nhận thông báo đẩy.
  • Nhận thông báo đẩy và hiển thị dưới dạng thông báo.
  • Huỷ đăng ký người dùng nhận thông báo đẩy.

Lớp học lập trình này tập trung vào việc giúp bạn học hỏi bằng cách thực hiện và chưa chúng ta thường nói nhiều về các khái niệm. Trả phòng Thông báo đẩy hoạt động như thế nào? để tìm hiểu về các khái niệm thông báo đẩy.

Mã máy chủ của lớp học lập trình này đã hoàn tất. Bạn sẽ chỉ triển khai ứng dụng trong lớp học lập trình này. Để tìm hiểu cách triển khai máy chủ thông báo đẩy, hãy xem qua Lớp học lập trình: Tạo thông báo đẩy máy chủ.

Hãy xem push-notifications-client-codelab-complete (nguồn) để xem mã hoàn chỉnh.

Khả năng tương thích với trình duyệt

Lớp học lập trình này hoạt động với các tổ hợp hệ điều hành và trình duyệt sau đây:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

Lớp học lập trình này được xác định là không hoạt động với các hệ điều hành sau (hoặc kết hợp hệ điều hành và trình duyệt):

  • macOS: Brave, Edge, Safari
  • iOS

Thiết lập

Nhận bản sao có thể chỉnh sửa của mã

Trình soạn thảo mã mà bạn thấy ở bên phải các hướng dẫn này sẽ được gọi Giao diện người dùng gặp sự cố trong suốt lớp học lập trình này.

  1. Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.

Thiết lập tính năng xác thực

Để có thể làm cho thông báo đẩy hoạt động, bạn cần thiết lập máy chủ và ứng dụng khách của bạn bằng các khoá xác thực. Xem bài viết Ký yêu cầu giao thức đẩy web để tìm hiểu lý do.

  1. Trong giao diện người dùng Glitch, hãy nhấp vào Tools (Công cụ) rồi nhấp vào Terminal để mở Glitch Terminal (Thiết bị đầu cuối lỗi).
  2. Trong Glitch Terminal, hãy chạy npx web-push generate-vapid-keys. Sao chép khoá riêng tư và khoá công khai.
  3. Trong giao diện người dùng nhiễu, hãy mở .env rồi cập nhật VAPID_PUBLIC_KEY và VAPID_PRIVATE_KEY. Đặt VAPID_SUBJECT thành mailto:test@test.test. Tất cả các giá trị này phải được đặt trong gói trong dấu ngoặc kép. Sau khi cập nhật, tệp .env của bạn sẽ có dạng tương tự như sau:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Đóng Glitch Terminal.
  1. Mở public/index.js.
  2. Thay thế VAPID_PUBLIC_KEY_VALUE_HERE bằng giá trị của khoá công khai.

Đăng ký một trình chạy dịch vụ

Cuối cùng, khách hàng của bạn sẽ cần một trình chạy dịch vụ để nhận và hiển thị thông báo. Bạn nên đăng ký nhân viên dịch vụ càng sớm càng tốt. Hãy xem phần Nhận và hiển thị tin nhắn được đẩy dưới dạng thông báo để biết thêm ngữ cảnh.

  1. Thay thế nhận xét // TODO add startup logic here bằng mã sau:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình toàn màn hình.
  1. 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.
  2. Nhấp vào thẻ Bảng điều khiển. Bạn sẽ thấy thông báo Service worker was registered. đã đăng nhập vào Bảng điều khiển.

Yêu cầu quyền gửi thông báo đẩy

Bạn tuyệt đối không được yêu cầu quyền gửi thông báo đẩy khi tải trang. Thay vào đó, giao diện người dùng nên hỏi xem người dùng có muốn nhận thông báo đẩy không. Sau khi họ xác nhận rõ ràng (ví dụ: bằng cách nhấp vào nút) thì bạn có thể bắt đầu quy trình chính thức để yêu cầu trình duyệt cấp quyền gửi thông báo đẩy.

  1. Trong giao diện người dùng trục trặc, hãy nhấp vào Xem nguồn để quay lại mã của bạn.
  2. Trong public/index.js, hãy thay thế nhận xét // TODO trong subscribeButtonHandler() bằng mã sau:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  1. Quay lại thẻ ứng dụng và nhấp vào Đăng ký để đẩy. Trình duyệt của bạn hoặc hệ điều hành có thể sẽ hỏi xem bạn có muốn cho phép trang web gửi thông báo đẩy cho bạn. Nhấp vào Cho phép (hoặc bất kỳ cụm từ tương đương nào) trình duyệt/hệ điều hành của bạn sử dụng). Trong Bảng điều khiển, bạn sẽ thấy một thông báo cho biết liệu yêu cầu được chấp nhận hay bị từ chối.

Đăng ký nhận thông báo đẩy

Quy trình đăng ký bao gồm việc tương tác với dịch vụ web được kiểm soát bởi nhà cung cấp trình duyệt có tên là dịch vụ đẩy. Khi bạn nhận được thông tin đăng ký thông báo đẩy bạn cần để gửi đến máy chủ và yêu cầu máy chủ lưu trữ dữ liệu đó trong cơ sở dữ liệu về lâu dài. Xem phần Đăng ký cho khách hàng nhận thông báo đẩy để biết thêm bối cảnh về quy trình đăng ký.

  1. Thêm mã được làm nổi bật sau đây vào subscribeButtonHandler():
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

Tuỳ chọn userVisibleOnly phải là true. Có thể một ngày nào đó bạn có thể để đẩy thông báo mà không hiển thị thông báo người dùng có thể nhận thấy (thông báo đẩy im lặng) nhưng trình duyệt hiện không cho phép thực hiện chức năng đó vì vấn đề về quyền riêng tư.

Giá trị applicationServerKey dựa vào một hàm hiệu dụng chuyển đổi chuỗi base64 thành Uint8Array. Giá trị này được dùng cho giữa máy chủ của bạn và dịch vụ đẩy.

Huỷ đăng ký nhận thông báo đẩy

Sau khi người dùng đăng ký nhận thông báo đẩy, giao diện người dùng của bạn cần cung cấp cách huỷ đăng ký trong trường hợp người dùng đổi ý và không muốn nhận thông báo đẩy nữa.

  1. Thay thế nhận xét // TODO trong unsubscribeButtonHandler() bằng mã sau:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Nhận thông báo đẩy và hiển thị thông báo đó dưới dạng thông báo

Như đã đề cập trước đó, bạn cần có một trình chạy dịch vụ để xử lý nhận và hiển thị các thông báo được đẩy đến máy khách từ máy chủ của bạn. Hãy xem phần Nhận và hiển thị tin nhắn được đẩy dưới dạng thông báo để biết thêm chi tiết.

  1. Mở public/service-worker.js và thay thế nhận xét // TODO trong trình xử lý sự kiện push của trình chạy dịch vụ bằng mã sau:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Quay lại thẻ ứng dụng.
  2. Nhấp vào Thông báo cho tôi. Bạn sẽ nhận được một thông báo đẩy.
  3. Thử mở URL của thẻ ứng dụng trên các trình duyệt khác (hoặc thậm chí là các thiết bị khác), trải qua quy trình đăng ký, sau đó nhấp vào Thông báo cho tất cả. Bạn sẽ nhận được cùng một thông báo đẩy trên tất cả các trình duyệt mà bạn đã đăng ký. Xem lại Khả năng tương thích với trình duyệt để xem danh sách trình duyệt/hệ điều hành được xác định là có hiệu quả hoặc không hiệu quả.

Bạn có thể tuỳ chỉnh thông báo theo nhiều cách. Xem các thông số của ServiceWorkerRegistration.showNotification() để tìm hiểu thêm.

Mở URL khi người dùng nhấp vào một thông báo

Trong thực tế, có thể bạn sẽ dùng thông báo làm một cách để thu hút lại người dùng và nhắc họ truy cập vào trang web của bạn. Để làm điều đó, bạn cần định cấu hình trình chạy dịch vụ của mình thêm một chút.

  1. Thay thế nhận xét // TODO trong notificationclick của trình chạy dịch vụ trình xử lý sự kiện bằng mã sau:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Hãy quay lại thẻ ứng dụng, gửi cho chính bạn một thông báo khác, sau đó hãy nhấp vào thông báo đó. Trình duyệt của bạn sẽ mở một thẻ mới và tải https://web.dev.

Các bước tiếp theo