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

Jake Archibald

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

ปัญหา

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

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

1. พกพาโทรศัพท์ติดตัว
2. บรรลุเป้าหมายย่อย
3. เก็บโทรศัพท์ไว้ในกระเป๋าเสื้อหรือกระเป๋ากางเกง
4. กลับมาใช้ชีวิตอีกครั้ง

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

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

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

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

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

การแก้ปัญหา

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

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

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

1. เปิด EmoJo
2. ออฟไลน์ (โดยใช้โหมดบนเครื่องบินหรือไปที่กรง Faraday ในพื้นที่ของคุณ)
3. พิมพ์ข้อความ
4. กลับไปที่หน้าจอหลัก (เลือกปิดแท็บหรือเบราว์เซอร์ก็ได้)
5. ออนไลน์
6. ส่งข้อความในพื้นหลัง

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

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

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

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

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

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

ต่อไปนี้คือการสาธิตง่ายๆ ที่ไม่ซับซ้อนเลย โดยใช้เหตุการณ์การซิงค์เพื่อแสดงการแจ้งเตือน

ฉันจะใช้การซิงค์ในเบื้องหลังทำอะไรบ้างได้

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

แต่คุณก็สามารถใช้เพื่อดึงข้อมูลเล็กๆ น้อยๆ ได้เช่นกัน...

การสาธิตอื่น!

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

ทดลองด้วยตัวคุณเอง ตรวจสอบว่าคุณใช้ Chrome 49 ขึ้นไป จากนั้น

1. ไปที่บทความใดก็ได้ เช่น Chrome
2. ใช้งานแบบออฟไลน์ (ไม่ว่าจะใช้โหมดเครื่องบินหรือเข้าร่วมผู้ให้บริการมือถือที่แย่ๆ อย่างฉัน)
3. คลิกลิงก์ไปยังบทความอื่น
4. ระบบจะแจ้งให้คุณโหลดหน้าเว็บไม่สำเร็จ (ซึ่งจะปรากฏขึ้นด้วยหากหน้าเว็บใช้เวลาโหลดสักครู่)
5. ยอมรับการแจ้งเตือน
6. ปิดเบราว์เซอร์
7. ใช้งานแบบออนไลน์
8. คุณจะได้รับการแจ้งเตือนเมื่อบทความได้รับการดาวน์โหลด แคช และพร้อมดูแล้ว

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

สิทธิ์

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

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

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

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

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

โดยเบราว์เซอร์ทั้งหมดจะรองรับการซิงค์ในแบ็กกราวด์ได้สักระยะหนึ่ง โดยเฉพาะเมื่อ Safari และ Edge ยังไม่รองรับ Service Worker แต่การเพิ่มประสิทธิภาพแบบก้าวหน้ามีประโยชน์ดังนี้

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();
}

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

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

อนาคต

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

เรานำรูปแบบที่ประสบความสำเร็จจาก Android และ iOS มาไว้ในเว็บทีละน้อย โดยในขณะเดียวกันก็ยังคงรักษาความยอดเยี่ยมในการใช้งานเว็บเอาไว้ด้วย