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