เพิ่มข้อความ Push ลงในเว็บแอป

1. ภาพรวม

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

สิ่งที่คุณจะได้เรียนรู้

วิธีสมัครรับและยกเลิกการสมัครรับข้อความพุชสำหรับผู้ใช้
วิธีจัดการข้อความ Push ขาเข้า
วิธีแสดงการแจ้งเตือน
วิธีตอบสนองต่อการคลิกการแจ้งเตือน

สิ่งที่คุณต้องมี

Chrome 52 ขึ้นไป
Web Server for Chrome หรือเว็บเซิร์ฟเวอร์ที่คุณเลือก
โปรแกรมแก้ไขข้อความ
ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, JavaScript และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
โค้ดตัวอย่าง (ดูเริ่มต้นใช้งาน)

2. ตั้งค่า

ดาวน์โหลดโค้ดตัวอย่าง

คุณรับโค้ดตัวอย่างสำหรับ Codelab นี้ได้ 2 วิธีดังนี้

โคลนที่เก็บ Git

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

ดาวน์โหลดไฟล์ ZIP โดยทำดังนี้

หากดาวน์โหลดแหล่งข้อมูลเป็นไฟล์ ZIP การแตกไฟล์จะทำให้คุณได้โฟลเดอร์รูท push-notifications-master

ติดตั้งและยืนยันเว็บเซิร์ฟเวอร์

แม้ว่าคุณจะใช้เว็บเซิร์ฟเวอร์ของคุณเองได้ แต่ Codelab นี้ออกแบบมาให้ทำงานได้ดีกับแอป Web Server for Chrome หากยังไม่ได้ติดตั้งแอปดังกล่าว คุณสามารถดาวน์โหลดได้จาก Chrome เว็บสโตร์

หลังจากติดตั้งแอป Web Server for Chrome แล้ว ให้คลิกทางลัดแอปในแถบบุ๊กมาร์ก

ในหน้าต่างแอป ให้คลิกไอคอนเว็บเซิร์ฟเวอร์

จากนั้นคุณจะเห็นกล่องโต้ตอบนี้ ซึ่งช่วยให้คุณกำหนดค่าเว็บเซิร์ฟเวอร์ในเครื่องได้

คลิกปุ่มเลือกโฟลเดอร์ แล้วเลือกโฟลเดอร์ app ในโฟลเดอร์ push-notifications ที่คุณดาวน์โหลด ซึ่งจะช่วยให้คุณแสดงงานที่กำลังดำเนินการผ่าน URL ที่แสดงในส่วน URL ของเว็บเซิร์ฟเวอร์ของกล่องโต้ตอบได้

ในส่วนตัวเลือก ให้เลือกช่องข้างแสดง index.html โดยอัตโนมัติ ดังที่แสดงด้านล่าง

จากนั้นหยุดและรีสตาร์ทเซิร์ฟเวอร์โดยเลื่อนปุ่มเปิด/ปิดเว็บเซิร์ฟเวอร์: เริ่มแล้วไปทางซ้าย แล้วเลื่อนกลับไปทางขวา

คลิก URL ของเว็บเซิร์ฟเวอร์เพื่อไปที่เว็บไซต์ในเว็บเบราว์เซอร์ คุณควรเห็นหน้าเว็บที่มีลักษณะดังนี้ แม้ว่าเวอร์ชันของคุณอาจแสดง 127.0.0.1:8887 เป็นที่อยู่

อัปเดต Service Worker เสมอ

ในระหว่างการพัฒนา การตรวจสอบว่า Service Worker เป็นเวอร์ชันล่าสุดและมีการเปลี่ยนแปลงล่าสุดอยู่เสมอจะเป็นประโยชน์

วิธีตั้งค่านี้ใน Chrome

ไปที่แท็บ Push Codelab
เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์: Ctrl-Shift-I ใน Windows และ Linux, Cmd-Option-I ใน macOS
เลือกแผงแอปพลิเคชัน คลิกแท็บ Service Worker แล้วเลือกช่องทำเครื่องหมายอัปเดตเมื่อโหลดซ้ำ เมื่อเปิดใช้ช่องทำเครื่องหมายนี้ ระบบจะบังคับอัปเดต Service Worker ทุกครั้งที่หน้าเว็บโหลดซ้ำ

3. ลงทะเบียน Service Worker

โค้ดที่เสร็จสมบูรณ์

ในไดเรกทอรี app คุณจะเห็นไฟล์ว่างชื่อ sw.js ไฟล์นี้จะเป็น Service Worker ตอนนี้คุณเว้นว่างไว้ได้ คุณจะเพิ่มโค้ดลงในไฟล์นี้ในภายหลัง

ก่อนอื่น คุณต้องลงทะเบียนไฟล์นี้เป็น Service Worker

app/index.html หน้าเว็บ scripts/main.jsจะโหลด คุณลงทะเบียน Service Worker ในไฟล์ JavaScript นี้

เพิ่มโค้ดต่อไปนี้ลงใน 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';
}

โค้ดนี้จะตรวจสอบว่าเบราว์เซอร์รองรับ Service Worker และการรับส่งข้อความแบบพุชหรือไม่ หากรองรับ โค้ดจะลงทะเบียนไฟล์ sw.js

ลองเลย

ตรวจสอบการเปลี่ยนแปลงโดยรีเฟรชแท็บ Push Codelab ในเบราว์เซอร์

ตรวจสอบคอนโซลในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดู Service Worker is registered message ดังนี้

รับคีย์เซิร์ฟเวอร์แอปพลิเคชัน

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

คุณสร้างคู่คีย์สาธารณะและส่วนตัวได้ที่นี่

คัดลอกคีย์สาธารณะลงใน scripts/main.js โดยแทนที่ค่า <Your Public Key>

const applicationServerPublicKey = '<Your Public Key>';

สำคัญ: คุณไม่ควรใส่คีย์ส่วนตัวในเว็บแอป

4. สถานะเริ่มต้น

โค้ดที่เสร็จสมบูรณ์

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

คุณจะต้องสร้างฟังก์ชัน 2 รายการใน scripts/main.js ดังนี้

initializeUI เพื่อตรวจสอบว่าผู้ใช้สมัครใช้บริการอยู่หรือไม่
updateBtn เพื่อเปิดใช้ปุ่มและเปลี่ยนข้อความตามว่าผู้ใช้ได้สมัครใช้บริการหรือไม่

เพิ่มฟังก์ชัน initializeUI ลงใน main.js ดังนี้

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

เมธอดใหม่จะใช้ swRegistration จากขั้นตอนก่อนหน้า รับพร็อพเพอร์ตี้ pushManager จากพร็อพเพอร์ตี้นั้น และเรียกใช้ getSubscription() ในพร็อพเพอร์ตี้นั้น

pushManager. getSubscription() จะแสดงผล Promise ที่แก้ไขด้วยการสมัครใช้บริการปัจจุบันหากมี ไม่เช่นนั้น ระบบจะแสดงผลเป็น null ด้วยวิธีนี้ คุณจะตรวจสอบได้ว่าผู้ใช้สมัครใช้บริการอยู่แล้วหรือไม่ ตั้งค่า isSubscribed แล้วเรียกใช้ updateBtn() เพื่ออัปเดตปุ่ม

เพิ่มฟังก์ชัน updateBtn() ใน main.js โดยทำดังนี้

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

  pushButton.disabled = false;
}

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

สิ่งสุดท้ายที่ต้องทำคือเรียกใช้ initializeUI() เมื่อลงทะเบียน Service Worker ใน main.js แล้ว

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

  swRegistration = swReg;
  initializeUI();
})

ลองเลย

รีเฟรชแท็บ Push Codelab คุณควรเห็นว่าปุ่มเปิดใช้ข้อความพุชเปิดใช้แล้ว (คุณคลิกได้) และคุณควรเห็น User is NOT subscribed ในคอนโซล

เมื่อทำตาม Codelab นี้ไปเรื่อยๆ คุณจะเห็นข้อความในปุ่มเปลี่ยนแปลงทุกครั้งที่สมัครรับข้อมูลหรือยกเลิกการสมัครรับข้อมูล

5. สมัครรับข้อมูลให้ผู้ใช้

โค้ดที่เสร็จสมบูรณ์

ในตอนนี้ ปุ่มเปิดใช้การรับส่งข้อความพุชยังไม่มีฟังก์ชันการทำงานมากนัก เรามาแก้ปัญหานั้นกันดีกว่า

ในฟังก์ชัน initializeUI() ให้เพิ่ม Listener การคลิกสำหรับปุ่ม

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

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

จากนั้นคุณจะเรียกใช้ subscribeUser() หากผู้ใช้ไม่ได้สมัครใช้บริการในขณะนั้น โดยคุณจะต้องวางโค้ดต่อไปนี้ลงใน 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();
  });
}

มาดูว่าโค้ดนี้ทำอะไรและสมัครรับข้อความพุชสำหรับผู้ใช้อย่างไร

ก่อนอื่น คุณต้องใช้คีย์สาธารณะของเซิร์ฟเวอร์แอปพลิเคชันซึ่งเข้ารหัส URL ที่ปลอดภัยแบบ Base64 แล้วแปลงเป็น UInt8Array เนื่องจากนี่คืออินพุตที่คาดไว้ของการเรียก subscribe() ฟังก์ชัน urlB64ToUint8Array() อยู่ที่ด้านบนของ scripts/main.js

หลังจากแปลงค่าแล้ว ให้เรียกใช้เมธอด subscribe() ใน pushManager ของ Service Worker โดยส่งคีย์สาธารณะของเซิร์ฟเวอร์แอปพลิเคชันและค่า userVisibleOnly: true

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

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

การเรียกใช้ subscribe() จะแสดงผล Promise ที่จะได้รับการแก้ไขหลังจากขั้นตอนต่อไปนี้

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

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

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

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

ในแอปพลิเคชันจริง ฟังก์ชัน updateSubscriptionOnServer() คือที่ที่คุณจะส่งข้อมูลการสมัครใช้บริการไปยังแบ็กเอนด์ แต่สำหรับโค้ดแล็บ คุณเพียงแค่แสดงการสมัครใช้บริการใน UI เพิ่มฟังก์ชันต่อไปนี้ลงใน 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');
  }
}

ลองเลย

ไปที่แท็บ Push Codelab รีเฟรชหน้าเว็บ แล้วคลิกปุ่ม คุณควรเห็นข้อความแจ้งขอสิทธิ์ดังนี้

หากให้สิทธิ์ คุณจะเห็น User is subscribed บันทึกในคอนโซล ข้อความของปุ่มจะเปลี่ยนเป็นปิดใช้ข้อความพุช และคุณจะดูการสมัครใช้บริการเป็นข้อมูล JSON ได้ที่ด้านล่างของหน้า

6. จัดการเมื่อถูกปฏิเสธสิทธิ์

โค้ดที่เสร็จสมบูรณ์

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

สถานที่ที่ชัดเจนในการจัดการสถานการณ์นี้คือในฟังก์ชัน updateBtn() สิ่งที่คุณต้องทำคือตรวจสอบค่า Notification.permission ดังนี้

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

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

ลองเลย

เนื่องจากคุณได้ให้สิทธิ์สำหรับเว็บแอปจากขั้นตอนก่อนหน้าแล้ว คุณจึงต้องคลิก i ในวงกลมในแถบ URL แล้วเปลี่ยนสิทธิ์การแจ้งเตือนเป็นใช้ค่าเริ่มต้นส่วนกลาง (ถาม)

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

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

7. จัดการเหตุการณ์พุช

โค้ดที่เสร็จสมบูรณ์

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

เมื่อคุณทริกเกอร์ข้อความ Push เบราว์เซอร์จะได้รับข้อความ Push ค้นหาว่าข้อความ Push นั้นมีไว้สำหรับ Service Worker ใด ปลุก Service Worker นั้น และส่งเหตุการณ์ Push คุณต้องรอฟังเหตุการณ์นี้และแสดงการแจ้งเตือนเป็นผลลัพธ์

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ 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));
});

มาดูโค้ดนี้กัน คุณกำลังรอเหตุการณ์ push ใน Service Worker โดยการเพิ่มเครื่องมือฟังเหตุการณ์

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

(self อาจเป็นสิ่งใหม่สำหรับคุณหากไม่เคยใช้ Web Worker มาก่อน ในไฟล์ Service Worker self จะอ้างอิงถึง Service Worker เอง)

เมื่อได้รับข้อความ Push ระบบจะเรียกใช้เครื่องมือฟังเหตุการณ์ และคุณจะสร้างการแจ้งเตือนได้โดยเรียกใช้ showNotification() ในพร็อพเพอร์ตี้ registration ของ Service Worker showNotification() ต้องมี title คุณยังระบุออบเจ็กต์ options เพื่อตั้งค่าข้อความเนื้อหา ไอคอน และป้ายได้ด้วย (ป้ายนี้ใช้ใน Android เท่านั้น ณ เวลาที่เขียน)

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

สิ่งสุดท้ายที่ต้องกล่าวถึงในการจัดการเหตุการณ์ push คือ event.waitUntil() เมธอดนี้ใช้ Promise เพื่อให้เบราว์เซอร์รักษาสถานะของ Service Worker ให้ทำงานต่อไปจนกว่า Promise ที่ส่งผ่านจะได้รับการแก้ไข

หากต้องการให้โค้ดด้านบนเข้าใจง่ายขึ้น คุณสามารถเขียนใหม่ได้ดังนี้

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

เมื่อได้ดูขั้นตอนของเหตุการณ์พุชแล้ว มาทดสอบเหตุการณ์พุชกัน

ลองเลย

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

ในเว็บแอป ให้สมัครรับข้อความพุชและตรวจสอบว่าคุณเห็น User IS subscribed ในคอนโซล ในแผงแอปพลิเคชันในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกปุ่ม Push ในแท็บ Service Worker

หลังจากคลิก Push คุณจะเห็นการแจ้งเตือนดังนี้

หมายเหตุ: หากขั้นตอนนี้ไม่ได้ผล ให้ลองยกเลิกการลงทะเบียน Service Worker ด้วยลิงก์ยกเลิกการลงทะเบียนในแผงแอปพลิเคชัน DevTools รอให้ระบบหยุด Service Worker แล้วโหลดหน้าเว็บซ้ำ

8. การคลิกการแจ้งเตือน

โค้ดที่เสร็จสมบูรณ์

หากคลิกการแจ้งเตือนเหล่านี้ คุณจะเห็นว่าไม่มีอะไรเกิดขึ้น คุณจัดการการคลิกการแจ้งเตือนได้โดยการฟังเหตุการณ์ notificationclick ใน Service Worker

เริ่มต้นด้วยการเพิ่มnotificationclickผู้ฟังใน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')
  );
});

เมื่อผู้ใช้คลิกการแจ้งเตือน ระบบจะเรียกใช้ Listener เหตุการณ์ notificationclick

โค้ดจะปิดการแจ้งเตือนที่คลิกก่อน

event.notification.close();

จากนั้นระบบจะเปิดหน้าต่างหรือแท็บใหม่และโหลด URL https://developers.google.com/web คุณสามารถเปลี่ยนการตั้งค่านี้ได้

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

event.waitUntil() ช่วยให้มั่นใจว่าเบราว์เซอร์จะไม่สิ้นสุดการทำงานของ Service Worker ก่อนที่จะแสดงหน้าต่างหรือแท็บใหม่

ลองเลย

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

9. ส่งข้อความ Push

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

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

ซึ่งอยู่นอกขอบเขตของ Codelab นี้ แต่คุณสามารถใช้เว็บไซต์คู่กัน ( web-push-codelab.glitch.me) เพื่อทริกเกอร์ข้อความพุชจริงได้ วางการติดตามที่ด้านล่างของหน้าเว็บ

จากนั้นวางข้อความนี้ลงในเว็บไซต์คู่ในพื้นที่ข้อความการสมัครใช้บริการเพื่อส่งถึง

ในส่วนข้อความที่จะส่ง ให้เพิ่มสตริงที่ต้องการส่งพร้อมกับข้อความพุช

คลิกปุ่มส่งข้อความพุช

จากนั้นคุณควรได้รับข้อความ Push ระบบจะบันทึกข้อความที่คุณใช้ไว้ในคอนโซล

ซึ่งจะช่วยให้คุณมีโอกาสทดสอบการส่งและรับข้อมูล รวมถึงจัดการการแจ้งเตือนได้

แอปคู่คือเซิร์ฟเวอร์โหนดที่ใช้ไลบรารี Web Push เพื่อส่งข้อความ คุณควรตรวจสอบองค์กร web-push-libs ใน GitHub เพื่อดูว่ามีไลบรารีใดบ้างที่พร้อมส่งข้อความพุชให้คุณ ซึ่งจะจัดการรายละเอียดต่างๆ มากมายเพื่อทริกเกอร์ข้อความพุช

คุณดูโค้ดทั้งหมดของเว็บไซต์คู่มือได้ที่นี่

10. ยกเลิกการติดตามผู้ใช้

โค้ดที่เสร็จสมบูรณ์

แต่ยังไม่มีฟีเจอร์ยกเลิกการสมัครรับข้อความพุชของผู้ใช้ หากต้องการดำเนินการนี้ คุณต้องโทรหา unsubscribe() ใน PushSubscription

กลับไปที่ไฟล์ scripts/main.js แล้วเปลี่ยน pushButton ตัวตรวจหาการคลิกใน initializeUI() เป็นดังนี้

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

โปรดทราบว่าตอนนี้คุณจะเรียกใช้ฟังก์ชันใหม่ unsubscribeUser() ในฟังก์ชันนี้ คุณจะได้รับการสมัครใช้บริการปัจจุบันและเรียกใช้ unsubscribe() ในการสมัครใช้บริการนั้น เพิ่มโค้ดต่อไปนี้ลงใน 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();
  });
}

มาดูฟังก์ชันนี้กัน

ก่อนอื่น คุณต้องสมัครใช้บริการปัจจุบันโดยโทรหา getSubscription() ดังนี้

swRegistration.pushManager.getSubscription()

ซึ่งจะแสดงผล Promise ที่เปลี่ยนเป็น PushSubscription หากมีอยู่ หรือแสดงผล null หากไม่มี หากมีการสมัครใช้บริการ คุณจะเรียกใช้ unsubscribe() ในการสมัครใช้บริการนั้น ซึ่งจะทำให้ PushSubscription ไม่ถูกต้อง

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

การเรียกใช้ unsubscribe() จะแสดงผล Promise เนื่องจากอาจใช้เวลาสักครู่ในการดำเนินการให้เสร็จสิ้น คุณจะส่งคืน Promise นั้นเพื่อให้ then() รายการถัดไปในเชนรอให้ unsubscribe() เสร็จสิ้น นอกจากนี้ คุณยังเพิ่มตัวแฮนเดิล catch ในกรณีที่การเรียกใช้ unsubscribe() ทำให้เกิดข้อผิดพลาดได้ด้วย หลังจากนั้น คุณจะอัปเดต UI ได้

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

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

  updateBtn();
})

ลองเลย

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

11. เสร็จแล้ว

ขอแสดงความยินดีที่ทำ Codelab นี้เสร็จสมบูรณ์

Codelab นี้ได้แสดงให้เห็นวิธีเริ่มต้นใช้งานการเพิ่มการแจ้งเตือนแบบพุชลงในเว็บแอป หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่การแจ้งเตือนบนเว็บทำได้ โปรดดูเอกสารเหล่านี้

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

อ่านเพิ่มเติม

ข้อความ Push จากเว็บ: เอกสารประกอบเกี่ยวกับหลักพื้นฐานในการทำเว็บไซต์
ไลบรารีการแจ้งเตือนแบบพุชบนเว็บ: ไลบรารีการแจ้งเตือนแบบพุชบนเว็บ ซึ่งรวมถึง Node.js, PHP, Java, Python, C และ C#

เพิ่มข้อความ Push ลงในเว็บแอป

1. ภาพรวม

สิ่งที่คุณจะได้เรียนรู้

สิ่งที่คุณต้องมี

2. ตั้งค่า

ดาวน์โหลดโค้ดตัวอย่าง

ติดตั้งและยืนยันเว็บเซิร์ฟเวอร์

อัปเดต Service Worker เสมอ

3. ลงทะเบียน Service Worker

ลองเลย

รับคีย์เซิร์ฟเวอร์แอปพลิเคชัน

4. สถานะเริ่มต้น

ลองเลย

5. สมัครรับข้อมูลให้ผู้ใช้

ลองเลย

6. จัดการเมื่อถูกปฏิเสธสิทธิ์

ลองเลย

7. จัดการเหตุการณ์พุช

ลองเลย

8. การคลิกการแจ้งเตือน

ลองเลย

9. ส่งข้อความ Push

10. ยกเลิกการติดตามผู้ใช้

ลองเลย

11. เสร็จแล้ว

อ่านเพิ่มเติม

บล็อกโพสต์ที่เกี่ยวข้อง