การใช้งานการนำทางทันใจ

เสริมเทคนิคการดึงข้อมูลล่วงหน้าแบบดั้งเดิมด้วยโปรแกรมทำงานของบริการ

Demián Renzulli

กิลแบร์โต กอคคี

เจฟฟ์ พอสนิก

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

ในทางเทคนิคแล้ว การไปยังหน้าต่างๆ หมายถึงการสร้างคำขอการนำทาง ตามกฎทั่วไป คุณไม่ต้องการใช้ส่วนหัว Cache-Control ที่มีระยะเวลานานเพื่อแคชการตอบกลับ HTML สำหรับคำขอการนำทาง โดยปกติแล้วควรจะมีการตอบสนองผ่านเครือข่ายด้วย Cache-Control: no-cache เพื่อให้มั่นใจว่า HTML พร้อมกับห่วงโซ่คำขอเครือข่ายที่ตามมา มีความใหม่ (อย่างสมเหตุสมผล) การที่เราต้องเชื่อมต่อกับเครือข่ายทุกครั้งที่ผู้ใช้ไปยังหน้าเว็บใหม่อาจทำให้การนำทางแต่ละครั้งอาจช้าไป หรืออย่างน้อยก็หมายความว่าการนำทางนั้นไม่เร็วน่าเชื่อถือ

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

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

กรณีการผลิต

MercadoLibre เป็นเว็บไซต์อีคอมเมิร์ซที่ใหญ่ที่สุดในลาตินอเมริกา โดยจะแทรกแท็ก <link rel="prefetch"> ในบางส่วนของโฟลว์แบบไดนามิกเพื่อเพิ่มความเร็วในการไปยังส่วนต่างๆ เช่น ในหน้าข้อมูล ผู้ใช้จะดึงข้อมูลหน้าผลการค้นหาถัดไปทันทีที่ผู้ใช้เลื่อนไปที่ด้านล่างของข้อมูล

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

การใช้การแคชโปรแกรมทำงานของบริการจะช่วยยืดอายุการใช้งานของการดึงข้อมูลล่วงหน้าที่เกิดขึ้นนอกกรอบเวลา 5 นาที

เช่น พอร์ทัลกีฬา Virgilio Sport ในอิตาลีใช้ Service Worker เพื่อดึงโพสต์ที่ได้รับความนิยมมากที่สุดในหน้าแรกของตนล่วงหน้า และยังใช้ Network Information API เพื่อหลีกเลี่ยงการดึงข้อมูลล่วงหน้าสำหรับผู้ใช้ที่ใช้การเชื่อมต่อ 2G อีกด้วย

ด้วยเหตุนี้ การสังเกตของ Virgilio Sport นานกว่า 3 สัปดาห์จึงพบว่าเวลาที่ใช้ในการโหลดการนำทางไปยังบทความเพิ่มขึ้น 78% และจำนวนการแสดงผลบทความเพิ่มขึ้น 45%

นำการแคชล่วงหน้าไปใช้ด้วย Workbox

ในส่วนต่อไปนี้ เราจะใช้พื้นที่ทำงานเพื่อแสดงวิธีการใช้เทคนิคการแคชแบบต่างๆ ในโปรแกรมทำงานของบริการ ซึ่งสามารถใช้เป็นส่วนเสริม<link rel="prefetch">หรือแม้แต่การทดแทนด้วยการมอบหมายงานนี้ให้แก่ผู้ทำงานของบริการโดยสมบูรณ์

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">

• เพิ่มทรัพยากรย่อยของหน้าไปยังรายการแคชล่วงหน้าในโปรแกรมทำงานของบริการ ดังนี้

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  // ... other entries ...
]);

2. ยืดอายุการใช้งานของทรัพยากรที่ดึงข้อมูลล่วงหน้า

ดังที่กล่าวไว้ก่อนหน้านี้ <link rel="prefetch"> จะดึงข้อมูลและเก็บทรัพยากรไว้ในแคช HTTP เป็นระยะเวลาจำกัด ซึ่งหลังจากนั้นกฎ Cache-Control สำหรับทรัพยากรจะมีผล สำหรับ Chrome 85 ค่านี้คือ 5 นาที

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

ในตัวอย่างก่อนหน้านี้ สามารถใช้ <link rel="prefetch"> ที่ใช้ดึงข้อมูลหน้าผลิตภัณฑ์ล่วงหน้าด้วยกลยุทธ์การแคชรันไทม์ของกล่องงาน

โดยทำตามขั้นตอนต่อไปนี้

• เพิ่มแท็ก <link rel="prefetch"> ลงในหน้าเว็บ

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• ใช้กลยุทธ์การแคชรันไทม์ในโปรแกรมทำงานของบริการสำหรับคำขอประเภทต่อไปนี้

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 ปัญหานี้อาจต้องใช้เวลาในเทรดหลักของหน้าและทำให้การติดตั้งใช้งานเป็นไปได้ยากขึ้น

ในกรณีเช่นนี้ ให้ใช้ "หน้าเว็บสำหรับกลยุทธ์การสื่อสารสำหรับโปรแกรมทำงานของบริการ" เพื่อมอบสิทธิ์ในการดึงข้อมูลล่วงหน้าทั้งหมดให้กับโปรแกรมทำงานของบริการ การสื่อสารประเภทนี้จะทำได้โดยใช้ worker.postMessage() ดังนี้

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

การดึงข้อมูลล่วงหน้าด้วยหน้าต่าง Workbox สามารถนำมาใช้ได้ด้วยวิธีต่อไปนี้

• ในหน้า: เรียกใช้ Service Worker ผ่านประเภทของข้อความและรายการ URL ที่จะดึงข้อมูลล่วงหน้า

const wb = new Workbox('/sw.js');
wb.register();

const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});

• ในโปรแกรมทำงานของบริการ: ใช้เครื่องจัดการข้อความเพื่อส่งคำขอ fetch() สำหรับ URL แต่ละรายการเพื่อดึงข้อมูลล่วงหน้า

addEventListener('message', (event) => {
  if (event.data.type === 'PREFETCH_URLS') {
    // Fetch URLs and store them in the cache
  }
});