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