ประสบการณ์ออฟไลน์ที่สมบูรณ์ยิ่งขึ้นด้วย Periodic Background Sync API

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

Jeff Posnick
Joe Medley
Joe Medley
GitHub

คุณเคยตกอยู่ในสถานการณ์ต่อไปนี้หรือไม่

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

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

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

ลองเลย

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

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

แนวคิดและการใช้งาน

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

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

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

การดึงดูดความสนใจของผู้ใช้อย่างเหมาะสม

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

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

นอกจากนี้ เนื่องจาก Chrome ไม่ต้องการให้เว็บแอปที่ไม่ได้ใช้งานหรือไม่ค่อยได้ใช้แบตเตอรี่หรืออินเทอร์เน็ตโดยไม่จำเป็น Chrome จึงออกแบบการซิงค์ในเบื้องหลังเป็นระยะเพื่อให้นักพัฒนาซอฟต์แวร์มีรายได้จากการมอบคุณค่าให้กับผู้ใช้ กล่าวอย่างชัดเจนคือ Chrome จะใช้คะแนนการมีส่วนร่วมกับเว็บไซต์ (about://site-engagement/) เพื่อพิจารณาว่ามีการซิงค์เบื้องหลังเป็นระยะสำหรับเว็บแอปหนึ่งๆ หรือไม่ กล่าวอีกนัยหนึ่งคือ เหตุการณ์ periodicsync จะไม่เริ่มทำงานเลยเว้นแต่คะแนนการมีส่วนร่วมมากกว่า 0 และค่าความถี่มีผลต่อความถี่ที่เหตุการณ์ periodicsync เริ่มทำงาน วิธีนี้ช่วยให้มั่นใจว่าแอปใด ที่คุณกำลังใช้งานอยู่เท่านั้น

การซิงค์ในเบื้องหลังเป็นระยะๆ นั้นมีความคล้ายคลึงกับ API และแนวทางปฏิบัติที่มีอยู่ในแพลตฟอร์มยอดนิยม ตัวอย่างเช่น การซิงค์ในเบื้องหลังแบบครั้งเดียวและข้อความ Push จะช่วยให้ตรรกะของเว็บแอปมีอายุการใช้งานนานขึ้นเล็กน้อย (ผ่าน Service Worker) หลังจากที่ผู้ใช้ปิดหน้าเว็บไปแล้ว ในแพลตฟอร์มส่วนใหญ่ ปกติแล้วผู้ใช้จะมีแอปที่ติดตั้งซึ่งเข้าถึงเครือข่ายในเบื้องหลังเป็นระยะๆ เพื่อมอบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นสำหรับการอัปเดตที่สำคัญ การดึงข้อมูลเนื้อหาล่วงหน้า การซิงค์ข้อมูล และอื่นๆ ในทำนองเดียวกัน การซิงค์ในเบื้องหลังตามระยะเวลาจะยืดอายุการใช้งานของตรรกะของเว็บแอปให้ทำงานในช่วงเวลาที่สม่ำเสมอ ซึ่งจะยืดอายุการใช้งานออกไปทีละ 2-3 นาที

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

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

สามารถใช้เมื่อใด

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

  • คะแนนการมีส่วนร่วมของผู้ใช้ที่เฉพาะเจาะจง
  • การมีอยู่ของเครือข่ายที่ใช้งานก่อนหน้านี้

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

กรณีที่ควรใช้

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

สิทธิ์

หลังจากติดตั้ง Service Worker แล้ว ให้ใช้ Permissions API เพื่อค้นหา periodic-background-sync คุณสามารถทำได้จากบริบทหน้าต่างหรือ โปรแกรมทำงานของบริการ

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

การลงทะเบียนการซิงค์เป็นระยะ

การซิงค์ในเบื้องหลังตามระยะเวลาจำเป็นต้องใช้ Service Worker ดังที่ระบุไว้แล้ว เรียกข้อมูล PeriodicSyncManager โดยใช้ ServiceWorkerRegistration.periodicSync แล้วโทรหา register() การลงทะเบียนต้องมีทั้งแท็กและช่วงเวลาการซิงค์ขั้นต่ำ (minInterval) แท็กจะระบุการซิงค์ที่ลงทะเบียนแล้วเพื่อให้ลงทะเบียนการซิงค์หลายรายการได้ ในตัวอย่างด้านล่าง ชื่อแท็กคือ 'content-sync' และ minInterval คือ 1 วัน

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

การยืนยันการลงทะเบียน

เรียกใช้ periodicSync.getTags() เพื่อเรียกอาร์เรย์ของแท็กการลงทะเบียน ตัวอย่างด้านล่างใช้ชื่อแท็กเพื่อยืนยันว่าการอัปเดตแคชทํางานอยู่เพื่อหลีกเลี่ยงการอัปเดตอีกครั้ง

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

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

การตอบสนองต่อเหตุการณ์การซิงค์ในเบื้องหลังตามระยะเวลา

หากต้องการตอบสนองต่อเหตุการณ์การซิงค์เบื้องหลังตามระยะเวลา ให้เพิ่มตัวแฮนเดิลเหตุการณ์ periodicsync ลงใน Service Worker ออบเจ็กต์ event ที่ส่งไปยังออบเจ็กต์ดังกล่าวจะมีพารามิเตอร์ tag ที่ตรงกับค่าที่ใช้ระหว่างการลงทะเบียน ตัวอย่างเช่น หากมีการลงทะเบียนการซิงค์เบื้องหลังตามระยะเวลาโดยใช้ชื่อ 'content-sync' แล้ว event.tag จะเป็น 'content-sync'

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

การยกเลิกการลงทะเบียนการซิงค์

หากต้องการสิ้นสุดการซิงค์ที่ลงทะเบียน ให้เรียก periodicSync.unregister() ด้วยชื่อการซิงค์ที่คุณต้องการยกเลิกการลงทะเบียน

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

อินเทอร์เฟซ

อินเทอร์เฟซที่จัดทำโดย Periodic Background Sync API มีดังนี้

  • PeriodicSyncEvent ส่งผ่านไปยังเครื่องจัดการเหตุการณ์ ServiceWorkerGlobalScope.onperiodicsync แล้ว ณ เวลาที่เบราว์เซอร์เลือก
  • PeriodicSyncManager ลงทะเบียนและยกเลิกการลงทะเบียนการซิงค์เป็นระยะ และให้แท็กสำหรับการซิงค์ที่ลงทะเบียนไว้ เรียกข้อมูลอินสแตนซ์ของคลาสนี้จากพร็อพเพอร์ตี้ ServiceWorkerRegistration.periodicSync"
  • ServiceWorkerGlobalScope.onperiodicsync ลงทะเบียนเครื่องจัดการเพื่อรับ PeriodicSyncEvent
  • ServiceWorkerRegistration.periodicSync ส่งกลับการอ้างอิงไปยัง PeriodicSyncManager

ตัวอย่าง

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

ตัวอย่างต่อไปนี้ใช้การซิงค์ในเบื้องหลังตามระยะเวลาเพื่อดาวน์โหลดและแคชบทความล่าสุดสำหรับเว็บไซต์ข่าวหรือบล็อก สังเกตชื่อแท็กซึ่งระบุประเภทการซิงค์ ('update-articles') การเรียกไปยัง updateArticles() จะรวมอยู่ใน event.waitUntil() ดังนั้นโปรแกรมทำงานของบริการจะไม่สิ้นสุดการทำงานก่อนที่จะมีการดาวน์โหลดและจัดเก็บบทความ

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

การเพิ่มการซิงค์ในเบื้องหลังตามระยะเวลาลงในเว็บแอปที่มีอยู่

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

การแก้ไขข้อบกพร่อง

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

กำลังบันทึกกิจกรรมในพื้นที่

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

ปุ่มบันทึกในเครื่องมือสำหรับนักพัฒนาเว็บ
ปุ่มบันทึกในเครื่องมือสำหรับนักพัฒนาเว็บ

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

ตัวอย่างของข้อมูลการซิงค์เบื้องหลังตามระยะเวลาที่บันทึกไว้
ตัวอย่างข้อมูลการซิงค์ในเบื้องหลังตามระยะเวลาที่บันทึกไว้

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

กิจกรรมจำลอง

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

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

ส่วน "Service Workers" ของแผงแอปพลิเคชันจะแสดงช่องข้อความและปุ่ม "การซิงค์เป็นระยะ"

การใช้อินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาเว็บ

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

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