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 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 này, bạn sẽ có một ứng dụng có thể:

  • Đăng ký người dùng nhận thông báo đẩy.
  • Nhận thông báo đẩy và hiển thị thông báo đó.
  • Huỷ đăng ký người dùng khỏi 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 bằng cách thực hành và không nói nhiều về các khái niệm. Hãy xem bài viết Thông báo đẩy hoạt động như thế nào? để tìm hiểu về các khái niệm liên quan đến 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 Lớp học lập trình: Xây dựng máy chủ thông báo đẩy.

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:

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

Lớp học lập trình này không hoạt động với các hệ điều hành sau đây (hoặc 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 là Glitch UI (Giao diện người dùng Glitch) trong suốt lớp học lập trình này.

  1. Nhấp vào Remix to Edit (Trộn 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

Trước khi có thể sử dụng thông báo đẩy, bạn cần thiết lập máy chủ và ứng dụng bằng các khoá xác thực. Hãy xem phần Ký yêu cầu giao thức thông báo đẩy trên 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 (Dòng lệnh) để mở Glitch Terminal.
  2. Trong Glitch Terminal, hãy chạy npx web-push generate-vapid-keys. Sao chép khoá riêng tư và giá trị khoá công khai.
  3. Trong giao diện người dùng Glitch, hãy mở .env và 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 gói trong dấu ngoặc kép. Sau khi cập nhật, tệp .env sẽ có dạng 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ý trình chạy dịch vụ

Cuối cùng, ứng dụng của bạn sẽ cần một worker dịch vụ để nhận và hiển thị thông báo. Tốt nhất là bạn nên đăng ký worker dịch vụ càng sớm càng tốt. Hãy xem phần Nhận và hiển thị thông báo đẩy dưới dạng thông báo để biết thêm thông tin.

  1. Thay thế chú thích // 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 vào biểu tượng Toàn màn hình toàn màn hình.
  1. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
  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. được ghi vào Bảng điều khiển.

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

Bạn không bao giờ đượ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 của bạn nên hỏi người dùng xem họ có muốn nhận thông báo đẩy hay không. Sau khi người dùng xác nhận rõ ràng (ví dụ: bằng một lượt nhấp vào nút), bạn có thể bắt đầu quy trình chính thức để yêu cầu quyền gửi thông báo đẩy từ trình duyệt.

  1. Trong giao diện người dùng Glitch, hãy nhấp vào View Source (Xem mã nguồn) để quay lại mã của bạn.
  2. Trong public/index.js, hãy thay thế chú thích // 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 rồi nhấp vào Đăng ký thông báo đẩy. Trình duyệt hoặc hệ điều hành có thể sẽ hỏi bạn xem bạn có muốn cho phép trang web gửi thông báo đẩy cho bạn hay không. Nhấp vào Cho phép (hoặc bất kỳ cụm từ tương đương nào mà 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 yêu cầu đã được chấp nhận hay 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 một dịch vụ web do nhà cung cấp trình duyệt kiểm soát, được gọi là dịch vụ đẩy. Sau khi nhận được thông tin đăng ký thông báo đẩy, bạn cần gửi thông tin đó đến một máy chủ và yêu cầu máy chủ lưu trữ thông tin đó trong cơ sở dữ liệu lâu dài. Hãy xem phần Đăng ký ứng dụng để nhận thông báo đẩy để biết thêm thông tin về quy trình đăng ký.

  1. Thêm mã được đánh dấu sau 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. 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 mà người dùng nhìn thấy (tính năng đẩy thầm), nhưng trình duyệt hiện không cho phép tính năng đó do lo ngại về quyền riêng tư.

Giá trị applicationServerKey dựa vào một hàm tiện ích chuyển đổi chuỗi base64 thành Uint8Array. Giá trị này được dùng để xác thực giữa máy chủ 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 thay đổi ý định và không còn muốn nhận thông báo đẩy nữa.

  1. Thay thế chú thích // 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 đó

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

  1. Mở public/service-worker.js và thay thế bình luận // TODO trong trình xử lý sự kiện push của worker 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 thông báo đẩy.
  3. Hãy 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), thực hiện 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ả trình duyệt mà bạn đã đăng ký. Hãy tham khảo lại phần Khả năng tương thích của trình duyệt để xem danh sách các tổ hợp trình duyệt/hệ điều hành đã biết là hoạt động hoặc không hoạt động.

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

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

Trong thực tế, bạn có thể sử dụng thông báo để 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 được điều đó, bạn cần định cấu hình thêm một chút cho worker dịch vụ.

  1. Thay thế chú thích // TODO trong trình xử lý sự kiện notificationclick của worker bằng mã sau:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Quay lại thẻ ứng dụng, gửi cho mình một thông báo khác, sau đó 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