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

การแคชล่วงหน้าเป็นหนึ่งในสิ่งที่พบได้บ่อยที่สุดในโปรแกรมทำงานของบริการ และ 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 ของแคชล่วงหน้าได้โดยใช้ตัวเลือกการกำหนดค่าเพิ่มเติม

การเปรียบเทียบข้อมูลคู่กัน

คลิกแต่ละแท็บด้านล่างเพื่อเปรียบเทียบการใช้เมธอด 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'
  ]
});

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

node build-sw.js

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

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 อย่างไรก็ตาม การแคชล่วงหน้าไม่ใช่สิ่งเดียวที่คุณน่าจะทำในโปรแกรมทำงานของบริการ เมื่อดำเนินการต่อ คุณจะได้เรียนรู้เทคนิคอื่นๆ เช่น การแคชรันไทม์