ขอแนะนำการดึงข้อมูลในเบื้องหลัง

Jake Archibald

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

ฟีเจอร์นี้มีประโยชน์ แต่ต้องใช้ Service Worker ที่ทำงานอยู่ตลอดระยะเวลาของ การดึงข้อมูล ซึ่งจะไม่เป็นปัญหาสำหรับงานสั้นๆ เช่น การส่งข้อความ แต่หากงานใช้เวลานานเกินไป เบราว์เซอร์จะปิด Service Worker มิฉะนั้นจะเป็นความเสี่ยงต่อความเป็นส่วนตัวและแบตเตอรี่ของผู้ใช้

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

Background Fetch พร้อมใช้งานโดยค่าเริ่มต้นตั้งแต่ Chrome 74

นี่คือการสาธิตสั้นๆ 2 นาทีที่แสดงสถานะแบบเดิมๆ เทียบกับการใช้การดึงข้อมูลในเบื้องหลัง

วิธีการทำงาน

การดึงข้อมูลในเบื้องหลังจะทำงานดังนี้

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

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

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

หากผู้ใช้เริ่มดาวน์โหลดขณะออฟไลน์หรือออฟไลน์ระหว่างการดาวน์โหลด ระบบจะหยุดการดึงข้อมูลในเบื้องหลังชั่วคราวและดำเนินการต่อในภายหลัง

API

ตรวจหาฟีเจอร์

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

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

การเริ่มดึงข้อมูลในเบื้องหลัง

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

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch รับอาร์กิวเมนต์ 3 รายการ ได้แก่

backgroundFetch.fetch จะแสดงผล Promise ที่แก้ไขด้วย BackgroundFetchRegistration ฉันจะ อธิบายรายละเอียดในภายหลัง Promise จะปฏิเสธหากผู้ใช้เลือกไม่ใช้การดาวน์โหลด หรือพารามิเตอร์ที่ระบุอย่างน้อย 1 รายการไม่ถูกต้อง

การระบุคำขอจำนวนมากสำหรับการดึงข้อมูลในเบื้องหลังรายการเดียวช่วยให้คุณรวมรายการต่างๆ ที่เป็นรายการเดียวเชิงตรรกะสำหรับผู้ใช้ได้ เช่น ภาพยนตร์อาจแบ่งออกเป็นแหล่งข้อมูลหลายพันรายการ (โดยทั่วไปจะใช้ MPEG-DASH) และมาพร้อมกับแหล่งข้อมูลเพิ่มเติม เช่น รูปภาพ เลเวลของเกมอาจกระจายอยู่ตามทรัพยากร JavaScript, รูปภาพ และเสียงจำนวนมาก แต่สำหรับผู้ใช้แล้ว มันก็คือ "ภาพยนตร์" หรือ "เลเวล"

การรับการดึงข้อมูลในเบื้องหลังที่มีอยู่

คุณสามารถรับการดึงข้อมูลในเบื้องหลังที่มีอยู่ได้ดังนี้

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…โดยส่ง id ของการดึงข้อมูลในเบื้องหลังที่ต้องการ get จะแสดงผล undefined หากไม่มีการดึงข้อมูลในเบื้องหลังที่ใช้งานอยู่ซึ่งมีรหัสดังกล่าว

ระบบจะถือว่าการดึงข้อมูลในเบื้องหลัง "ทำงานอยู่" ตั้งแต่เวลาที่ลงทะเบียนจนกว่าจะสำเร็จ ล้มเหลว หรือถูกยกเลิก

คุณดูรายการการดึงข้อมูลในเบื้องหลังที่ใช้งานอยู่ทั้งหมดได้โดยใช้ getIds

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

การลงทะเบียนการดึงข้อมูลในเบื้องหลัง

BackgroundFetchRegistration (bgFetch ในตัวอย่างด้านบน) มีลักษณะดังนี้