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à 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 các khái niệm về 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 tham khảo Lớp học lập trình: Tạo máy chủ thông báo đẩy.

Hãy truy cập vào push-notifications-client-codelab-complete (nguồn) để xem mã đầy đủ.

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 đây (hoặc cá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à Giao diện người dùng gặp lỗi 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

Trước khi 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 bằng các khoá xác thực. Hãy 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à các giá trị 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. Bạn nên đặt tất cả các giá trị này 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ý một trình chạy dịch vụ

Cuối cùng, ứng dụ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 bài viết Nhận và hiển thị tin nhắn đã đẩy dưới dạng thông báo để biết thêm thông tin.

  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 vào 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. được ghi lại vào Console.

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 một cách rõ ràng (ví dụ: bằng cách nhấp vào nút), bạn có thể bắt đầu quy trình chính thức để nhận quyền gửi thông báo đẩy của trình duyệt.

  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 hoặc hệ điều hành của bạn 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 hay không. Nhấp vào Allow (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 Console, bạn sẽ thấy một thông báo cho biết 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 thuê bao 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 về gói thuê bao thông báo đẩy, bạn cần gửi thông tin đó đến máy chủ và yêu cầu máy chủ lưu trữ thông tin đó 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 thông tin 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 đó có thể đẩy thông báo mà không hiển thị thông báo cho người dùng thấy (thông báo đẩy im lặng) nhưng các trình duyệt hiện không cho phép thực hiện điều đó do lo ngại 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 dùng để xác thực 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 có 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 một trình chạy dịch vụ để xử lý việc 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 bài viết Nhận và hiển thị tin nhắn đã đẩy dưới dạng thông báo để biết thêm thông tin.

  1. Mở public/service-worker.js rồi 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. 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í trên các thiết bị khác), thực hiện quy trình đăng ký, sau đó nhấp vào Notify all (Thông báo tất cả). Bạn sẽ nhận được cùng một thông báo đẩy trên mọi trình duyệt mà bạn đã đăng ký. Hãy xem 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 được xác định là có 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 một thông báo

Trong thực tế, bạn có thể sẽ sử dụng thông báo như một cách để thu hút lại người dùng và nhắc họ truy cập 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 trình xử lý sự kiện notificationclick của trình chạy dịch vụ 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 chính bạn một thông báo khác rồi 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