workbox-cli

อินเทอร์เฟซบรรทัดคำสั่ง Workbox (มีอยู่ใน workbox-cli) ประกอบด้วยโปรแกรม Node.js ที่เรียกว่า Workbox สามารถเรียกใช้จากบรรทัดคำสั่งที่ใช้กับ UNIX และ Windows, macOS ได้ ของคุณ ภายในพื้นที่ทำงาน Workbox-cli จะห่อหุ้มโมดูลเวอร์ชัน Workbox และเป็นวิธีง่ายๆ ในการผสานรวม Workbox ไว้ในบิลด์บรรทัดคำสั่ง ด้วยการกำหนดค่าที่ยืดหยุ่นได้

ติดตั้ง CLI

หากต้องการติดตั้ง CLI ด้วยโหนด ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

npm install workbox-cli --global

โหมด CLI

CLI มี 4 โหมดที่แตกต่างกันดังนี้

  • wizard: คำแนะนำทีละขั้นตอนในการตั้งค่า Workbox สำหรับโปรเจ็กต์
  • generateSW: สร้าง Service Worker แบบสมบูรณ์ให้คุณ
  • injectManifest: แทรกเนื้อหาเพื่อแคชล่วงหน้าในโปรเจ็กต์
  • copyLibraries: คัดลอกไลบรารี Workbox ไปยังไดเรกทอรี

wizard

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

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

หากต้องการเริ่มต้นการเรียกใช้วิซาร์ด ให้ทำดังนี้

npx workbox-cli wizard

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

generateSW

คุณสามารถใช้ Workbox CLI เพื่อสร้างโปรแกรมทำงานของบริการที่สมบูรณ์ได้โดยใช้ ไฟล์การกำหนดค่า (เช่น ไฟล์ที่สร้างโดยวิซาร์ด)

เพียงเรียกใช้คำสั่งต่อไปนี้

npx workbox-cli generateSW path/to/config.js

นักพัฒนาแอปที่พอใจกับการแคชล่วงหน้าและการแคชรันไทม์ในตัวของ Workbox ของการทำงาน และไม่จำเป็นต้องปรับแต่งลักษณะการทำงานของโปรแกรมทำงานของบริการ แนะนำให้ใช้โหมด generateSW

กรณีที่ควรใช้generateSW

  • คุณต้องการแคชไฟล์ล่วงหน้า
  • คุณต้องการแคชรันไทม์ที่ไม่ซับซ้อน

เมื่อใดที่ไม่ควรใช้ generateSW

  • คุณต้องการใช้ฟีเจอร์อื่นๆ ของ Service Worker (เช่น พุชบนเว็บ)
  • คุณต้องการนำเข้าสคริปต์เพิ่มเติม หรือเพิ่มตรรกะเพิ่มเติมสำหรับกลยุทธ์การแคชที่กำหนดเอง

injectManifest

สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการควบคุมไฟล์ Service Worker สุดท้ายได้มากขึ้น สามารถใช้โหมด injectManifest โหมดนี้จะถือว่าคุณ ไฟล์ Service Worker ที่มีอยู่ (ตำแหน่งที่ระบุใน config.js)

เมื่อเรียกใช้ workbox injectManifest ระบบจะมองหาสตริงที่เจาะจง (precacheAndRoute(self.__WB_MANIFEST) โดยค่าเริ่มต้น) ในแหล่งที่มาของคุณ Service Worker โดยแทนที่อาร์เรย์ที่ว่างเปล่าด้วยรายการ URL ที่จะแคชล่วงหน้าและเขียนไฟล์โปรแกรมทำงานของบริการ ตำแหน่งปลายทางตามตัวเลือกการกำหนดค่าใน config.js โดยคุณไม่ต้องดำเนินการใดๆ กับโค้ดที่เหลือในโปรแกรมทำงานของบริการต้นทาง

คุณสามารถใช้กล่องงานในโหมดนี้ได้ดังนี้

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 ต้องผสานรวมกับกระบวนการสร้างของฉัน

โปรเจ็กต์กล่องงานประกอบด้วยไลบรารีจำนวนหนึ่งที่ทำงานร่วมกันเพื่อ ขับเคลื่อนการทำงานของเว็บแอป Service Worker หากต้องการ ใช้ไลบรารีเหล่านี้อย่างมีประสิทธิภาพ ก็ต้องผสานรวม Workbox ไว้ใน ของขั้นตอนบิลด์ของเว็บแอป วิธีนี้ช่วยให้มั่นใจได้ว่าโปรแกรมทำงานของบริการจะทำสิ่งต่อไปนี้ได้ แคชเนื้อหาที่สำคัญของเว็บแอปทั้งหมดไว้ล่วงหน้าอย่างมีประสิทธิภาพและ เนื้อหาให้เป็นข้อมูลล่าสุดแล้ว

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 (ขึ้นอยู่กับ ใน Use Case ของคุณ) และ <path/to/config.js> พร้อมเส้นทางไปยัง ตัวเลือกการกำหนดค่า ระบบอาจสร้างการกำหนดค่าให้คุณแล้ว โดยอัตโนมัติโดย workbox wizard หรือปรับเปลี่ยนด้วยตนเอง

การกำหนดค่า

ตัวเลือกที่ generateSW ใช้

ดูตัวเลือกการกำหนดค่าทั้งชุดได้ในเอกสารประกอบอ้างอิง

ตัวเลือกที่ injectManifest ใช้

ดูตัวเลือกการกำหนดค่าทั้งชุดได้ในเอกสารประกอบอ้างอิง