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

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

Jeff Posnick
Joe Medley
Joe Medley
GitHub

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

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

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

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

ลองใช้

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

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

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

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

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

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

เพิ่มการมีส่วนร่วมของผู้ใช้อย่างเหมาะสม

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

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

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

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

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

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

ใช้เมื่อใดได้บ้าง

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

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

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

ควรใช้เมื่อใด

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

สิทธิ์

หลังจากติดตั้ง Service Worker แล้ว ให้ใช้ Permissions API เพื่อค้นหา periodic-background-sync ซึ่งทำได้จากบริบทหน้าต่างหรือบริบท Service Worker

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

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 ที่มีอยู่ ตัวอย่างนี้ประกอบด้วยคำสั่งการบันทึกที่เป็นประโยชน์หลายรายการซึ่งอธิบายสถานะของการซิงค์ในเบื้องหลังเป็นระยะในเว็บแอป

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

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

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

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

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

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

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

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

การจําลองเหตุการณ์

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

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

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

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

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

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