หน้านี้ได้รับการแปลโดย Cloud Translation API

การสมัครรับข้อมูลจากผู้ใช้

Matt Gaunt

ขั้นตอนแรกคือขอรับสิทธิ์จากผู้ใช้ให้ส่งข้อความ Push หาพวกเขา จากนั้นเราจึงสามารถ ช่วยกันดูแล PushSubscription

JavaScript API ที่จะดำเนินการดังกล่าว เป็นกระบวนการที่ตรงไปตรงมาพอสมควร ดังนั้นมาเริ่มที่ ผ่านโฟลว์ตรรกะ

การตรวจหาฟีเจอร์

ก่อนอื่นเราต้องตรวจสอบว่าเบราว์เซอร์ปัจจุบันรองรับการรับส่งข้อความพุชจริงหรือไม่ เราสามารถตรวจสอบว่า สามารถพุชได้โดยการตรวจสอบง่ายๆ 2 อย่าง

ตรวจหา serviceWorker ในตัวนำทาง
มองหา PushManager ในหน้าต่าง

if (!('serviceWorker' in navigator)) {
  // Service Worker isn't supported on this browser, disable or hide UI.
  return;
}

if (!('PushManager' in window)) {
  // Push isn't supported on this browser, disable or hide UI.
  return;
}

ในขณะที่การรองรับเบราว์เซอร์กำลังเติบโตอย่างรวดเร็วสำหรับทั้งโปรแกรมทำงานของบริการและ การรับส่งข้อความพุชเป็นความคิดที่ดีเสมอ ที่จะมีการตรวจหาทั้ง ปรับปรุงอย่างต่อเนื่อง

ลงทะเบียน Service Worker

ฟีเจอร์นี้ช่วยให้เราทราบว่าระบบรองรับทั้ง Service Worker และ Push ขั้นตอนถัดไป คือ "ลงทะเบียน" Service Worker

เมื่อลงทะเบียน Service Worker เราจะแจ้งเบราว์เซอร์ว่าไฟล์ Service Worker ของเราอยู่ที่ใด ไฟล์ยังคงเป็นเพียง JavaScript แต่เบราว์เซอร์จะ "ให้สิทธิ์เข้าถึง" ให้กับ Service Worker API รวมถึงพุช กล่าวให้ชัดเจนยิ่งขึ้นคือ เบราว์เซอร์จะเรียกใช้ไฟล์ใน Service Worker ของคุณ

หากต้องการลงทะเบียน Service Worker ให้เรียกใช้ navigator.serviceWorker.register() ผ่านในเส้นทางไปยัง ไฟล์ของเรา ดังนี้

function registerServiceWorker() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      console.log('Service worker successfully registered.');
      return registration;
    })
    .catch(function (err) {
      console.error('Unable to register service worker.', err);
    });
}

ฟังก์ชันนี้จะบอกให้เบราว์เซอร์ทราบว่าเรามีไฟล์ Service Worker และตำแหน่งของไฟล์ ใน ในกรณีนี้ ไฟล์ของ Service Worker จะอยู่ที่ /service-worker.js เบื้องหลังเบราว์เซอร์ จะทำตามขั้นตอนต่อไปนี้หลังจากโทรหา register()

ดาวน์โหลดไฟล์ Service Worker
เรียกใช้ JavaScript
หากทุกอย่างทำงานได้อย่างถูกต้องและไม่มีข้อผิดพลาด แสดงว่า register() ได้ส่งคำสัญญา จะปรากฏขึ้น หากมีข้อผิดพลาดประเภทใดก็ตาม สัญญาจะปฏิเสธ

หาก register() ปฏิเสธ ให้ตรวจสอบ JavaScript อีกครั้งเพื่อหาการพิมพ์ผิด / ข้อผิดพลาดในการสำหรับนักพัฒนาเว็บใน Chrome

เมื่อ register() แปลงค่า ระบบจะแสดง ServiceWorkerRegistration เราจะใช้ การลงทะเบียนเพื่อเข้าถึง PushManager API

ความเข้ากันได้กับเบราว์เซอร์ PushManager API

การรองรับเบราว์เซอร์

แหล่งที่มา

กำลังขอสิทธิ์

เราได้ลงทะเบียน Service Worker แล้วและพร้อมจะสมัครใช้บริการ ขั้นตอนถัดไปคือ สิทธิ์จากผู้ใช้ในการส่งข้อความพุช

API สำหรับการให้สิทธิ์นั้นค่อนข้างเรียบง่าย แต่ข้อเสียก็คือ API เพิ่งเปลี่ยนจากการรับ Callback ไปเป็นการส่งคืน Promise ก็คือเราไม่สามารถบอกได้ว่า API เวอร์ชันใดมีการใช้งานด้วย คุณจึงต้องติดตั้งทั้ง 2 อย่างและจัดการทั้ง 2 อย่าง

function askPermission() {
  return new Promise(function (resolve, reject) {
    const permissionResult = Notification.requestPermission(function (result) {
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then(function (permissionResult) {
    if (permissionResult !== 'granted') {
      throw new Error("We weren't granted permission.");
    }
  });
}

ในโค้ดข้างต้น ข้อมูลโค้ดที่สำคัญคือการเรียก Notification.requestPermission() วิธีนี้จะแสดงข้อความแจ้งแก่ผู้ใช้:

ข้อความแจ้งเกี่ยวกับสิทธิ์ใน Chrome บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

เมื่อผู้ใช้โต้ตอบกับข้อความแจ้งสิทธิ์โดยกด "อนุญาต" "บล็อก" หรือปิดไปเลย เราจะกำหนดให้ผลลัพธ์เป็นสตริง: 'granted', 'default' หรือ 'denied'

ในโค้ดตัวอย่างข้างต้น สัญญาที่ askPermission() แสดงกลับมาจะสำเร็จหากสิทธิ์ ไม่เช่นนั้นเราจะพบข้อผิดพลาดในการปฏิเสธคำสัญญา

กรณีปัญหาอย่างหนึ่งที่คุณต้องจัดการคือ หากผู้ใช้คลิกปุ่ม "บล็อก" หากสิ่งนี้ เว็บแอปของคุณก็จะขอสิทธิ์จากผู้ใช้อีกไม่ได้ พวกเขาจะต้อง "เลิกบล็อก" ด้วยตนเอง แอปของคุณด้วยการเปลี่ยนสถานะสิทธิ์ของแอปที่ฝังอยู่ ในแผงการตั้งค่า คิดให้รอบคอบเกี่ยวกับวิธีและเวลาที่คุณขอสิทธิ์จากผู้ใช้ เพราะหากผู้ใช้คลิกบล็อก ก็ไม่ใช่วิธีง่ายที่จะยกเลิกการตัดสินใจดังกล่าว

ข่าวดีก็คือผู้ใช้ส่วนใหญ่ยินดีให้สิทธิ์ ทราบว่าทำไมมีการขอสิทธิ์

เราจะมาดูกันว่าเว็บไซต์ยอดนิยมบางแห่งจะขอสิทธิ์ได้อย่างไรในภายหลัง

ติดตามผู้ใช้ด้วย PushManager

เมื่อเราลงทะเบียน Service Worker และได้รับอนุญาตแล้ว เราจะสมัครใช้บริการให้ผู้ใช้ได้โดย กำลังโทรหา registration.pushManager.subscribe()

function subscribeUserToPush() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(
          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
        ),
      };

      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then(function (pushSubscription) {
      console.log(
        'Received PushSubscription: ',
        JSON.stringify(pushSubscription),
      );
      return pushSubscription;
    });
}

เมื่อเรียกใช้เมธอด subscribe() เราจะส่งในออบเจ็กต์ options ซึ่งประกอบด้วย พารามิเตอร์ทั้งที่จำเป็นและไม่บังคับ

ลองมาดูตัวเลือกทั้งหมดที่เราสามารถส่งผ่านได้

ตัวเลือก userVisibleOnly เท่านั้น

เมื่อมีการเพิ่มพุชในเบราว์เซอร์เป็นครั้งแรก มีความไม่แน่นอนว่านักพัฒนาควร ส่งข้อความพุชได้และไม่ได้แสดงการแจ้งเตือน โดยทั่วไปเราเรียกว่าโหมดเงียบ เนื่องจากผู้ใช้ไม่ทราบว่ามีบางอย่างเกิดขึ้นในเบื้องหลัง

ข้อกังวลก็คือนักพัฒนาซอฟต์แวร์อาจทำสิ่งที่ไม่เหมาะสม เช่น ติดตามตำแหน่งของผู้ใช้ใน อย่างต่อเนื่องโดยที่ผู้ใช้ไม่ทราบ

เพื่อหลีกเลี่ยงสถานการณ์นี้ และให้เวลาผู้เขียนข้อกำหนดในการพิจารณาวิธีที่ดีที่สุดในการสนับสนุน มีการเพิ่มตัวเลือก userVisibleOnly และการส่งผ่านค่า true จะแสดงเป็นสัญลักษณ์ เห็นด้วยกับเบราว์เซอร์ว่าเว็บแอปจะแสดงการแจ้งเตือนทุกครั้งที่มีการ Push ที่ได้รับ (กล่าวคือ ไม่มีการปิดเสียง)

ในตอนนี้ คุณต้องส่งผ่านค่า true หากไม่ได้ระบุ userVisibleOnly คีย์หรือบัตรผ่านใน false คุณจะได้รับข้อผิดพลาดต่อไปนี้

ปัจจุบัน Chrome รองรับเฉพาะ Push API สำหรับการสมัครใช้บริการที่จะส่งผลให้ ข้อความที่ผู้ใช้มองเห็นได้ คุณสามารถระบุได้โดยโทร pushManager.subscribe({userVisibleOnly: true}) แทน โปรดดู ดูรายละเอียดเพิ่มเติมได้ที่ https://goo.gl/yqv4Q4

ดูเหมือนว่าจะไม่มีการใช้พุชแบบไม่มีเสียงใน Chrome เลย แต่ ผู้เขียนข้อกำหนดกำลังสำรวจแนวคิดเกี่ยวกับ API งบประมาณซึ่งจะช่วยให้เว็บแอป จำนวนข้อความพุชแบบเงียบตามการใช้งานเว็บแอป

ตัวเลือก applicationServerKey

เราได้พูดถึง "คีย์เซิร์ฟเวอร์แอปพลิเคชัน" คร่าวๆ ในส่วนก่อนหน้า "แอปพลิเคชัน คีย์เซิร์ฟเวอร์" ใช้บริการพุชเพื่อระบุแอปพลิเคชันที่สมัครรับข้อมูลผู้ใช้และ ตรวจสอบว่าแอปพลิเคชันเดียวกันกำลังส่งข้อความหาผู้ใช้ดังกล่าว

คีย์เซิร์ฟเวอร์แอปพลิเคชันเป็นคู่คีย์สาธารณะและส่วนตัวที่ไม่ซ้ำกันสำหรับแอปพลิเคชันของคุณ คีย์ส่วนตัวควรเก็บเป็นความลับสำหรับแอปพลิเคชันของคุณและสามารถแชร์คีย์สาธารณะได้ ได้อย่างอิสระ

ตัวเลือก applicationServerKey ที่ส่งผ่านการโทร subscribe() จะเป็นสาธารณะของแอปพลิเคชัน เบราว์เซอร์จะส่งข้อมูลนี้ไปยังบริการพุชเมื่อสมัครใช้บริการผู้ใช้ ซึ่งหมายถึงพุช สามารถเชื่อมโยงคีย์สาธารณะของแอปพลิเคชันกับ PushSubscription ของผู้ใช้ได้

แผนภาพด้านล่างแสดงขั้นตอนเหล่านี้

เว็บแอปของคุณโหลดในเบราว์เซอร์ และคุณเรียกใช้ subscribe() ผ่านแบบสาธารณะ คีย์แอปพลิเคชันเซิร์ฟเวอร์
จากนั้นเบราว์เซอร์จะส่งคำขอเครือข่ายไปยังบริการพุชที่จะสร้างปลายทาง เชื่อมโยงปลายทางนี้กับคีย์สาธารณะของแอปพลิเคชัน แล้วส่งคืนปลายทางไปยัง เบราว์เซอร์
เบราว์เซอร์จะเพิ่มปลายทางนี้ไปยัง PushSubscription ซึ่งแสดงผลผ่าน คำมั่นสัญญาจาก subscribe()

ภาพการใช้คีย์เซิร์ฟเวอร์แอปพลิเคชันสาธารณะใน "สมัคร"

เมื่อต้องการส่งข้อความพุชในภายหลัง คุณจะต้องสร้างส่วนหัวการให้สิทธิ์ ซึ่งจะมีข้อมูลที่ลงนามด้วยคีย์ส่วนตัวของแอปพลิเคชันเซิร์ฟเวอร์ เมื่อ บริการพุชจะได้รับคำขอส่งข้อความพุช ซึ่งจะตรวจสอบความถูกต้องของส่วนหัว Authorization ที่ลงนามนี้ได้ โดยค้นหาคีย์สาธารณะที่ลิงก์กับปลายทางที่รับคำขอ หากลายเซ็นคือ บริการพุชที่ถูกต้องจะรู้ว่าต้องมาจากแอปพลิเคชันเซิร์ฟเวอร์ที่มี คีย์ส่วนตัวที่ตรงกัน มันเป็นมาตรการรักษาความปลอดภัย ที่ป้องกันไม่ให้ใครก็ตาม ข้อความไปยังผู้ใช้แอปพลิเคชัน

วิธีใช้คีย์แอปพลิเคชันเซิร์ฟเวอร์ส่วนตัวเมื่อส่ง
ข้อความ

ในทางเทคนิค คุณจะใช้ applicationServerKey หรือไม่ก็ได้ อย่างไรก็ตาม วิธีที่ง่ายที่สุด Chrome จำเป็นต้องติดตั้งโค้ดดังกล่าว และเบราว์เซอร์อื่นๆ อาจกำหนดให้ดำเนินการ ในอนาคต แต่ไม่บังคับใน Firefox

ข้อกำหนดที่กำหนดว่าคีย์แอปพลิเคชันเซิร์ฟเวอร์ควรเป็นเท่าใด ข้อกำหนดเกี่ยวกับ VAPID เมื่อใดก็ตามที่คุณอ่านข้อมูลที่อ้างอิงถึง "คีย์เซิร์ฟเวอร์แอปพลิเคชัน" หรือ "คีย์ VAPID" โปรดอย่าลืมว่าคีย์ทั้งสองเหมือนกัน

วิธีสร้างคีย์แอปพลิเคชันเซิร์ฟเวอร์

คุณสามารถสร้างชุดคีย์เซิร์ฟเวอร์แอปพลิเคชันแบบสาธารณะและส่วนตัวได้โดยไปที่ web-push-codelab.glitch.me หรือใช้ บรรทัดคำสั่งแบบ Web-push สร้างคีย์โดยทำตามขั้นตอนต่อไปนี้

    $ npm install -g web-push
    $ web-push generate-vapid-keys

คุณต้องสร้างคีย์เหล่านี้เพียงครั้งเดียวสำหรับแอปพลิเคชันของคุณ เพียงแต่ต้องแน่ใจว่าคุณได้เก็บ คีย์ส่วนตัว (ใช่ครับ เราเพิ่งพูดไป)

สิทธิ์และ "ติดตาม"()

การเรียกใช้ subscribe() มีผลข้างเคียงอย่างใดอย่างหนึ่ง หากเว็บแอปไม่มีสิทธิ์ แสดงการแจ้งเตือนเมื่อเรียกใช้ subscribe() เบราว์เซอร์จะขอ สิทธิ์สำหรับคุณ วิธีนี้มีประโยชน์หาก UI ทำงานกับขั้นตอนนี้ได้ แต่หากคุณต้องการ ควบคุม (และฉันคิดว่านักพัฒนาซอฟต์แวร์ส่วนใหญ่จะ) ยึด Notification.requestPermission() API ไว้ ที่เราใช้ก่อนหน้านี้

PushSubscription คืออะไร

เราเรียกใช้ subscribe() ซึ่งก็ผ่านในทางเลือกบางอย่าง และในทางกลับกัน เราก็ได้รับคำมั่นสัญญาที่แก้ไขปัญหา PushSubscription ทำให้เกิดโค้ดบางอย่างเช่นนี้:

function subscribeUserToPush() {
  return navigator.serviceWorker
    .register('/service-worker.js')
    .then(function (registration) {
      const subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(
          'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U',
        ),
      };

      return registration.pushManager.subscribe(subscribeOptions);
    })
    .then(function (pushSubscription) {
      console.log(
        'Received PushSubscription: ',
        JSON.stringify(pushSubscription),
      );
      return pushSubscription;
    });
}

ออบเจ็กต์ PushSubscription มีข้อมูลที่จำเป็นทั้งหมดในการส่งพุช ข้อความไปยังผู้ใช้รายนั้น หากคุณพิมพ์เนื้อหาโดยใช้ JSON.stringify() คุณจะเห็น ดังต่อไปนี้:

    {
      "endpoint": "https://some.pushservice.com/something-unique",
      "keys": {
        "p256dh":
    "BIPUL12DLfytvTajnryr2PRdAgXS3HGKiLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WAkAPIxr4gK0_dQds4yiI=",
        "auth":"FPssNDTKnInHVndSTdbKFw=="
      }
    }

endpoint คือ URL ของบริการพุช หากต้องการทริกเกอร์ข้อความพุช ให้ส่งคำขอ POST มาที่ URL นี้

ออบเจ็กต์ keys มีค่าที่ใช้ในการเข้ารหัสข้อมูลข้อความที่ส่งด้วยข้อความพุช (ซึ่งเราจะพูดถึงในภายหลังในส่วนนี้)

การสมัครใช้บริการใหม่ตามปกติเพื่อป้องกันไม่ให้หมดอายุ

เมื่อสมัครรับข้อความ Push คุณมักจะได้รับ PushSubscription.expirationTime ของ null ในทางทฤษฎี หมายความว่าการสมัครใช้บริการไม่มีวันหมดอายุ (ต่างจากเมื่อคุณได้รับ DOMHighResTimeStamp ซึ่งบอกเวลาที่แน่นอนที่การสมัครใช้บริการจะหมดอายุ) อย่างไรก็ตาม ในทางปฏิบัติแล้ว เป็นเรื่องปกติที่เบราว์เซอร์ยังคงปล่อยให้การสมัครใช้บริการหมดอายุ เช่น หากไม่ได้รับข้อความ Push เป็นเวลานานขึ้น หรือหากเบราว์เซอร์ตรวจพบว่าผู้ใช้ไม่ได้ใช้แอปที่มีสิทธิ์ข้อความ Push วิธีหนึ่งที่จะป้องกันเหตุการณ์ดังกล่าวคือ สมัครรับข่าวสารให้ผู้ใช้อีกครั้งเมื่อได้รับการแจ้งเตือน ดังที่แสดงในข้อมูลโค้ดต่อไปนี้ ซึ่งคุณต้องส่งการแจ้งเตือนบ่อยๆ เพื่อไม่ให้เบราว์เซอร์หมดอายุโดยอัตโนมัติ และควรชั่งน้ำหนักดูข้อดีและข้อเสียของการแจ้งเตือนที่ถูกต้องตามกฎหมายเพื่อไม่ให้การสแปมผู้ใช้โดยไม่ตั้งใจ เพื่อให้การสมัครใช้บริการไม่หมดอายุ ท้ายที่สุดแล้ว คุณก็ไม่ควรพยายามต่อสู้กับเบราว์เซอร์ในความพยายามที่จะปกป้องผู้ใช้จากการสมัครรับข้อมูลการแจ้งเตือนที่ถูกลืมไปนาน

/* In the Service Worker. */

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  // Display notification or handle data
  // Example: show a notification
  const title = 'New Notification';
  const body = 'You have new updates!';
  const icon = '/images/icon.png';
  const tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );

  // Attempt to resubscribe after receiving a notification
  event.waitUntil(resubscribeToPush());
});

function resubscribeToPush() {
  return self.registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (subscription) {
        return subscription.unsubscribe();
      }
    })
    .then(function() {
      return self.registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY_HERE')
      });
    })
    .then(function(subscription) {
      console.log('Resubscribed to push notifications:', subscription);
      // Optionally, send new subscription details to your server
    })
    .catch(function(error) {
      console.error('Failed to resubscribe:', error);
    });
}

ส่งการสมัครใช้บริการไปยังเซิร์ฟเวอร์ของคุณ

เมื่อมีการสมัครใช้บริการพุชแล้ว คุณจะต้องส่งการสมัครใช้บริการนั้นไปยังเซิร์ฟเวอร์ ก็ขึ้นอยู่กับคุณว่า ทำแบบนั้น แต่เคล็ดลับเล็กๆ น้อยๆ คือการใช้ JSON.stringify() ดึงข้อมูลที่จำเป็นทั้งหมดจาก ออบเจ็กต์การสมัครใช้บริการ หรือคุณจะปะติดปะต่อกัน ผลลัพธ์ด้วยตนเอง เช่น:

const subscriptionObject = {
  endpoint: pushSubscription.endpoint,
  keys: {
    p256dh: pushSubscription.getKeys('p256dh'),
    auth: pushSubscription.getKeys('auth'),
  },
};

// The above is the same output as:

const subscriptionObjectToo = JSON.stringify(pushSubscription);

การส่งการสมัครรับข้อมูลจะทำในหน้าเว็บดังนี้:

function sendSubscriptionToBackEnd(subscription) {
  return fetch('/api/save-subscription/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(subscription),
  })
    .then(function (response) {
      if (!response.ok) {
        throw new Error('Bad status code from server.');
      }

      return response.json();
    })
    .then(function (responseData) {
      if (!(responseData.data && responseData.data.success)) {
        throw new Error('Bad response from server.');
      }
    });
}

เซิร์ฟเวอร์โหนดได้รับคำขอนี้ และบันทึกข้อมูลลงในฐานข้อมูลเพื่อการใช้งานในภายหลัง

app.post('/api/save-subscription/', function (req, res) {
  if (!isValidSaveRequest(req, res)) {
    return;
  }

  return saveSubscriptionToDatabase(req.body)
    .then(function (subscriptionId) {
      res.setHeader('Content-Type', 'application/json');
      res.send(JSON.stringify({data: {success: true}}));
    })
    .catch(function (err) {
      res.status(500);
      res.setHeader('Content-Type', 'application/json');
      res.send(
        JSON.stringify({
          error: {
            id: 'unable-to-save-subscription',
            message:
              'The subscription was received but we were unable to save it to our database.',
          },
        }),
      );
    });
});

หากมีรายละเอียด PushSubscription ในเซิร์ฟเวอร์ของเรา เราก็สามารถส่งผู้ใช้ได้เลย ข้อความได้ทุกเมื่อที่ต้องการ

การสมัครใช้บริการใหม่ตามปกติเพื่อป้องกันไม่ให้หมดอายุ

เมื่อสมัครรับข้อความ Push คุณมักจะได้รับ PushSubscription.expirationTime ของ null ในทางทฤษฎี หมายความว่าการสมัครใช้บริการไม่มีวันหมดอายุ (ต่างจากเมื่อคุณได้รับ DOMHighResTimeStamp ซึ่งบอกเวลาที่แน่นอนที่การสมัครใช้บริการจะหมดอายุ) อย่างไรก็ตาม ในทางปฏิบัติแล้ว เป็นเรื่องปกติที่เบราว์เซอร์ยังคงปล่อยให้การสมัครใช้บริการหมดอายุ เช่น หากไม่ได้รับข้อความ Push เป็นเวลานาน หรือหากเบราว์เซอร์ตรวจพบว่าผู้ใช้ไม่ได้ใช้แอปที่มีสิทธิ์ข้อความ Push วิธีหนึ่งที่จะป้องกันเหตุการณ์ดังกล่าวคือ สมัครรับข่าวสารให้ผู้ใช้อีกครั้งเมื่อได้รับการแจ้งเตือน ดังที่แสดงในข้อมูลโค้ดต่อไปนี้ ซึ่งคุณต้องส่งการแจ้งเตือนบ่อยๆ เพื่อไม่ให้เบราว์เซอร์หมดอายุโดยอัตโนมัติ และควรชั่งน้ำหนักดูข้อดีและข้อเสียของการแจ้งเตือนที่ถูกต้องเพื่อไม่ให้มีการส่งสแปมผู้ใช้ เพื่อไม่ให้การสมัครรับข้อมูลหมดอายุ ท้ายที่สุดแล้ว คุณก็ไม่ควรพยายามต่อสู้กับเบราว์เซอร์ในความพยายามที่จะปกป้องผู้ใช้จากการสมัครรับข้อมูลการแจ้งเตือนที่ถูกลืมไปนาน

/* In the Service Worker. */

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  // Display notification or handle data
  // Example: show a notification
  const title = 'New Notification';
  const body = 'You have new updates!';
  const icon = '/images/icon.png';
  const tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );

  // Attempt to resubscribe after receiving a notification
  event.waitUntil(resubscribeToPush());
});

function resubscribeToPush() {
  return self.registration.pushManager.getSubscription()
    .then(function(subscription) {
      if (subscription) {
        return subscription.unsubscribe();
      }
    })
    .then(function() {
      return self.registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY_HERE')
      });
    })
    .then(function(subscription) {
      console.log('Resubscribed to push notifications:', subscription);
      // Optionally, send new subscription details to your server
    })
    .catch(function(error) {
      console.error('Failed to resubscribe:', error);
    });
}

คำถามที่พบบ่อย

คำถามทั่วไปสองสามข้อที่ผู้คนสงสัยในช่วงนี้ ได้แก่

ฉันสามารถเปลี่ยนบริการพุชที่เบราว์เซอร์ใช้ได้ไหม

ไม่ บริการพุชถูกเลือกโดยเบราว์เซอร์ และอย่างที่เราเห็น subscribe() การเรียกใช้ เบราว์เซอร์จะส่งคำขอเครือข่ายไปยังบริการพุช เพื่อเรียกดูรายละเอียดที่ประกอบขึ้นเป็น PushSubscription

แต่ละเบราว์เซอร์ใช้บริการพุชที่แตกต่างกัน แล้วก็ไม่มี API ต่างกันใช่หรือไม่

บริการพุชทั้งหมดคาดหวัง API เดียวกัน

API ทั่วไปนี้เรียกว่า โปรโตคอลการพุชในเว็บ และอธิบายคำขอเครือข่าย แอปพลิเคชันของคุณจะต้องทำให้ ทริกเกอร์ข้อความพุช

หากฉันติดตามผู้ใช้บนเดสก์ท็อป ผู้ใช้รายดังกล่าวจะสมัครรับข้อมูลบนโทรศัพท์ด้วยไหม

ไม่ได้ ต้องขออภัยด้วย ผู้ใช้ต้องลงทะเบียนเพื่อพุชในแต่ละเบราว์เซอร์ที่ต้องการ รับข้อความใน และคุณควรทราบว่าจะต้อง ผู้ใช้ที่ให้สิทธิ์ในอุปกรณ์แต่ละเครื่อง

การสมัครรับข้อมูลจากผู้ใช้

การตรวจหาฟีเจอร์

ลงทะเบียน Service Worker

ความเข้ากันได้กับเบราว์เซอร์ PushManager API

กำลังขอสิทธิ์

ติดตามผู้ใช้ด้วย PushManager

ตัวเลือก userVisibleOnly เท่านั้น

ตัวเลือก applicationServerKey

วิธีสร้างคีย์แอปพลิเคชันเซิร์ฟเวอร์

สิทธิ์และ "ติดตาม"()

PushSubscription คืออะไร

การสมัครใช้บริการใหม่ตามปกติเพื่อป้องกันไม่ให้หมดอายุ

ส่งการสมัครใช้บริการไปยังเซิร์ฟเวอร์ของคุณ

การสมัครใช้บริการใหม่ตามปกติเพื่อป้องกันไม่ให้หมดอายุ

คำถามที่พบบ่อย

ฉันสามารถเปลี่ยนบริการพุชที่เบราว์เซอร์ใช้ได้ไหม

แต่ละเบราว์เซอร์ใช้บริการพุชที่แตกต่างกัน แล้วก็ไม่มี API ต่างกันใช่หรือไม่

หากฉันติดตามผู้ใช้บนเดสก์ท็อป ผู้ใช้รายดังกล่าวจะสมัครรับข้อมูลบนโทรศัพท์ด้วยไหม

สถานที่ที่จะไปต่อ

Code Lab