ServiceWorkerGlobalScope: sự kiện pushsubscriptionchange

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is only available in Service Workers.

Sự kiện pushsubscriptionchange được gửi đến phạm vi toàn cục của một ServiceWorker để cho biết một thay đổi trong đăng ký đẩy đã được kích hoạt ngoài sự kiểm soát của ứng dụng.

Điều này có thể xảy ra nếu đăng ký được làm mới bởi trình duyệt, nhưng nó cũng có thể xảy ra nếu đăng ký đã bị thu hồi hoặc mất.

Sự kiện này không thể hủy và không nổi bọt.

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập một thuộc tính trình xử lý sự kiện.

addEventListener("pushsubscriptionchange", (event) => { })

onpushsubscriptionchange = (event) => { }

Mặc dù các ví dụ minh họa cách chia sẻ thông tin liên quan đến đăng ký với máy chủ ứng dụng có xu hướng sử dụng fetch(), đây không nhất thiết là lựa chọn tốt nhất cho sử dụng thực tế, vì nó sẽ không hoạt động nếu ứng dụng ngoại tuyến, ví dụ.

Hãy xem xét sử dụng một phương pháp khác để đồng bộ hóa thông tin đăng ký giữa service worker và máy chủ ứng dụng của bạn, hoặc đảm bảo mã sử dụng fetch() đủ mạnh để xử lý các trường hợp cố gắng trao đổi dữ liệu thất bại.

Note: Trong các bản nháp trước của đặc tả kỹ thuật, sự kiện này được định nghĩa là được gửi khi một PushSubscription đã hết hạn.

Ví dụ

Ví dụ này, chạy trong ngữ cảnh của một service worker, lắng nghe một sự kiện pushsubscriptionchange và đăng ký lại đăng ký đã hết hạn.

self.addEventListener("pushsubscriptionchange", (event) => {
  const conv = (val) =>
    self.btoa(String.fromCharCode.apply(null, new Uint8Array(val)));
  const getPayload = (subscription) => ({
    endpoint: subscription.endpoint,
    publicKey: conv(subscription.getKey("p256dh")),
    authToken: conv(subscription.getKey("auth")),
  });

  const subscription = self.registration.pushManager
    .subscribe(event.oldSubscription.options)
    .then((subscription) =>
      fetch("register", {
        method: "post",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          old: getPayload(event.oldSubscription),
          new: getPayload(subscription),
        }),
      }),
    );
  event.waitUntil(subscription);
});

Khi một sự kiện pushsubscriptionchange đến, cho biết rằng đăng ký đã hết hạn, chúng ta đăng ký lại bằng cách gọi phương thức subscribe() của push manager. Khi promise được trả về được giải quyết, chúng ta nhận được đăng ký mới. Điều này được chuyển đến máy chủ ứng dụng bằng cách sử dụng lệnh gọi fetch() để đăng một phiên bản định dạng JSON của endpoint của đăng ký đến máy chủ ứng dụng.

Bạn cũng có thể sử dụng thuộc tính trình xử lý sự kiện onpushsubscriptionchange để thiết lập trình xử lý sự kiện:

self.onpushsubscriptionchange = (event) => {
  event.waitUntil(
    self.registration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) => {
        /* ... */
      }),
  );
};