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

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

กำลังแคชล่วงหน้ากับ generateSW

generateSW คือวิธีที่ง่ายที่สุดในการแคชเนื้อหาล่วงหน้าใน Workbox สิ่งสำคัญที่ต้องจำไว้เกี่ยวกับ generateSW คือคุณไม่ได้เขียน Service Worker ของคุณเอง แต่กำลังขอให้ Workbox สร้างให้คุณ แต่คุณสามารถกำหนดลักษณะการทำงานของโหมดดังกล่าวได้ผ่านตัวเลือกการกำหนดค่าต่างๆ

generateSW จะทำสิ่งต่างๆ แตกต่างกันไปโดยค่าเริ่มต้นตามเครื่องมือสร้างที่คุณใช้ เมื่อใช้ workbox-webpack-plugin คุณไม่จำเป็นต้องระบุตัวเลือกการกำหนดค่า โดยค่าเริ่มต้น ปลั๊กอินจะแคชทุกอย่างที่ Webpack รวมไว้ในกราฟการอ้างอิงไว้ล่วงหน้า และเขียน Service Worker ชื่อ service-worker.js ลงในไดเรกทอรีที่ระบุโดย output.path

ในทางตรงกันข้าม หากคุณใช้ workbox-build หรือ workbox-cli เฉพาะเนื้อหา HTML, CSS และ JavaScript ที่อ่านจากระบบไฟล์ในเครื่องเท่านั้นที่จะแคชล่วงหน้าโดยค่าเริ่มต้น สำหรับการกำหนดค่า คุณต้องระบุตัวเลือก swDest และตัวเลือก globDirectory ในการกำหนดค่า generateSW เพื่อให้การแคชล่วงหน้าทำงานได้ คุณอาจต้องกำหนดค่าตัวเลือกเพิ่มเติมที่จะส่งผลต่อการทำงานของ Service Worker ด้วย ดังนั้นให้อ่านเอกสารประกอบด้วย

กำลังแคชล่วงหน้ากับ injectManifest

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

เมื่อใช้ injectManifest คุณจะต้องเดินสายลอจิกการแคชล่วงหน้า เมื่อ injectManifest ตรวจสอบ Service Worker อินพุต จะมองหาตัวแปร self.__WB_MANIFEST พิเศษและแทนที่ด้วยไฟล์ Manifest ที่เก็บไว้ล่วงหน้า หากไม่มีตัวแปรนี้ injectManifest จะแสดงข้อผิดพลาด

รายการข้อมูลในไฟล์ Manifest ของ Precache สามารถปรับเปลี่ยนได้ด้วยตัวเลือกการกำหนดค่าเพิ่มเติม

การเปรียบเทียบแบบแสดงคู่กัน

คลิกแต่ละแท็บด้านล่างเพื่อเปรียบเทียบการใช้งานเมธอด generateSW และ injectManifest

เนื่องจาก generateSW สร้าง Service Worker ไว้ คุณจึงต้องระบุการกำหนดค่าเท่านั้น ด้านล่างเป็นตัวอย่างที่ใช้ workbox-build:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

จากนั้นระบบจะสร้าง Service Worker ในบรรทัดคำสั่งด้วยโหนดได้ดังนี้

node build-sw.js

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

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

จดสตริง self.__WB_MANIFEST นี่คือตัวยึดตำแหน่งที่ Workbox แทนที่ด้วยไฟล์ Manifest แคชล่วงหน้า ด้านล่างคือการกำหนดค่าที่ถูกต้องสำหรับกรณีการใช้งานนี้

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

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

บทสรุป

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