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

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

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

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

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

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

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

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

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

สิทธิ์

หลังจากติดตั้งโปรแกรมทำงานของบริการแล้ว ให้ใช้ปุ่ม สิทธิ์ 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.
}

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

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

อินเทอร์เฟซ

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

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

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

การบันทึกกิจกรรมในเครื่อง

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

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

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

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

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

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

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

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

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

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

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

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