การซิงค์ข้อมูลในเบื้องหลังเป็น API ของเว็บใหม่ที่ให้คุณเลื่อนการดำเนินการไปจนกว่าผู้ใช้จะมีการเชื่อมต่อที่เสถียร วิธีนี้ช่วยให้มั่นใจว่าระบบจะส่งอะไรก็ตามที่ผู้ใช้ต้องการส่งไปจริงๆ
ปัญหา
อินเทอร์เน็ตเป็นที่ที่น่าเสียเวลา เราไม่ต้องเสียเวลาบนอินเทอร์เน็ตเลย เราก็คงไม่รู้ว่าแมวไม่ชอบดอกไม้ กิ้งก่ารักฟองสบู่ หรือ เอริค ไบเดลแมน ตัวเราเองก็เป็นวีรบุรุษพัตต์กอล์ฟแห่งยุค 90 ปลายยุค
แต่บางครั้งเราก็ไม่อยากเสียเวลา ประสบการณ์ของผู้ใช้ที่ต้องการจะมีลักษณะเช่นนี้
- โทรศัพท์หลุดกระเป๋า
- บรรลุเป้าหมายย่อย
- โทรศัพท์กลับมาอยู่ในกระเป๋าแล้ว
- กลับไปใช้ชีวิตอีกครั้ง
ขออภัยที่ประสบการณ์นี้มักมีสัญญาณการเชื่อมต่อไม่ดี เราต่างเคยเจอเรื่องแบบนี้ คุณจ้องไปที่หน้าจอสีขาวหรือตัวหมุน และรู้ว่าคุณควรหยุดและใช้เวลาในชีวิตต่อไป แต่เผื่อเวลาไว้อีก 10 วินาที หลังจาก 10 วินาทีนั้นแล้ว ไม่มี
ทำไมต้องยอมแพ้ตอนนี้ คุณใช้เวลาไปหมดแล้ว ดังนั้นการเดินไปโดยเปล่าไม่มีอะไรจะสูญเปล่า ดังนั้นคุณไม่ต้องรอ ณ จุดนี้ คุณต้องการเลิกใช้ แต่รู้อย่างที่ 2 แล้ว คือวินาทีก่อนที่ทุกอย่างจะโหลดเสร็จ เพียงแต่คุณรอคนเดียว
Service Worker จะช่วยแก้ปัญหาด้านการโหลดหน้าเว็บโดยให้คุณแสดงเนื้อหาจากแคช แล้วถ้าหน้าเว็บต้องส่งบางอย่างไปยังเซิร์ฟเวอร์ล่ะ
ในขณะนี้ หากผู้ใช้กด "ส่ง" ข้อความ พวกเขาจะต้องจ้องไปที่ตัวหมุนจนกว่าข้อความจะเสร็จ หากผู้ใช้พยายามออกหรือปิดแท็บ เราจะใช้ onbeforeunload
เพื่อแสดงข้อความ เช่น "ไม่ ฉันต้องขอให้คุณจ้องไปที่ไอคอนหมุนนี้อีกสักหน่อย ขออภัย" หากผู้ใช้ไม่มีการเชื่อมต่อ เราจะบอกผู้ใช้ว่า "ขออภัย คุณต้องกลับมาในภายหลังและลองอีกครั้ง"
มันเป็นขยะ การซิงค์ในเบื้องหลังช่วยให้คุณทำงานได้ดียิ่งขึ้น
การแก้ปัญหา
วิดีโอต่อไปนี้จะแสดง Emojoy ซึ่งเป็นการสาธิตแชทที่ใช้อีโมจิเท่านั้น ฟีเจอร์นี้เป็นเว็บแอปแบบโปรเกรสซีฟและทำงานแบบออฟไลน์ได้ก่อน แอปนี้ใช้ข้อความ Push และการแจ้งเตือน และใช้การซิงค์ในเบื้องหลัง
หากผู้ใช้พยายามส่งข้อความเมื่อไม่มีการเชื่อมต่อ ก็ต้องโชคดีที่ข้อความนั้นจะส่งอยู่เบื้องหลังเมื่อมีการเชื่อมต่อ
การซิงค์ในเบื้องหลังพร้อมใช้งานใน Chrome ตั้งแต่เวอร์ชัน 49 ขึ้นไปตั้งแต่เดือนมีนาคม 2016 คุณจะดูการทำงานได้โดยทำตามขั้นตอนด้านล่าง
- เปิด Emojoy
- ใช้งานแบบออฟไลน์ (โดยใช้โหมดบนเครื่องบินหรือไปที่กรง Faraday ในพื้นที่ของคุณ)
- พิมพ์ข้อความ
- กลับไปที่หน้าจอหลัก (คุณอาจปิดแท็บหรือเบราว์เซอร์ก็ได้)
- ใช้งานแบบออนไลน์
- ส่งข้อความอยู่เบื้องหลัง
ความสามารถในการส่งเนื้อหาในพื้นหลังเช่นนี้ก็ทำให้ประสิทธิภาพที่รับรู้ได้ดียิ่งขึ้นด้วย แอปไม่จำเป็นต้องจัดการกับข้อความที่ส่งมาก จึงสามารถเพิ่มข้อความไปยังเอาต์พุตได้ทันที
วิธีขอซิงค์ในเบื้องหลัง
นี่เป็นฟีเจอร์ระดับล่างที่ให้อิสระแก่คุณเพื่อทำสิ่งที่ต้องการในรูปแบบเว็บที่ขยายได้อย่างแท้จริง คุณขอให้เหตุการณ์เริ่มทำงานเมื่อผู้ใช้มีการเชื่อมต่อ ซึ่งจะมีผลทันทีหากผู้ใช้มีการเชื่อมต่ออยู่แล้ว จากนั้นให้รอฟังเหตุการณ์นั้นและ ทำอะไรก็ได้ที่ต้องการ
โดยจะใช้ 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 ขึ้นไป จากนั้น
- ไปที่บทความใดก็ได้ ซึ่งอาจเป็น Chrome
- ใช้งานแบบออฟไลน์ (โดยใช้โหมดบนเครื่องบินหรือเข้าร่วมกับผู้ให้บริการเครือข่ายมือถือที่แย่เหมือนอย่างที่ฉันมี)
- คลิกลิงก์ไปยังบทความอื่น
- ระบบจะแจ้งให้คุณโหลดหน้านี้ไม่สำเร็จ (ข้อความนี้จะปรากฏขึ้นด้วยหากหน้าเว็บใช้เวลาโหลดนาน)
- ยอมรับการแจ้งเตือน
- ปิดเบราว์เซอร์
- ใช้งานแบบออนไลน์
- คุณจะได้รับการแจ้งเตือนเมื่อบทความได้รับการดาวน์โหลด แคช และพร้อมดู
การใช้รูปแบบนี้จะทำให้ผู้ใช้สามารถใส่โทรศัพท์ไว้ในกระเป๋าเสื้อและดำเนินชีวิตต่อไปได้ โดยรู้ว่าโทรศัพท์จะแจ้งเตือนเมื่อข้อมูลดึงข้อมูลเมื่อพวกเขาต้องการ
สิทธิ์
การสาธิตที่ฉันแสดงใช้การแจ้งเตือนบนเว็บ ซึ่งต้องได้รับสิทธิ์ แต่การซิงค์ในเบื้องหลังไม่สามารถทำได้
เหตุการณ์การซิงค์มักจะเสร็จสิ้นในขณะที่ผู้ใช้เปิดหน้าเว็บไว้ในเว็บไซต์ ดังนั้นการต้องได้รับอนุญาตจากผู้ใช้จึงอาจใช้งานได้ไม่ดีนัก แต่เราจะจํากัดเวลาที่สามารถลงทะเบียนการซิงค์และทริกเกอร์การซิงค์เพื่อป้องกันการละเมิด เช่น
- คุณสามารถลงทะเบียนกิจกรรมการซิงค์ได้เมื่อผู้ใช้เปิดหน้าต่างเว็บไซต์ไว้เท่านั้น
- ระบบจำกัดเวลาในการดำเนินการกับกิจกรรมไว้ ดังนั้นคุณจะไม่สามารถใช้คำสั่ง 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 มาสู่เว็บทีละน้อย ในขณะเดียวกันก็ยังคงเก็บสิ่งที่ดีต่อเว็บไซต์เอาไว้ได้อีกด้วย