อินเทอร์เฟซบรรทัดคำสั่งของ Workbox (อยู่ในแพ็กเกจ workbox-cli
) ประกอบด้วยโปรแกรม Node.js ที่เรียกว่าเวิร์กบ็อกซ์ซึ่งเรียกใช้ได้จาก Windows, macOS ในสภาพแวดล้อมบรรทัดคำสั่งที่เข้ากันได้กับ UNIX ขั้นสูง Workbox-cli จะรวมโมดูล Workbox-build และระบุวิธีง่ายๆ ในการผสานรวม Workbox เข้ากับกระบวนการสร้างบรรทัดคำสั่ง พร้อมด้วยการกำหนดค่าที่ยืดหยุ่น
ติดตั้ง CLI
หากต้องการติดตั้ง CLI ด้วยโหนด ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:
npm install workbox-cli --global
โหมด CLI
CLI มี 4 โหมดที่แตกต่างกันดังนี้
wizard
: คำแนะนำทีละขั้นตอนในการตั้งค่า Workbox สำหรับโปรเจ็กต์ของคุณgenerateSW
: สร้าง Service Worker ที่สมบูรณ์ให้กับคุณinjectManifest
: แทรกชิ้นงานเพื่อแคชล่วงหน้าในโปรเจ็กต์copyLibraries
: คัดลอกไลบรารี Workbox ไปยังไดเรกทอรี
wizard
วิซาร์ด Workbox จะถามคำถามชุดหนึ่งเกี่ยวกับการตั้งค่าไดเรกทอรีในเครื่องและไฟล์ที่คุณต้องการแคชล่วงหน้า คำตอบของคุณจะใช้ในการสร้างไฟล์การกำหนดค่าซึ่งจะนำมาใช้เมื่อทำงานในโหมด generateSW
นักพัฒนาซอฟต์แวร์ส่วนใหญ่จะต้องเรียกใช้วิซาร์ดกล่องงานเพียงครั้งเดียว และคุณมีอิสระในการปรับแต่งไฟล์การกำหนดค่าเริ่มต้นที่สร้างขึ้นด้วยตนเอง โดยใช้ตัวเลือกการกำหนดค่าบิลด์ที่รองรับ
วิธีเริ่มเรียกใช้วิซาร์ด
npx workbox-cli wizard
generateSW
คุณสามารถใช้ Workbox CLI เพื่อสร้างโปรแกรมทำงานของบริการที่สมบูรณ์โดยใช้ไฟล์การกำหนดค่า (เช่น ไฟล์ที่สร้างโดยวิซาร์ด)
เพียงเรียกใช้คำสั่งต่อไปนี้
npx workbox-cli generateSW path/to/config.js
นักพัฒนาซอฟต์แวร์ที่พอใจกับความสามารถในการแคชล่วงหน้าและการแคชรันไทม์ในตัวของ Workbox และไม่จำเป็นต้องปรับแต่งพฤติกรรมของ Service Worker ของตน ขอแนะนำให้ใช้โหมด generateSW
กรณีที่ควรใช้ generateSW
- คุณต้องการแคชไฟล์ล่วงหน้า
- คุณต้องมีการแคชรันไทม์ที่ไม่ซับซ้อน
เมื่อใดที่ไม่ควรใช้ generateSW
- คุณต้องการใช้ฟีเจอร์ Service Worker อื่นๆ (เช่น Web Push)
- คุณต้องการนำเข้าสคริปต์เพิ่มเติม หรือเพิ่มตรรกะเพิ่มเติมสำหรับกลยุทธ์การแคชที่กำหนดเอง
injectManifest
สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการควบคุมไฟล์สุดท้ายของ Service Worker ได้มากขึ้นสามารถใช้โหมด injectManifest
ได้ โหมดนี้จะถือว่าคุณมีไฟล์ Service Worker อยู่แล้ว (ตำแหน่งที่ระบุไว้ใน config.js)
เมื่อเรียกใช้ workbox injectManifest
จะมีการค้นหาสตริงที่เจาะจง (precacheAndRoute(self.__WB_MANIFEST)
โดยค่าเริ่มต้น) ในไฟล์ Service Worker ต้นทาง โดยจะแทนที่อาร์เรย์เปล่าด้วยรายการ URL เพื่อแคชล่วงหน้า และเขียนไฟล์ Service Worker ไปยังตำแหน่งปลายทางตามตัวเลือกการกำหนดค่าใน config.js
ส่วนโค้ดที่เหลือในโปรแกรมทำงานของบริการต้นทางจะไม่มีการเปลี่ยนแปลงใดๆ
คุณสามารถใช้ Workbox ในโหมดนี้ได้ดังนี้
npx workbox-cli injectManifest path/to/config.js
กรณีที่ควรใช้ injectManifest
- คุณต้องการควบคุม Service Worker ได้มากขึ้น
- คุณต้องการแคชไฟล์ล่วงหน้า
- คุณต้องปรับแต่งการกำหนดเส้นทางและกลยุทธ์
- คุณต้องการใช้ Service Worker กับฟีเจอร์ของแพลตฟอร์มอื่นๆ (เช่น Web Push)
เมื่อใดที่ไม่ควรใช้ injectManifest
- คุณต้องการวิธีที่ง่ายที่สุดในการเพิ่ม Service Worker ลงในเว็บไซต์
copyLibraries
โหมดนี้มีประโยชน์หากคุณต้องการใช้ injectManifest
และต้องการใช้ไฟล์ไลบรารี Workbox ที่โฮสต์ในต้นทางของคุณเองแทนการใช้ CDN
คุณต้องใช้เส้นทางในการเขียนไฟล์ไปยังสิ่งต่อไปนี้
npx workbox-cli copyLibraries third_party/workbox/
สร้างการผสานรวมกระบวนการ
ทำไม Workbox ต้องผสานรวมกับกระบวนการสร้างของฉัน
โปรเจ็กต์ Workbox มีไลบรารีจำนวนหนึ่งที่ทำงานร่วมกันเพื่อขับเคลื่อนโปรแกรมทำงานของเว็บแอป หากต้องการใช้ไลบรารีเหล่านั้นอย่างมีประสิทธิภาพ คุณต้องผสานรวม Workbox เข้ากับกระบวนการบิลด์ของเว็บแอป การดำเนินการนี้จะช่วยให้ Service Worker แคชเนื้อหาสำคัญของเว็บแอปทั้งหมดล่วงหน้าได้อย่างมีประสิทธิภาพ และดูแลให้เนื้อหาดังกล่าวอัปเดตอยู่เสมอ
workbox-cli
เป็นทางเลือกที่เหมาะสมสำหรับกระบวนการสร้างของฉันหรือไม่
หากคุณมีกระบวนการบิลด์ที่อิงตามสคริปต์ npm ทั้งหมด workbox-cli
ก็เป็นตัวเลือกที่ดี
หากคุณกำลังใช้ webpack เป็นเครื่องมือบิลด์ การใช้ workbox-webback-plugin ก็เป็นตัวเลือกที่ดีกว่า
หากคุณกำลังใช้ Gulp, Grunt หรือเครื่องมือบิลด์อื่นๆ ที่ใช้ Node.js การผสานรวม workbox-build เข้ากับสคริปต์บิลด์คือตัวเลือกที่ดีกว่า
หากคุณไม่มีกระบวนการสร้างเลย คุณควรมีกระบวนการสร้างก่อนที่จะใช้ Workbox เพื่อแคชเนื้อหาล่วงหน้า การพยายามไม่จำว่าต้องเรียกใช้ workbox-cli ด้วยตนเองอาจทำให้เกิดข้อผิดพลาด และการลืมเรียกใช้การเรียกใช้อาจทำให้ระบบแสดงเนื้อหาที่ไม่มีการอัปเดตต่อผู้เข้าชมที่กลับมา
การตั้งค่าและการกำหนดค่า
หลังจากติดตั้ง workbox-cli
เป็นทรัพยากร Dependency ในการพัฒนาสำหรับโปรเจ็กต์ในเครื่อง คุณจะเพิ่มการเรียกไปยัง workbox
ในตอนท้ายของสคริปต์ npm ของกระบวนการบิลด์ที่มีอยู่ได้ ดังนี้
จาก package.json:
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
แทนที่ <mode>
ด้วย generateSW
หรือ injectManifest
(ขึ้นอยู่กับกรณีการใช้งาน) และแทนที่ <path/to/config.js>
ด้วยเส้นทางไปยังตัวเลือกการกำหนดค่า workbox wizard
อาจสร้างการกำหนดค่าโดยอัตโนมัติหรือปรับเปลี่ยนด้วยตนเอง
การกำหนดค่า
ตัวเลือกที่ generateSW
ใช้
ดูตัวเลือกการกำหนดค่าแบบเต็มได้ในเอกสารอ้างอิง
ตัวเลือกที่ injectManifest
ใช้
ดูตัวเลือกการกำหนดค่าแบบเต็มได้ในเอกสารอ้างอิง