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