ขอขอบคุณที่ติดตาม Google I/O ดูเนื้อหาตามคำขอ

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

เสริมเทคนิคการโหลดล่วงหน้าแบบดั้งเดิมด้วย Service Worker

Demián Renzulli

Gilberto Cocchi

Jeff Posnick

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

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

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

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

กรณีการใช้งานจริง

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

ภาพหน้าจอของหน้าข้อมูลผลิตภัณฑ์ที่ 1 และ 2 ของ MercadoLibre และแท็กการเรียกข้อมูลล่วงหน้าของลิงก์ที่เชื่อมต่อทั้ง 2 หน้า

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

การใช้การแคช Service Worker จะช่วยยืดอายุของทรัพยากรที่ระบบเตรียมไว้ล่วงหน้าได้นานกว่ากรอบเวลา 5 นาที

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

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

ภาพหน้าจอของหน้าแรกและหน้าบทความของ Virgilio Sport พร้อมเมตริกผลลัพธ์หลังจากการอ่านล่วงหน้า

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

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

ข้อควรระวัง: คุณต้องทําตามขั้นตอนต่างๆ เพื่อให้แน่ใจว่าการเพิ่ม Service Worker ลงในเว็บไซต์จะไม่ทําให้การไปยังส่วนต่างๆ ช้าลง การเริ่มต้น Service Worker โดยไม่ใช้เพื่อตอบสนองคำขอไปยังส่วนต่างๆ ของหน้าเว็บจะทำให้เกิดเวลาในการตอบสนองเพียงเล็กน้อย (ตามที่อธิบายไว้ในการสร้างแอปที่เร็วขึ้นและมีความยืดหยุ่นมากขึ้นด้วย 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
  }
});