เวิร์กบ็อกซ์มีความยืดหยุ่นมากพอที่จะรองรับกระบวนการบิลด์ของโปรเจ็กต์ต่างๆ ซึ่งหมายความว่าคุณจะใช้ Workbox ได้มากกว่า 1 วิธี ซึ่งช่วยให้คุณเลือกการผสานรวมที่เหมาะสมกับโปรเจ็กต์ได้ ไม่ว่าคุณจะผสานรวมกับ Workbox อย่างไร เครื่องมือต่างๆ ก็มี API ที่คล้ายกัน
generateSW
พบกับ injectManifest
คุณจะใช้ 1 ใน 2 วิธีหลักๆ ในเครื่องมือบิลด์ของ Workbox ได้แก่ generateSW
หรือ injectManifest
วิธีที่คุณควรใช้จะขึ้นอยู่กับความยืดหยุ่นที่คุณต้องการ generateSW
ให้ความสำคัญกับการใช้งานง่ายและความเรียบง่ายที่มีต้นทุนที่ยืดหยุ่น ซึ่งจะช่วยให้คุณประกาศชุดตัวเลือกการกำหนดค่าและมอบ Service Worker ที่ทำงานได้อย่างเต็มรูปแบบเป็นการตอบแทน
injectManifest
เน้นความเรียบง่ายแต่มีความยืดหยุ่นมากกว่า เนื่องจากคุณจะต้องเขียนโค้ดสำหรับ Service Worker ด้วยตนเองโดย injectManifest
จะกำหนดไฟล์ Manifest สำหรับแคชล่วงหน้าซึ่งวิธีการแคชล่วงหน้าของ Workbox ใช้ได้
กรณีที่ควรใช้ generateSW
คุณควรใช้ generateSW
ในกรณีต่อไปนี้
- คุณต้องการแคชไฟล์ล่วงหน้าที่เชื่อมโยงกับกระบวนการสร้างของคุณ รวมถึงไฟล์ที่มี URL ที่มีแฮชที่คุณอาจไม่ทราบมาก่อน
- คุณต้องการการแคชรันไทม์อย่างง่าย ซึ่งกำหนดค่าผ่านตัวเลือกของ
generateSW
ได้
เมื่อใดที่ไม่ควรใช้ generateSW
ในทางกลับกัน คุณไม่ควรใช้ generateSW
ในกรณีต่อไปนี้
- คุณต้องการใช้ฟีเจอร์อื่นๆ ของโปรแกรมทำงานของบริการ (เช่น Web Push)
- คุณต้องมีความยืดหยุ่นมากขึ้นในการนำเข้าสคริปต์เพิ่มเติมหรือใช้โมดูล Workbox ที่ต้องการเพื่อปรับแต่ง Service Worker ให้ตรงกับความต้องการของแอปพลิเคชัน
กรณีที่ควรใช้ injectManifest
คุณควรใช้ injectManifest
ในกรณีต่อไปนี้
- คุณต้องการแคชไฟล์ล่วงหน้า แต่ต้องการเขียน Service Worker ของคุณเอง
- คุณมีความต้องการในการแคชหรือการกำหนดเส้นทางที่ซับซ้อนซึ่งไม่สามารถแสดงผ่านตัวเลือกการกำหนดค่าของ
generateSW
- คุณต้องการใช้ API อื่นๆ ในโปรแกรมทำงานของบริการ (เช่น Web Push)
injectManifest
แตกต่างจาก generateSW
ตรงที่คุณต้องระบุไฟล์โปรแกรมทำงานของบริการต้นทาง ในเวิร์กโฟลว์นี้ ไฟล์โปรแกรมทำงานของบริการต้นทางต้องมีสตริง self.__WB_MANIFEST
พิเศษเพื่อให้ injectManifest
แทนที่ไฟล์ด้วยไฟล์ Manifest สำหรับแคชล่วงหน้าได้
เมื่อใดที่ไม่ควรใช้ injectManifest
คุณไม่ควรใช้ injectManifest
ในกรณีต่อไปนี้
- คุณไม่ต้องการใช้แคชล่วงหน้าในโปรแกรมทำงานของบริการ
- ข้อกำหนดของโปรแกรมทำงานของบริการนั้นไม่ซับซ้อนมากพอที่จะครอบคลุมโดยสิ่งที่
generateSW
และตัวเลือกการกำหนดค่ามีให้ - คุณให้ความสำคัญกับการใช้งานง่ายมากกว่าความยืดหยุ่น
ใช้เครื่องมือบิลด์ของ Workbox
หากกำลังมองหาวิธีใช้ Workbox แบบไม่ซับซ้อนในกระบวนการสร้าง คุณมี 3 ตัวเลือก ดังนี้
workbox-cli
- เครื่องมือบรรทัดคำสั่ง
workbox-build
- การใช้ Bundler (เช่น
workbox-webpack-plugin
)
เครื่องมือสร้างแต่ละรายการเหล่านี้มีทั้งโหมด generateSW
และ injectManifest
โดยมีชุดตัวเลือกที่คล้ายกัน ทั้งหมดนี้คือทางเลือกที่ดีเมื่อคุณไม่ต้องการให้โปรแกรมทำงานของบริการที่ทำงานด้วยระบบ Workbox เข้ากับเฟรมเวิร์กใดเฟรมเวิร์กหนึ่ง ในการที่จะทราบว่าตัวเลือกเหล่านี้เหมาะสมที่สุดแล้ว เรามาดูแต่ละรายการคร่าวๆ กัน
workbox-cli
หากคุณกำลังมองหาอุปสรรคที่ต่ำที่สุดในการเข้าใช้ด้วย Workbox CLI คือสิ่งที่เหมาะสำหรับคุณ
npm install workbox-cli --save-dev
หากต้องการเริ่มใช้ CLI ให้เรียกใช้วิซาร์ดด้วย npx workbox wizard
วิซาร์ดจะถามคำถาม 2-3 ข้อ แล้วนำคำตอบของคำถามเหล่านั้นไปใช้ตั้งค่าโปรเจ็กต์ด้วยไฟล์ workbox-config.js
ที่คุณปรับแต่งให้เหมาะกับความต้องการได้ โดยจะมีลักษณะดังนี้
// A config for `generateSW`
export default {
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
};
เมื่อสร้างไฟล์การกำหนดค่าแล้ว CLI จะเรียกใช้เมธอด generateSW
หรือ injectManifest
ให้คุณได้ ข้อความช่วยเหลือของ CLI มีข้อมูลและตัวอย่างการใช้งานเพิ่มเติม
workbox-build
workbox-cli
เป็น Wrapper รอบๆ โมดูล workbox-build
และอีกวิธีหนึ่งคือการใช้ workbox-build
โดยตรง เมื่อใช้ workbox-build
แทนที่จะระบุตัวเลือกโดยใช้ไฟล์ workbox-config.js
คุณจะใช้เมธอด generateSW
หรือ injectManifest
โดยตรงเป็นส่วนหนึ่งของสคริปต์โหนดด้วยการส่งผ่านชุดตัวเลือกที่คล้ายกันดังนี้
// build-sw.mjs
import {generateSW} from 'workbox-build';
generateSW({
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
});
ในตัวอย่างข้างต้น workbox-build
จะเขียน Service Worker ที่สร้างขึ้นลงในไดเรกทอรี dist
เมื่อเรียกใช้คำสั่ง node build-sw.mjs
การใช้ Bundler
Bundler ต่างๆ มีปลั๊กอิน Workbox ของตนเอง แต่ Bundler เดียวที่ทีม Workbox รองรับอย่างเป็นทางการคือ Webpack ผ่านทาง workbox-webpack-plugin
เช่นเดียวกับ workbox-cli
และ workbox-build
workbox-webpack-plugin
จะเรียกใช้เมธอด generateSW
หรือ injectManifest
ยกเว้นปลั๊กอินจะกำหนดให้ชื่อเมธอดเหล่านั้นเป็น GenerateSW
หรือ InjectManifest
มิฉะนั้น การใช้งานจะคล้ายกับ workbox-build
:
// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';
export default {
// Other webpack config options omitted for brevity...
plugins: [
new GenerateSW({
swDest: './dist/sw.js'
})
]
};
ตัวเลือกที่คุณส่งไปยัง GenerateSW
หรือ InjectManifest
ไม่เหมือนกับ generateSW
หรือ injectManifest
แต่มีความทับซ้อนกันอย่างมีนัยสำคัญ โดยเฉพาะอย่างยิ่ง คุณไม่จำเป็นต้องระบุตัวเลือก globDirectory
สำหรับ GenerateSW
หรือได้ เนื่องจาก Webpack ทราบแล้วว่ามีการรวมเนื้อหาเวอร์ชันที่ใช้งานจริงจากที่ใด
ใช้เฟรมเวิร์ก
ทุกอย่างที่อยู่ในประเด็นนี้จะมุ่งเน้นไปที่การใช้ Workbox โดยไม่คำนึงถึงค่ากำหนดเฟรมเวิร์กของผู้ใช้ อย่างไรก็ตาม คุณอาจใช้ Workbox ภายในเฟรมเวิร์กที่เฉพาะเจาะจงได้หากทำให้การพัฒนาง่ายขึ้น เช่น create-react-app
จะจัดส่งพร้อมกับ Workbox โดยค่าเริ่มต้น เราจะกล่าวถึงการผสานรวมเฟรมเวิร์กแบบต่างๆ กับ Workbox ในบทความต่อไป
โปรดทราบว่าการผสานรวมเฉพาะเฟรมเวิร์กของ Workbox เหล่านี้อาจจำกัดความสามารถในการกำหนดค่า Workbox ในแบบที่คุณต้องการ ในกรณีเช่นนี้ คุณกลับไปใช้วิธีการที่อธิบายไว้ในบทความนี้ได้เสมอ
จะทำอย่างไรหากฉันไม่มีกระบวนการสร้าง
เอกสารนี้จะถือว่าโปรเจ็กต์ของคุณมีกระบวนการบิลด์ แต่จริงๆ แล้วโปรเจ็กต์ของคุณอาจไม่มี หากตรงกับสถานการณ์ของคุณ คุณยังใช้ Workbox กับโมดูล workbox-sw
ได้ เมื่อใช้ workbox-sw
คุณจะโหลดรันไทม์ของ Workbox จาก CDN หรือในเครื่อง และเขียน Service Worker ของคุณเองได้
บทสรุป
ความยืดหยุ่นของ Workbox ช่วยให้สามารถใช้งานได้เกือบทุกโปรเจ็กต์ ไม่ว่าจะมีค่ากำหนดของเฟรมเวิร์กหรือ Toolchain ใดก็ตาม วิธีการทั้งหมดเหล่านี้จะช่วยให้คุณทำการแคชล่วงหน้าและแคชรันไทม์ได้ด้วย 2 วิธี ในขณะเดียวกันก็เพิ่มความยืดหยุ่นในการสร้าง Service Worker ด้วยฟีเจอร์ขั้นสูงเพิ่มเติมเมื่อจำเป็น