อัปเดต

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

คุณสามารถอัปเดต:

  • ข้อมูลแอป
  • เนื้อหาที่แคชไว้ในอุปกรณ์แล้ว
  • ไฟล์ Service Worker หรือทรัพยากร Dependency ของไฟล์
  • ข้อมูลเมตาไฟล์ Manifest

มาดูแนวทางปฏิบัติแนะนำสำหรับแต่ละองค์ประกอบกัน

กำลังอัปเดตข้อมูล

ในการอัปเดตข้อมูล เช่น ข้อมูลที่จัดเก็บใน IndexedDB คุณสามารถใช้เครื่องมือต่างๆ เช่น Fetch, WebRTC หรือ WebSockets API หากแอปของคุณรองรับฟีเจอร์ออฟไลน์ อย่าลืมอัปเดตข้อมูลที่รองรับฟีเจอร์นั้นด้วย

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

API เหล่านี้ทั้งหมดจะดำเนินการจากบริบทของ Service Worker ซึ่งขณะนี้ใช้ได้เฉพาะในเบราว์เซอร์แบบ Chromium, บนระบบปฏิบัติการ Android และเดสก์ท็อป เมื่อใช้ API เหล่านี้ คุณจะเรียกใช้โค้ดในชุดข้อความของ Service Worker ได้ ตัวอย่างเช่น ในการดาวน์โหลดข้อมูลจากเซิร์ฟเวอร์และอัปเดตข้อมูล IndexedDB ของคุณ

การอัปเดตเนื้อหา

การอัปเดตเนื้อหาหมายรวมถึงการเปลี่ยนแปลงไฟล์ที่คุณใช้แสดงผลอินเทอร์เฟซของแอป เช่น HTML, CSS, JavaScript และรูปภาพ ตัวอย่างเช่น การเปลี่ยนแปลงตรรกะของแอป รูปภาพที่เป็นส่วนหนึ่งของอินเทอร์เฟซ หรือสไตล์ชีต CSS

อัปเดตรูปแบบ

ต่อไปนี้เป็นรูปแบบทั่วไปบางส่วนในการจัดการการอัปเดตแอป แต่คุณสามารถปรับแต่งกระบวนการตามความต้องการของคุณเองได้ทุกเมื่อ

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

กรณีที่ควรอัปเดต

แนวทางปฏิบัติที่ดีอีกอย่างคือการหาเวลาที่เหมาะสมในการตรวจสอบการอัปเดตและนำการอัปเดตนั้นไปใช้ โดยมีทางเลือกดังนี้

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

ข้อมูลอัปเดตแบบเรียลไทม์

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

การอัปเดตแบบเรียลไทม์หมายถึงทันทีที่เนื้อหาได้รับการอัปเดตในแคช PWA จะแทนที่เนื้อหาในการโหลดปัจจุบัน ซึ่งเป็นงานที่ซับซ้อนซึ่งไม่ได้เรียนในหลักสูตรนี้ เครื่องมือบางอย่างที่ช่วยในการติดตั้งใช้งานการอัปเดตนี้คือ livereload-js และการอัปเดตเนื้อหา CSS CSSStyleSheet.replace() API

กำลังอัปเดตโปรแกรมทำงานของบริการ

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

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

กำลังตรวจหาการเปลี่ยนแปลงของ Service Worker

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

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

บังคับลบล้าง

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

แม้จะไม่แนะนำ แต่โปรแกรมทำงานของบริการใหม่สามารถข้ามระยะเวลารอและเริ่มการเปิดใช้งานได้ทันที

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

เหตุการณ์ controllerchange จะเริ่มทำงานเมื่อ Service Worker ที่ควบคุมหน้าเว็บปัจจุบันมีการเปลี่ยนแปลง ตัวอย่างเช่น ผู้ปฏิบัติงานใหม่ข้ามการรอและกลายเป็นผู้ปฏิบัติงานใหม่ที่ใช้งานอยู่

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

กำลังอัปเดตข้อมูลเมตา

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

คำตอบขึ้นอยู่กับแพลตฟอร์ม มาดูตัวเลือกต่างๆ ที่มีกัน

Safari ในเบราว์เซอร์ iOS, iPadOS และ Android

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

Google Chrome บน Android ที่มี WebAPK

เมื่อผู้ใช้ได้ติดตั้ง PWA บน Android โดยใช้ Google Chrome ที่เปิดใช้งาน WebAPK (การติดตั้ง PWA ของ Chrome ส่วนใหญ่) ระบบจะตรวจหาและนำการอัปเดตไปใช้โดยอิงตามอัลกอริทึม ดูรายละเอียดในบทความการอัปเดตไฟล์ Manifest นี้

หมายเหตุเพิ่มเติมบางส่วนเกี่ยวกับกระบวนการนี้

หากผู้ใช้ไม่เปิด PWA ระบบจะไม่อัปเดต WebAPK ของผู้ใช้ หากเซิร์ฟเวอร์ไม่ตอบสนองด้วยไฟล์ Manifest (มีข้อผิดพลาด 404) Chrome จะไม่ตรวจหาการอัปเดตเป็นเวลาอย่างน้อย 30 วัน แม้ว่าผู้ใช้จะเปิด PWA ก็ตาม

ไปที่ about:webapks ใน Chrome บน Android เพื่อดูสถานะของ "จำเป็นต้องอัปเดต" แจ้ง และขอการอัปเดต อ่านเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไขข้อบกพร่องนี้ในส่วนเนื้อหาเครื่องมือและการแก้ไขข้อบกพร่อง

อินเทอร์เน็ตของ Samsung บน Android ที่มี WebAPK

ขั้นตอนนี้คล้ายกับเวอร์ชัน Chrome ในกรณีนี้ หากไฟล์ Manifest ของ PWA จำเป็นต้องได้รับการอัปเดต ในอีก 24 ชั่วโมงข้างหน้า WebAPK จะได้รับการอัปเดตผ่าน Wi-Fi หลังจากสร้าง WebAPK ที่อัปเดตแล้ว

Google Chrome และ Microsoft Edge บนเดสก์ท็อป

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

เมื่ออัปเดตพร็อพเพอร์ตี้ที่เลือกแล้ว ระบบจะทริกเกอร์การอัปเดตหลังจากปิดหน้าต่างทั้งหมดแล้ว

การแจ้งเตือนผู้ใช้

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

มีตัวเลือกต่อไปนี้ในการแจ้งผู้ใช้

  • ใช้ DOM หรือ Canvas API เพื่อแสดงผลการแจ้งเตือนบนหน้าจอ
  • ใช้ Web Notifications API API นี้เป็นส่วนหนึ่งของสิทธิ์พุชเพื่อสร้างการแจ้งเตือนในระบบปฏิบัติการ คุณจะต้องขอสิทธิ์พุชจากเว็บเพื่อใช้งาน แม้ว่าคุณจะไม่ได้ใช้โปรโตคอลการรับส่งข้อความพุชจากเซิร์ฟเวอร์ก็ตาม เราจึงมีตัวเลือกเดียวในกรณีที่ไม่ได้เปิด PWA
  • ใช้ Badging API เพื่อแสดงว่ามีอัปเดตที่พร้อมใช้งานในไอคอนที่ติดตั้งของ PWA

การแจ้งเตือนการอัปเดตที่แสดงใน DOM

ข้อมูลเพิ่มเติมเกี่ยวกับ Badging API

Badging API ช่วยให้คุณทำเครื่องหมายไอคอนของ PWA ด้วยหมายเลขป้ายหรือจุดของป้ายในเบราว์เซอร์ที่เข้ากันได้ จุดของป้ายเป็นเครื่องหมายเล็กๆ ภายในไอคอนที่ติดตั้งไว้ ซึ่งเป็นสัญลักษณ์ว่ามีอะไรรออยู่ในแอป

ตัวอย่าง Twitter ที่มีการแจ้งเตือน 8 รายการและแอปอื่นที่แสดงป้ายประเภทธง

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

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

หากต้องการล้างป้าย ให้เรียกใช้ clearAppBadge() บนวัตถุเดียวกัน

navigator.clearAppBadge();

แหล่งข้อมูล