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
Kayce Basques
X GitHub

Lớp học lập trình này hướng dẫn bạn từng bước cách tạo một ứ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 khách:

  • Đăng ký cho 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ý nhận thông báo đẩy cho người dùng.

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 đề cập nhiều đến các khái niệm. Đọc bài viết Cách hoạt động của thông báo đẩy để 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. Trong lớp học lập trình này, bạn sẽ chỉ triển khai ứng dụng. Để tìm hiểu cách triển khai một 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.

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 (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ấp vào Trộn để chỉnh sửa để có thể chỉnh sửa dự án.

Thiết lập chế độ xác thực

Để có thể nhận thông báo đẩy, bạn cần thiết lập máy chủ và máy khách bằng khoá xác thực. Hãy xem phần Ký các yêu cầu giao thức thông báo đẩy trên web để tìm hiểu lý do. Thông thường, bạn sẽ lưu trữ các khoá bí mật trong một tệp .env, tương tự như tệp này.

VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  1. Mở public/index.js.
  2. Thay thế VAPID_PUBLIC_KEY_VALUE_HERE bằng giá trị khoá công khai của bạn.

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

Ứng dụng 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ý trình chạy dịch vụ càng sớm càng tốt. Hãy xem phần Nhận và hiển thị các 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 đoạn mã sau:

    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);

  2. Trong Chrome, hãy Mở bảng điều khiển Công cụ cho nhà phát triển.

  3. 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 cách nhấp vào một nút), bạn có thể bắt đầu quy trình chính thức để nhận được quyền gửi thông báo đẩy từ trình duyệt.

  1. Trong public/index.js, hãy thay thế chú thích // TODO trong subscribeButtonHandler() bằng đoạn mã sau:

    // 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.'); }

  2. Quay lại thẻ ứng dụng rồi nhấp vào Subscribe to push (Đăng ký nhận thông báo đẩy). Trình duyệt hoặc hệ điều hành 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.

  3. Chọn Cho phép (hoặc cụm từ tương đương mà trình duyệt hoặc 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 bị từ chối.

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

Quy trình đăng ký liên quan đến 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ụ truyền dữ liệu đẩ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 dài hạn.

  1. Thêm mã được đánh dấu 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) });

Bạn phải đặt tuỳ chọn userVisibleOnly thành true. Có thể một ngày nào đó, bạn sẽ có thể gửi thông báo đẩy mà không hiển thị thông báo cho người dùng (thông báo đẩy thầm lặng), nhưng các trình duyệt không cho phép khả năng đó vì 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ủ của bạn và dịch vụ truyền tin nhắn đẩ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 muốn nhận thông báo đẩy nữa.

  • Thay thế chú thích // TODO trong unsubscribeButtonHandler() bằng đoạn mã sau:
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 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 máy khách từ máy chủ của bạn. 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 rồi thay thế bình luận // TODO trong trình xử lý sự kiện push của trình chạy dịch vụ bằng mã sau:

    let data = event.data.json(); const image = 'logo.png'; const options = {   body: data.options.body,   icon: image } self.registration.showNotification(   data.title,   options );

  2. Quay lại thẻ ứng dụng.

  3. Nhấp vào Thông báo cho tôi. Bạn sẽ nhận được một thông báo đẩy.

  4. Mở URL của thẻ ứng dụng trong các trình duyệt được hỗ trợ khác. Thực hiện quy trình đăng ký rồi 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 trong mỗi trường hợp.

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ở một 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ẽ sử dụng thông báo này để 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 việc đó, bạn cần định cấu hình worker dịch vụ của mình thêm một chút.

  1. Thay thế chú thích // TODO trong trình xử lý sự kiện notificationclick của trình chạy dịch vụ bằng đoạn mã sau:

    event.notification.close(); event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. 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