Trang này được dịch bởi Cloud Translation API.

Thêm thông báo đẩy vào ứng dụng web

Tính năng gửi thông báo đẩy là một cách đơn giản và hiệu quả để tương tác lại với người dùng. Trong lớp học lập trình này, bạn sẽ tìm hiểu cách thêm thông báo đẩy vào ứng dụng web.

Kiến thức bạn sẽ học được

Cách đăng ký và huỷ đăng ký người dùng nhận thông báo đẩy
Cách xử lý thông báo đẩy đến
Cách hiển thị thông báo
Cách phản hồi lượt nhấp vào thông báo

Bạn cần có

Chrome 52 trở lên
Web Server for Chrome hoặc máy chủ web mà bạn chọn
Trình chỉnh sửa văn bản
Kiến thức cơ bản về HTML, CSS, JavaScript và Công cụ cho nhà phát triển Chrome
Mã mẫu (Xem phần Thiết lập.)

Tải mã mẫu xuống

Bạn có 2 lựa chọn để lấy mã mẫu cho lớp học lập trình này:

Sao chép kho lưu trữ Git:

git clone https://github.com/GoogleChrome/push-notifications.git

Tải tệp ZIP xuống:

Tải mã nguồn xuống

Nếu bạn tải nguồn xuống dưới dạng tệp ZIP, thì việc giải nén sẽ tạo ra một thư mục gốc push-notifications-master.

Cài đặt và xác minh máy chủ web

Mặc dù bạn có thể sử dụng máy chủ web của riêng mình, nhưng lớp học lập trình này được thiết kế để hoạt động tốt với ứng dụng Web Server for Chrome. Nếu chưa cài đặt ứng dụng đó, bạn có thể tải ứng dụng này xuống từ Cửa hàng Chrome trực tuyến:

Cài đặt Web Server for Chrome

Sau khi cài đặt ứng dụng Web Server for Chrome, hãy nhấp vào lối tắt Ứng dụng trên thanh dấu trang:

Trong cửa sổ Ứng dụng, hãy nhấp vào biểu tượng Máy chủ web:

Tiếp theo, bạn sẽ thấy hộp thoại này. Hộp thoại này cho phép bạn định cấu hình máy chủ web cục bộ:

Nhấp vào nút Chọn thư mục rồi chọn thư mục app trong thư mục push-notifications mà bạn đã tải xuống. Điều này cho phép bạn phân phát công việc đang tiến hành thông qua URL xuất hiện trong phần URL máy chủ web của hộp thoại.

Trong phần Options (Tuỳ chọn), hãy đánh dấu vào ô bên cạnh Automatically show index.html (Tự động hiện index.html), như minh hoạ dưới đây:

Sau đó, hãy dừng và khởi động lại máy chủ bằng cách trượt nút Web Server: STARTED (Máy chủ web: ĐÃ BẬT) sang trái rồi sang phải.

Nhấp vào URL máy chủ web để truy cập vào trang web của bạn trong trình duyệt web. Bạn sẽ thấy một trang có dạng như sau – mặc dù phiên bản của bạn có thể hiển thị 127.0.0.1:8887 làm địa chỉ:

Luôn cập nhật service worker

Trong quá trình phát triển, bạn nên đảm bảo rằng service worker luôn được cập nhật và có những thay đổi mới nhất.

Cách thiết lập chế độ này trong Chrome:

Chuyển đến thẻ Push Codelab.
Mở Công cụ cho nhà phát triển: Ctrl-Shift-I trên Windows và Linux, Cmd-Option-I trên macOS.
Chọn bảng điều khiển Ứng dụng, nhấp vào thẻ Service Workers (Trình chạy dịch vụ) rồi đánh dấu vào hộp Update on Reload (Cập nhật khi tải lại). Khi bạn bật hộp kiểm này, trình chạy dịch vụ sẽ được cập nhật bắt buộc mỗi khi trang tải lại.

Đoạn mã hoàn chỉnh

Trong thư mục app, hãy lưu ý rằng bạn có một tệp trống tên là sw.js. Tệp này sẽ là worker dịch vụ của bạn. Hiện tại, bạn có thể để trống trường này. Sau này, bạn sẽ thêm mã vào đó.

Trước tiên, bạn cần đăng ký tệp này làm worker dịch vụ.

Trang app/index.html của bạn tải scripts/main.js. Bạn đăng ký trình chạy dịch vụ trong tệp JavaScript này.

Thêm mã sau vào scripts/main.js:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

Mã này kiểm tra xem trình duyệt của bạn có hỗ trợ các worker dịch vụ và tính năng nhắn tin qua thông báo đẩy hay không. Nếu được hỗ trợ, mã này sẽ đăng ký tệp sw.js của bạn.

Dùng thử

Kiểm tra các thay đổi bằng cách làm mới thẻ Push Codelab trong trình duyệt.

Kiểm tra bảng điều khiển trong Công cụ của Chrome cho nhà phát triển để tìm Service Worker is registered message, như sau:

Nhận khoá máy chủ ứng dụng

Để làm việc với lớp học lập trình này, bạn cần tạo khoá máy chủ ứng dụng. Bạn có thể thực hiện việc này trên trang web hỗ trợ: web-push-codelab.glitch.me

Tại đây, bạn có thể tạo một cặp khoá công khai và khoá riêng tư.

Sao chép khoá công khai vào scripts/main.js để thay thế giá trị <Your Public Key>:

const applicationServerPublicKey = '<Your Public Key>';

Lưu ý quan trọng: Bạn không bao giờ được đặt khoá riêng tư vào ứng dụng web của mình!

Đoạn mã hoàn chỉnh

Hiện tại, nút Bật của ứng dụng web đang bị tắt và không thể nhấp vào. Điều này là do theo thông lệ, bạn nên tắt nút đẩy theo mặc định và bật nút này sau khi biết rằng trình duyệt có hỗ trợ tính năng nhắn tin đẩy và bạn có thể kiểm tra xem người dùng hiện có đăng ký nhận tin nhắn hay không.

Bạn sẽ cần tạo hai hàm trong scripts/main.js:

initializeUI, để kiểm tra xem người dùng có đang đăng ký hay không
updateBtn để bật nút và thay đổi văn bản tuỳ thuộc vào việc người dùng có đăng ký hay không

Thêm hàm initializeUI vào main.js như sau:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Phương thức mới của bạn sử dụng swRegistration từ bước trước, lấy thuộc tính pushManager từ đó và gọi getSubscription() trên thuộc tính đó.

pushManager. getSubscription() trả về một lời hứa được giải quyết bằng gói thuê bao hiện tại (nếu có). Nếu không, hàm này sẽ trả về null. Nhờ đó, bạn có thể kiểm tra xem người dùng đã đăng ký hay chưa, đặt giá trị của isSubscribed rồi gọi updateBtn() để cập nhật nút.

Thêm hàm updateBtn() vào main.js:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Hàm này bật nút và thay đổi văn bản của nút tuỳ thuộc vào việc người dùng có đăng ký hay không.

Việc cuối cùng cần làm là gọi initializeUI() khi trình chạy dịch vụ của bạn được đăng ký trong main.js:

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

Dùng thử

Làm mới thẻ Push Codelab. Bạn sẽ thấy nút Enable Push Messaging (Bật tính năng Nhắn tin qua thông báo đẩy) hiện đã được bật (bạn có thể nhấp vào nút này) và bạn sẽ thấy User is NOT subscribed trong bảng điều khiển.

Khi tiếp tục tham gia lớp học lập trình này, bạn sẽ thấy văn bản trên nút thay đổi mỗi khi bạn đăng ký hoặc huỷ đăng ký.

Đoạn mã hoàn chỉnh

Hiện tại, nút Enable Push Messaging (Bật tính năng nhắn tin qua thông báo đẩy) chưa có nhiều tác dụng. Hãy khắc phục vấn đề đó.

Trong hàm initializeUI(), hãy thêm một trình nghe lượt nhấp cho nút:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Khi người dùng nhấp vào nút, bạn sẽ tắt nút này để đảm bảo người dùng không thể nhấp vào nút này lần thứ hai, vì việc đăng ký nhận thông báo đẩy có thể mất một chút thời gian.

Sau đó, bạn gọi subscribeUser() nếu người dùng hiện chưa đăng ký. Để làm việc này, bạn cần dán mã sau vào scripts/main.js:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

Hãy xem xét những việc mà mã này đang làm và cách mã này đăng ký người dùng nhận thông báo đẩy.

Trước tiên, bạn lấy khoá công khai của máy chủ ứng dụng (được mã hoá an toàn bằng URL Base64) rồi chuyển đổi khoá đó thành UInt8Array, vì đây là dữ liệu đầu vào dự kiến của lệnh gọi subscribe(). Hàm urlB64ToUint8Array() nằm ở đầu scripts/main.js.

Sau khi chuyển đổi giá trị, bạn sẽ gọi phương thức subscribe() trên pushManager của trình chạy dịch vụ, truyền khoá công khai của máy chủ ứng dụng và giá trị userVisibleOnly: true.

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

Tham số userVisibleOnly là một sự đảm bảo rằng bạn sẽ hiển thị thông báo mỗi khi gửi một thông báo đẩy. Hiện tại, bạn bắt buộc phải nhập giá trị này và giá trị này phải là true.

Việc gọi subscribe() sẽ trả về một promise sẽ phân giải sau các bước sau:

Người dùng đã cấp quyền hiển thị thông báo.
Trình duyệt đã gửi một yêu cầu mạng đến một dịch vụ truyền tin để lấy dữ liệu cần thiết nhằm tạo ra một PushSubscription.

Lệnh hứa subscribe() sẽ phân giải bằng PushSubscription nếu các bước này thành công. Nếu người dùng không cấp quyền hoặc nếu có vấn đề khi đăng ký người dùng, thì lời hứa sẽ từ chối kèm theo một lỗi. Thao tác này sẽ cung cấp cho bạn chuỗi promise sau trong lớp học lập trình:

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

Với phương thức này, bạn có thể nhận được một gói thuê bao và coi người dùng là người đăng ký hoặc phát hiện lỗi và ghi lỗi đó vào bảng điều khiển. Trong cả hai trường hợp, bạn đều gọi updateBtn() để đảm bảo nút được bật lại và có văn bản phù hợp.

Trong một ứng dụng thực tế, hàm updateSubscriptionOnServer() là nơi bạn sẽ gửi dữ liệu đăng ký đến một phần phụ trợ, nhưng đối với lớp học lập trình, bạn chỉ cần hiển thị thông tin đăng ký trong giao diện người dùng. Thêm hàm sau vào scripts/main.js:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

Dùng thử

Chuyển đến thẻ Push Codelab, làm mới trang rồi nhấp vào nút. Bạn sẽ thấy một lời nhắc cấp quyền như sau:

Nếu cấp quyền, bạn sẽ thấy User is subscribed được ghi vào bảng điều khiển. Văn bản của nút sẽ thay đổi thành Tắt thông báo đẩy và bạn có thể xem gói thuê bao dưới dạng dữ liệu JSON ở cuối trang.

Đoạn mã hoàn chỉnh

Một điều mà bạn chưa xử lý là điều gì sẽ xảy ra nếu người dùng chặn yêu cầu cấp quyền. Bạn cần cân nhắc một số điểm đặc biệt vì nếu người dùng chặn quyền, ứng dụng web của bạn sẽ không thể hiện lại lời nhắc cấp quyền và không thể đăng ký người dùng. Bạn cần tắt ít nhất nút nhấn để người dùng biết rằng họ không thể sử dụng nút này.

Nơi rõ ràng để xử lý tình huống này là trong hàm updateBtn(). Bạn chỉ cần kiểm tra giá trị Notification.permission, như sau:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Bạn biết rằng nếu quyền là denied, thì người dùng không thể đăng ký và bạn không thể làm gì khác, vì vậy, cách tốt nhất là tắt nút này vĩnh viễn.

Dùng thử

Vì bạn đã cấp quyền cho ứng dụng web của mình ở bước trước, nên bạn cần nhấp vào biểu tượng i trong một vòng tròn trên thanh URL và thay đổi quyền Thông báo thành Sử dụng chế độ mặc định chung (Hỏi).

Sau khi bạn thay đổi chế độ cài đặt này, hãy làm mới trang rồi nhấp vào nút Bật thông báo đẩy và chọn Chặn trong hộp thoại quyền. Nút này sẽ bị vô hiệu hoá và hiển thị văn bản Đã chặn thông báo đẩy.

Với thay đổi này, giờ đây, bạn có thể đăng ký cho người dùng sau khi đã xử lý các trường hợp có thể xảy ra về quyền.

Đoạn mã hoàn chỉnh

Trước khi tìm hiểu cách gửi thông báo đẩy từ phần phụ trợ, bạn cần cân nhắc những gì sẽ thực sự xảy ra khi người dùng đã đăng ký nhận được thông báo đẩy.

Khi bạn kích hoạt một thông báo đẩy, trình duyệt sẽ nhận được thông báo đẩy, tìm ra service worker mà thông báo đẩy đó dành cho, đánh thức service worker đó và gửi một sự kiện đẩy. Bạn cần theo dõi sự kiện này và hiển thị thông báo.

Thêm đoạn mã sau vào tệp sw.js:

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

Hãy xem xét từng bước trong mã này. Bạn đang theo dõi các sự kiện push trong trình chạy dịch vụ bằng cách thêm một trình nghe sự kiện:

self.addEventListener('push', ... );

(Trừ phi bạn đã từng sử dụng Web Worker, còn không thì self có lẽ là một khái niệm mới. Trong tệp trình chạy dịch vụ, self tham chiếu đến chính trình chạy dịch vụ.)

Khi nhận được một thông báo đẩy, trình nghe sự kiện sẽ được gọi và bạn tạo một thông báo bằng cách gọi showNotification() trên thuộc tính registration của worker dịch vụ. showNotification() yêu cầu title; bạn cũng có thể cung cấp cho nó một đối tượng options để đặt thông báo nội dung, biểu tượng và huy hiệu. (Tại thời điểm viết bài, huy hiệu này chỉ được dùng trên Android.)

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

Điều cuối cùng cần đề cập trong quá trình xử lý sự kiện push là event.waitUntil(). Phương thức này nhận một lời hứa để cho phép trình duyệt duy trì hoạt động của service worker cho đến khi lời hứa được truyền vào đã được giải quyết.

Để dễ hiểu hơn, bạn có thể viết lại đoạn mã trên như sau:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

Bây giờ, khi bạn đã thực hiện xong sự kiện đẩy, hãy kiểm thử một sự kiện đẩy.

Dùng thử

Với tính năng xử lý sự kiện đẩy trong trình chạy dịch vụ, bạn có thể kích hoạt một sự kiện đẩy giả để kiểm thử điều gì sẽ xảy ra khi nhận được một thông báo.

Trong ứng dụng web của bạn, hãy đăng ký nhận thông báo đẩy và đảm bảo rằng bạn thấy User IS subscribed trong bảng điều khiển. Trong bảng điều khiển Application (Ứng dụng) trong Công cụ cho nhà phát triển, trong thẻ Service Workers (Worker dịch vụ), hãy nhấp vào nút Push (Đẩy):

Sau khi nhấp vào Push (Đẩy), bạn sẽ thấy một thông báo như sau:

Lưu ý: Nếu bước này không có tác dụng, hãy thử huỷ đăng ký trình chạy dịch vụ bằng đường liên kết Huỷ đăng ký trong bảng điều khiển Ứng dụng của Công cụ cho nhà phát triển, đợi trình chạy dịch vụ dừng rồi tải lại trang.

Đoạn mã hoàn chỉnh

Nếu nhấp vào một trong những thông báo này, bạn sẽ nhận thấy rằng không có điều gì xảy ra. Bạn có thể xử lý các lượt nhấp vào thông báo bằng cách theo dõi các sự kiện notificationclick trong trình chạy dịch vụ.

Bắt đầu bằng cách thêm trình nghe notificationclick vào sw.js:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

Khi người dùng nhấp vào thông báo, trình nghe sự kiện notificationclick sẽ được gọi.

Đầu tiên, mã này sẽ đóng thông báo mà người dùng đã nhấp vào:

event.notification.close();

Sau đó, một cửa sổ hoặc thẻ mới sẽ mở ra, tải URL https://developers.google.com/web. Bạn có thể thay đổi thông tin này.

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

event.waitUntil() đảm bảo rằng trình duyệt không chấm dứt trình chạy dịch vụ trước khi cửa sổ hoặc thẻ mới xuất hiện.

Dùng thử

Hãy thử kích hoạt lại thông báo đẩy trong Công cụ cho nhà phát triển rồi nhấp vào thông báo đó. Lúc này, bạn sẽ thấy thông báo đóng và một thẻ mới mở ra.

Bạn đã thấy rằng ứng dụng web của mình có thể hiển thị một thông báo bằng DevTools và xem cách đóng thông báo bằng một cú nhấp chuột. Bước tiếp theo là gửi một thông báo đẩy thực tế.

Thông thường, bạn sẽ phải gửi một yêu cầu đăng ký từ trang web đến một phần phụ trợ. Sau đó, phần phụ trợ sẽ kích hoạt một thông báo đẩy bằng cách thực hiện một lệnh gọi API đến điểm cuối trong gói thuê bao.

Việc này nằm ngoài phạm vi của lớp học lập trình này, nhưng bạn có thể sử dụng trang web đồng hành (web-push-codelab.glitch.me) để kích hoạt một thông báo đẩy thực tế. Dán đoạn mã đăng ký ở cuối trang:

Sau đó, hãy dán mã này vào vùng văn bản Subscription to Send To (Đăng ký gửi đến) trên trang web đồng hành:

Trong mục Văn bản cần gửi, hãy thêm bất kỳ chuỗi nào bạn muốn gửi cùng với thông báo đẩy.

Nhấp vào nút Gửi thông báo đẩy.

Sau đó, bạn sẽ nhận được một thông báo đẩy. Văn bản bạn đã dùng sẽ được ghi vào bảng điều khiển.

Điều này sẽ giúp bạn có cơ hội kiểm thử việc gửi và nhận dữ liệu, cũng như thao tác với thông báo.

Ứng dụng đồng hành chỉ là một máy chủ nút đang sử dụng thư viện web-push để gửi thông báo. Bạn nên xem xét web-push-libs org trên GitHub để biết những thư viện có sẵn để gửi thông báo đẩy cho bạn. Thao tác này xử lý nhiều thông tin chi tiết để kích hoạt thông báo đẩy.

Bạn có thể xem toàn bộ mã cho trang web hỗ trợ tại đây.

Đoạn mã hoàn chỉnh

Điều còn thiếu là khả năng huỷ đăng ký nhận thông báo đẩy của người dùng. Để làm việc này, bạn cần gọi unsubscribe() trên một PushSubscription.

Trong tệp scripts/main.js, hãy thay đổi trình nghe lượt nhấp pushButton trong initializeUI() thành nội dung sau:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

Lưu ý rằng giờ đây bạn sẽ gọi một hàm mới unsubscribeUser(). Trong hàm này, bạn sẽ nhận được gói thuê bao hiện tại và gọi unsubscribe() trên gói đó. Thêm mã sau vào scripts/main.js:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

Hãy xem xét từng bước trong hàm này.

Trước tiên, bạn nhận được gói thuê bao hiện tại bằng cách gọi getSubscription():

swRegistration.pushManager.getSubscription()

Thao tác này trả về một lời hứa phân giải bằng PushSubscription nếu có; nếu không, thao tác này sẽ trả về null. Nếu có một gói thuê bao, bạn sẽ gọi unsubscribe() trên gói đó, khiến PushSubscription không hợp lệ.

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

Việc gọi unsubscribe() sẽ trả về một promise, vì có thể mất một khoảng thời gian để hoàn tất. Bạn trả về lời hứa đó để then() tiếp theo trong chuỗi đợi unsubscribe() hoàn tất. Bạn cũng thêm một trình xử lý catch trong trường hợp gọi unsubscribe() dẫn đến lỗi. Sau đó, bạn có thể cập nhật giao diện người dùng.

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

Dùng thử

Bạn có thể nhấn vào Bật thông báo đẩy hoặc Tắt thông báo đẩy trong ứng dụng web của mình và nhật ký sẽ cho biết người dùng đã đăng ký và huỷ đăng ký.

Chúc mừng bạn đã hoàn thành lớp học lập trình này!

Lớp học lập trình này đã hướng dẫn bạn cách bắt đầu và chạy bằng cách thêm thông báo đẩy vào ứng dụng web. Nếu bạn muốn tìm hiểu thêm về những việc mà thông báo trên web có thể làm, hãy xem các tài liệu này.

Nếu muốn triển khai thông báo đẩy trên trang web của mình, bạn có thể muốn thêm tính năng hỗ trợ cho các trình duyệt cũ hoặc trình duyệt không tuân thủ tiêu chuẩn sử dụng GCM. Tìm hiểu thêm tại đây.

Tài liệu đọc thêm

Thông báo đẩy trên web: tài liệu về kiến thức cơ bản về web.
Thư viện thông báo đẩy trên web: thư viện thông báo đẩy trên web, bao gồm Node.js, PHP, Java, Python, C và C#.

Thêm thông báo đẩy vào ứng dụng web Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Kiến thức bạn sẽ học được

Bạn cần có

Tải mã mẫu xuống

Cài đặt và xác minh máy chủ web

Luôn cập nhật service worker

Dùng thử

Nhận khoá máy chủ ứng dụng

Dùng thử

Dùng thử

Dùng thử

Dùng thử

Dùng thử

Dùng thử

Tài liệu đọc thêm

Bài đăng liên quan trên blog

Thêm thông báo đẩy vào ứng dụng web