workbox-cli

อินเทอร์เฟซบรรทัดคำสั่งของ 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

ภาพหน้าจอของวิซาร์ดของ Workbox CLI

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 ใช้

ดูตัวเลือกการกำหนดค่าแบบเต็มได้ในเอกสารอ้างอิง