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

การเพิ่มข้อความ Push ไปยังเว็บแอป

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

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

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

สิ่งที่ต้องมี

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

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

คุณมี 2 ตัวเลือกในการรับโค้ดตัวอย่างจาก Codelab ดังนี้

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

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

ดาวน์โหลดไฟล์ ZIP:

ดาวน์โหลดซอร์สโค้ด

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

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

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

ติดตั้งเว็บเซิร์ฟเวอร์สําหรับ Chrome

หลังจากติดตั้งแอปเว็บเซิร์ฟเวอร์สําหรับ Chrome แล้ว ให้คลิกทางลัดแอปในแถบบุ๊กมาร์ก

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

คุณจะเห็นกล่องโต้ตอบถัดไปที่ให้คุณกําหนดค่าเว็บเซิร์ฟเวอร์ในเครื่องดังนี้

คลิกปุ่มเลือกโฟลเดอร์ แล้วเลือกโฟลเดอร์ 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 ทุกครั้งที่โหลดหน้าซ้ํา

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

ตรวจสอบว่าคุณมีไฟล์เปล่าชื่อ sw.js ในไดเรกทอรี app ไฟล์นี้จะเป็น 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';
}

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

ลองเลย

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

ตรวจสอบคอนโซลใน Chrome DevTools สําหรับ Service Worker is registered message ดังนี้

ดาวน์โหลดคีย์เซิร์ฟเวอร์แอปพลิเคชัน

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

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

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

const applicationServerPublicKey = '<Your Public Key>';

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

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

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

คุณจะต้องสร้าง 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() จะแสดงคําสัญญาที่เปลี่ยนไปเป็นการสมัครใช้บริการปัจจุบันหากมี หากไม่ใช่ ระบบจะส่งคืน 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 นี้ คุณจะเห็นการเปลี่ยนแปลงข้อความของปุ่มทุกครั้งที่คุณสมัครใช้บริการหรือยกเลิกการสมัคร

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

ปัจจุบันปุ่มเปิดใช้การรับส่งข้อความ Push ไม่ทํางานมากนัก เรามาแก้ปัญหานั้นกันดีกว่า

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

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

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

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

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

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

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

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

สัญญา subscribe() จะตกลงด้วย PushSubscription หากขั้นตอนเหล่านี้สําเร็จ หากผู้ใช้ไม่ได้ให้สิทธิ์หรือหากมีปัญหาในการสมัครใช้บริการของผู้ใช้ สัญญาจะปฏิเสธโดยมีข้อผิดพลาด ซึ่งจะทําให้ได้เชนสัญญาต่อไปนี้ใน 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() คือที่ที่คุณจะส่งข้อมูลการสมัครใช้บริการไปยังแบ็กเอนด์ แต่สําหรับ Codelab นั้นเพียงแค่แสดงการสมัครใช้บริการใน 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 ที่บันทึกไว้ในคอนโซล ข้อความของปุ่มจะเปลี่ยนเป็นปิดใช้การรับส่งข้อความ Push และคุณจะดูการสมัครใช้บริการเป็นข้อมูล JSON ได้ที่ด้านล่างของหน้าเว็บ

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

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

ตําแหน่งที่แน่นอนในการจัดการสถานการณ์นี้คือในฟังก์ชัน 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 และเปลี่ยนสิทธิ์การแจ้งเตือนเป็นใช้ค่าเริ่มต้นส่วนกลาง (ถาม)

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

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

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

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

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

เพิ่มโค้ดต่อไปนี้ในไฟล์ 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 ด้วยการเพิ่ม Listener เหตุการณ์ ดังนี้

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

(หากไม่เคยทํางานกับ Web Worker มาก่อน self อาจไม่ใช่อุปกรณ์ใหม่เลย แต่ในไฟล์ Service Worker จะทําให้ self อ้างอิงตัว Service Worker เอง)

เมื่อได้รับข้อความพุช ระบบจะเรียก Listener เหตุการณ์ และคุณสามารถสร้างการแจ้งเตือนโดยเรียก showNotification() ในพร็อพเพอร์ตี้ registration ของโปรแกรมทํางานของบริการ 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() วิธีนี้ทําให้เบราว์เซอร์สามารถเปิดใช้ Service Worker และทําให้แอปใช้งานได้ต่อไปจนกว่าสัญญาจะส่งผ่านเรียบร้อยแล้ว

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

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

ตอนนี้คุณก็ได้ผ่านเหตุการณ์พุชแล้ว มาทดสอบกิจกรรมพุชกัน

ลองเลย

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

ในเว็บแอป ให้สมัครใช้บริการการรับส่งข้อความ Push และตรวจสอบว่าเห็น User IS subscribed ในคอนโซล ในแผงแอปพลิเคชันใน DevTools ในแท็บผู้ปฏิบัติงานบริการ ให้คลิกปุ่มพุชให้ทําดังนี้

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

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

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

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

เริ่มต้นด้วยการเพิ่ม Listener 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 ในเครื่องมือสําหรับนักพัฒนาเว็บอีกครั้ง แล้วคลิกการแจ้งเตือน ตอนนี้คุณจะเห็นการแจ้งเตือนปิดอยู่และแท็บใหม่จะเปิดขึ้น

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

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

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

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

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

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

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

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

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

ดูโค้ดทั้งหมดของเว็บไซต์ที่แสดงร่วมกันได้ที่นี่

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

สิ่งหนึ่งที่ขาดหายไปคือความสามารถในการยกเลิกการสมัครรับอีเมลจากผู้ใช้ โดยต้องโทรหา unsubscribe() ที่หมายเลข PushSubscription

กลับไปที่ไฟล์ scripts/main.js ให้เปลี่ยน Listener การคลิก 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()

การดําเนินการนี้จะแสดงผลคําสัญญาที่แก้ไขด้วย 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() จะทําให้เกิดสัญญา เนื่องจากอาจใช้เวลาสักพักจึงจะเสร็จสมบูรณ์ คุณส่งคืนคําสัญญาดังกล่าวเพื่อให้ then() ถัดไปในเชนรอ unsubscribe() ให้เสร็จ คุณยังเพิ่มเครื่องจัดการได้ด้วยในกรณีที่การเรียก unsubscribe() เกิดข้อผิดพลาด หลังจากนั้น คุณจะอัปเดต UI ได้

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

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

  updateBtn();
})

ลองเลย

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

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

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

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

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

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

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

สิ่งที่ต้องมี

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

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

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

ลองเลย

ดาวน์โหลดคีย์เซิร์ฟเวอร์แอปพลิเคชัน

ลองเลย

ลองเลย

ลองเลย

ลองเลย

ลองเลย

ลองเลย

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

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