ขอแนะนำการซิงค์ในเบื้องหลัง

Jake Archibald

เผยแพร่: 8 ธันวาคม 2015

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

Browser Support

Source

ปัญหา

อินเทอร์เน็ตเป็นที่ที่ยอดเยี่ยมในการใช้เวลาไปโดยเปล่าประโยชน์ หากไม่ได้ใช้เวลาบนอินเทอร์เน็ต เราคงไม่รู้ว่าแมวไม่ชอบดอกไม้ กิ้งก่าชอบฟองสบู่ หรือว่าEric Bidelman เป็นฮีโร่ตีกอล์ฟพัตต์ๆ ในช่วงปลายยุค 90

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

โทรศัพท์อยู่นอกกระเป๋า
บรรลุเป้าหมายย่อย
เก็บโทรศัพท์ไว้ในกระเป๋า
กลับมาใช้ชีวิต

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

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

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

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

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

การแก้ปัญหา

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

หากผู้ใช้พยายามส่งข้อความในขณะที่ไม่มีการเชื่อมต่อเลย ระบบจะส่งข้อความในเบื้องหลังเมื่อผู้ใช้มีการเชื่อมต่อ

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

การซิงค์ในเบื้องหลังพร้อมใช้งานตั้งแต่ Chrome 49

วิธีขอให้ซิงค์ในเบื้องหลัง

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

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

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

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

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

นี่คือการสาธิต ที่ใช้เหตุการณ์การซิงค์เพื่อแสดงการแจ้งเตือน

การใช้การซิงค์ในเบื้องหลัง

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

แม้ว่าคุณจะใช้เพื่อดึงข้อมูลเล็กๆ น้อยๆ ได้ด้วย

การสาธิตวิกิพีเดียแบบออฟไลน์

นี่คือการสาธิตวิกิพีเดียแบบออฟไลน์ที่ฉันสร้างขึ้นสำหรับการเพิ่มประสิทธิภาพการโหลดหน้าเว็บ และได้เพิ่มการซิงค์เบื้องหลังลงไปแล้ว

ลองทำตามนี้ด้วยตัวคุณเอง

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

เมื่อใช้รูปแบบนี้ ผู้ใช้สามารถใส่โทรศัพท์ไว้ในกระเป๋าและใช้ชีวิตต่อไปได้โดยรู้ว่าโทรศัพท์จะแจ้งเตือนเมื่อดึงข้อมูลที่ต้องการ

สิทธิ์

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

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

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

แน่นอนว่าข้อจำกัดเหล่านี้อาจผ่อนปรนหรือเข้มงวดขึ้นอยู่กับการใช้งานจริง

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

ในระหว่างที่รอให้การซิงค์ในพื้นหลังเป็นเกณฑ์พื้นฐาน คุณสามารถใช้การซิงค์ในพื้นหลังเป็นการ เพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไปได้โดยทำดังนี้

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

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

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

อนาคต

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

เราค่อยๆ นำรูปแบบที่ประสบความสำเร็จจาก Android และ iOS มาใช้บนเว็บ พร้อมทั้งคงไว้ซึ่งสิ่งที่ทำให้เว็บยอดเยี่ยม