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

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

ปัญหา

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

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

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

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

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

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

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

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

การแก้ปัญหา

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

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

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

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

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

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

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

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

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

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

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

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

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

การสาธิตใหม่!

นี่คือการสาธิต wikipedia แบบออฟไลน์ที่ฉันสร้างขึ้นสำหรับ Supercharging Page Load ตอนนี้ฉันได้เพิ่มเวทมนตร์การซิงค์กับพื้นหลังเข้ามา

ลองดูเลย ตรวจสอบว่าคุณใช้ 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 มาสู่เว็บทีละน้อย ในขณะเดียวกันก็ยังคงเก็บสิ่งที่ดีต่อเว็บไซต์เอาไว้ได้อีกด้วย