เสริมเทคนิคการเรียกข้อมูลล่วงหน้าแบบดั้งเดิมด้วย Service Worker
โดยทั่วไป การทำงานในเว็บไซต์จะมีหลายขั้นตอน เช่น การซื้อผลิตภัณฑ์ในเว็บไซต์อีคอมเมิร์ซอาจเกี่ยวข้องกับการค้นหาผลิตภัณฑ์ เลือกสินค้าจากรายการผลลัพธ์ เพิ่มสินค้าลงในรถเข็น และดําเนินการเสร็จสมบูรณ์ด้วยการชําระเงิน
ในทางเทคนิคแล้ว การย้ายผ่านหน้าต่างๆ หมายถึงการสร้างคำขอการนำทาง โดยทั่วไปแล้ว คุณไม่ควรใช้ส่วนหัว Cache-Control
ที่มีอายุการใช้งานยาวนานเพื่อแคชการตอบกลับ HTML สําหรับคําขอการนําทาง โดยปกติแล้ว ข้อมูลเหล่านี้ควรได้รับการตอบสนองผ่านเครือข่ายด้วย Cache-Control: no-cache
เพื่อให้มั่นใจว่า HTML รวมถึงเชนคำขอเครือข่ายที่ตามมาจะใหม่ (พอสมควร)
การที่ต้องใช้เครือข่ายทุกครั้งที่ผู้ใช้ไปยังหน้าใหม่หมายความว่าการไปยังส่วนต่างๆ อาจช้า อย่างน้อยที่สุดก็หมายความว่าการไปยังส่วนต่างๆ จะเชื่อถือได้
เพื่อให้คำขอเหล่านี้รวดเร็วขึ้น หากคุณสามารถคาดการณ์การดำเนินการของผู้ใช้ได้ คุณสามารถขอหน้าเว็บและเนื้อหาเหล่านี้ล่วงหน้า และเก็บไว้ในแคชเป็นระยะเวลาสั้นๆ จนกว่าผู้ใช้จะคลิกลิงก์เหล่านี้ เทคนิคนี้เรียกว่าการดึงข้อมูลล่วงหน้า และโดยทั่วไปมักจะนำมาใช้โดยการเพิ่มแท็ก <link rel="prefetch">
ลงในหน้าเว็บต่างๆ เพื่อบ่งบอกถึงทรัพยากรที่จะดึงข้อมูลล่วงหน้า
ในคู่มือนี้ เราจะสำรวจวิธีต่างๆ ในการใช้ Service Worker เพื่อเสริมเทคนิคการโหลดล่วงหน้าแบบดั้งเดิม
กรณีการใช้งานจริง
MercadoLibre เป็นเว็บไซต์อีคอมเมิร์ซที่ใหญ่ที่สุดในละตินอเมริกา แท็ก <link rel="prefetch">
บางส่วนของขั้นตอนจะแทรกแบบไดนามิกเพื่อเพิ่มความเร็วในการนําทาง ตัวอย่างเช่น ในหน้าข้อมูล ผู้ใช้จะเรียกข้อมูลหน้าผลลัพธ์ถัดไปทันทีที่ผู้ใช้เลื่อนไปที่ด้านล่างของข้อมูล
ระบบจะขอไฟล์ที่ดึงข้อมูลไว้ล่วงหน้าในระดับความสำคัญ "ต่ำสุด" และจัดเก็บไว้ในแคช HTTP หรือแคชหน่วยความจำ (ขึ้นอยู่กับว่าทรัพยากรแคชได้หรือไม่) เป็นระยะเวลาที่ขึ้นอยู่กับเบราว์เซอร์ ตัวอย่างเช่น ใน Chrome 85 ค่านี้คือ 5 นาที ทรัพยากรจะยังคงอยู่เป็นเวลา 5 นาที หลังจากนั้นระบบจะใช้กฎ Cache-Control
ปกติสำหรับทรัพยากร
การใช้การแคชของ Service Worker จะช่วยยืดอายุการใช้งานของการดึงข้อมูลทรัพยากรล่วงหน้าไปมากกว่ากรอบเวลา 5 นาที
ตัวอย่างเช่น เว็บไซต์พอร์ทัลกีฬาของอิตาลีอย่าง Virgilio Sport ใช้ Service Worker เพื่อแสดงผลล่วงหน้าสำหรับโพสต์ยอดนิยมในหน้าแรก นอกจากนี้ ยังใช้ Network Information API เพื่อหลีกเลี่ยงการโหลดล่วงหน้าสำหรับผู้ใช้ที่ใช้การเชื่อมต่อ 2G ด้วย
ด้วยเหตุนี้ Virgilio Sport จึงสังเกตเห็นเวลาในการโหลดสำหรับการไปยังบทความดีขึ้น 78% และจำนวนการแสดงผลบทความเพิ่มขึ้น 45% ในช่วง 3 สัปดาห์ที่สังเกต
ใช้การแคชล่วงหน้าด้วย Workbox
ในส่วนต่อไปนี้ เราจะใช้กล่องทำงานเพื่อแสดงวิธีการใช้เทคนิคการแคชต่างๆ ใน Service Worker ที่สามารถใช้เป็นส่วนเสริมของ <link rel="prefetch">
หรือแม้กระทั่งใช้ทดแทนโดยมอบหมายงานนี้ให้กับ Service Worker โดยสมบูรณ์
1. แคชหน้าเว็บแบบคงที่และทรัพยากรย่อยของหน้าไว้ล่วงหน้า
การแคชล่วงหน้าคือความสามารถของ Service Worker ในการบันทึกไฟล์ลงในแคชขณะติดตั้ง
ในกรณีต่อไปนี้ ระบบจะใช้การแคชล่วงหน้าเพื่อบรรลุเป้าหมายที่คล้ายกับการอ่านล่วงหน้า ซึ่งก็คือการทําให้ไปยังส่วนต่างๆ ได้เร็วขึ้น
การแคชหน้าเว็บแบบคงที่ล่วงหน้า
สําหรับหน้าที่สร้างขึ้น ณ เวลาที่สร้าง (เช่น about.html
, contact.html
) หรือในเว็บไซต์แบบคงที่ทั้งหมด เพียงเพิ่มเอกสารของเว็บไซต์ลงในรายการแคชล่วงหน้าเพื่อให้เอกสารพร้อมใช้งานในแคชทุกครั้งที่ผู้ใช้เข้าถึง
workbox.precaching.precacheAndRoute([
{url: '/about.html', revision: 'abcd1234'},
// ... other entries ...
]);
การแคชทรัพยากรย่อยของหน้าเว็บล่วงหน้า
การแคชเนื้อหาแบบคงที่ไว้ล่วงหน้าซึ่งส่วนต่างๆ ของเว็บไซต์อาจใช้ (เช่น JavaScript, CSS ฯลฯ) เป็นแนวทางปฏิบัติแนะนำทั่วไปและช่วยเพิ่มประสิทธิภาพในการแคชล่วงหน้าได้
หากต้องการเพิ่มความเร็วในการไปยังส่วนต่างๆ ในเว็บไซต์อีคอมเมิร์ซ คุณสามารถใช้แท็ก <link rel="prefetch">
ในหน้าข้อมูลเพื่อแสดงหน้ารายละเอียดผลิตภัณฑ์ของผลิตภัณฑ์ 2-3 รายการแรกในหน้าข้อมูลล่วงหน้า หากคุณแคชทรัพยากรย่อยของหน้าผลิตภัณฑ์ไว้ล่วงหน้าแล้ว การดำเนินการนี้จะช่วยให้การไปยังส่วนต่างๆ เร็วขึ้น
วิธีติดตั้งใช้งาน
- เพิ่มแท็ก
<link rel="prefetch">
ลงในหน้า
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- เพิ่มทรัพยากรย่อยของหน้าเว็บลงในรายการการแคชล่วงหน้าใน Service Worker โดยทำดังนี้
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
// ... other entries ...
]);
2. ยืดอายุการใช้งานของทรัพยากรการอ่านล่วงหน้า
ดังที่ได้กล่าวไว้ก่อนหน้านี้ <link rel="prefetch">
จะดึงข้อมูลและเก็บทรัพยากรไว้ในแคช HTTP เป็นระยะเวลาที่จำกัด หลังจากนั้นกฎ Cache-Control
สำหรับทรัพยากรจะมีผล ใน Chrome 85 ค่านี้คือ 5 นาที
บริการเวิร์กเกอร์ช่วยให้คุณยืดอายุการใช้งานของหน้าเว็บที่ระบบจะโหลดล่วงหน้าได้ พร้อมทั้งมอบประโยชน์เพิ่มเติมในการทำให้ทรัพยากรเหล่านั้นพร้อมใช้งานแบบออฟไลน์
ในตัวอย่างก่อนหน้านี้ ตัวแปรสามารถเสริม <link rel="prefetch">
ที่ใช้ในการดึงข้อมูลหน้าผลิตภัณฑ์ล่วงหน้าด้วยกลยุทธ์การแคชรันไทม์ของ Workbox
วิธีติดตั้งใช้งาน
- เพิ่มแท็ก
<link rel="prefetch">
ลงในหน้าเว็บ
<link rel="prefetch" href="/phones/smartphone-5x.html" as="document">
- ใช้กลยุทธ์การแคชรันไทม์ใน Service Worker สําหรับคําขอประเภทต่อไปนี้
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
});
ในกรณีนี้ เราเลือกที่จะใช้กลยุทธ์ "ใช้ข้อมูลเก่าระหว่างที่ตรวจสอบอีกครั้ง" ในกลยุทธ์นี้ ระบบจะขอหน้าเว็บจากทั้งแคชและเครือข่ายพร้อมกัน การตอบกลับจะมาจากแคช (หากมี) หรือมาจากเครือข่าย แคชจะอัปเดตอยู่เสมอตามการตอบกลับของเครือข่ายเมื่อมีคำขอที่สำเร็จแต่ละรายการ
3. มอบสิทธิ์การโหลดล่วงหน้าให้กับ Service Worker
ในกรณีส่วนใหญ่ แนวทางที่ดีที่สุดคือการใช้ <link rel="prefetch">
แท็กนี้เป็นคำแนะนำด้านทรัพยากรที่ออกแบบมาเพื่อทำให้การดึงข้อมูลล่วงหน้ามีประสิทธิภาพมากที่สุดเท่าที่จะเป็นไปได้
อย่างไรก็ตาม ในบางกรณี การมอบหมายงานนี้ทั้งหมดให้กับ Service Worker น่าจะดีกว่า
ตัวอย่างเช่น หากต้องการโหลดผลิตภัณฑ์ 2-3 รายการแรกในหน้าข้อมูลผลิตภัณฑ์ที่แสดงผลฝั่งไคลเอ็นต์ล่วงหน้า คุณอาจต้องแทรกแท็ก <link rel="prefetch">
หลายรายการในหน้าแบบไดนามิกตามการตอบกลับของ API ซึ่งอาจใช้เวลาในเทรดหลักของหน้าเว็บชั่วคราวและทําให้การติดตั้งใช้งานยากขึ้น
ในกรณีเช่นนี้ ให้ใช้ "กลยุทธ์การสื่อสารระหว่างหน้าเว็บกับ Service Worker" เพื่อมอบหมายงานการเรียกข้อมูลล่วงหน้าทั้งหมดให้กับ Service Worker การสื่อสารประเภทนี้ทำได้โดยใช้ worker.postMessage()
แพ็กเกจกรอบเวลาของ Workbox ช่วยให้การสื่อสารประเภทนี้ง่ายขึ้น โดยแยกรายละเอียดการเรียกใช้ที่เกี่ยวข้องออก
คุณสามารถติดตั้งใช้งานการเรียกข้อมูลล่วงหน้าด้วย Workbox Window ได้โดยทำดังนี้
- ในหน้าเว็บ ให้เรียกใช้ Service Worker ผ่านประเภทของข้อความและรายการ URL ที่จะดึงข้อมูลล่วงหน้า ดังนี้
const wb = new Workbox('/sw.js');
wb.register();
const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});
- ใน Service Worker ให้ใช้ตัวแฮนเดิลข้อความเพื่อส่งคําขอ
fetch()
สําหรับ URL แต่ละรายการเพื่อเตรียมข้อมูลล่วงหน้า โดยทําดังนี้
addEventListener('message', (event) => {
if (event.data.type === 'PREFETCH_URLS') {
// Fetch URLs and store them in the cache
}
});