วิธีการทำงาน

กล่องงานมีความยืดหยุ่นพอที่จะรองรับกระบวนการสร้างของโปรเจ็กต์ได้เกือบทั้งหมด ซึ่งหมายความว่าคุณสามารถใช้ Workbox ได้มากกว่า 1 วิธี ซึ่งจะช่วยให้คุณสามารถเลือกการผสานรวมที่เหมาะสมสำหรับโปรเจ็กต์ของคุณ ไม่ว่าคุณจะผสานรวมกับ Workbox ด้วยวิธีใดก็ตาม เครื่องมือต่างๆ ก็จะมี API ที่คล้ายกัน

generateSW พบกับ injectManifest

คุณจะใช้ 1 ใน 2 วิธีหลักของเครื่องมือสร้าง Workbox ได้แก่ generateSW หรือ injectManifest ตัวเลือกที่คุณควรใช้จะขึ้นอยู่กับว่าคุณต้องการความยืดหยุ่นมากน้อยเพียงใด generateSW ให้ความสำคัญกับความง่ายในการใช้งานและความเรียบง่ายที่มีความยืดหยุ่น ซึ่งให้คุณประกาศชุดตัวเลือกการกำหนดค่าและมอบ Service Worker ที่ใช้งานได้เต็มรูปแบบให้คุณเป็นการตอบแทน

injectManifest มีความยืดหยุ่นมากกว่าและมีความเรียบง่ายบางประการ เนื่องจากคุณจะต้องเขียนโค้ดให้ผู้ปฏิบัติงานบริการด้วยตนเองโดยที่ injectManifest จะมีไฟล์ Manifest แบบแคชล่วงหน้าที่วิธีการแคชล่วงหน้าของ Workbox จะใช้ได้

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

คุณควรใช้ generateSW ในกรณีต่อไปนี้

• คุณต้องการแคชไฟล์ที่เกี่ยวข้องกับกระบวนการบิลด์ล่วงหน้า รวมถึงไฟล์ที่ URL มีแฮชที่คุณอาจไม่รู้ล่วงหน้า
• คุณต้องมีการแคชรันไทม์แบบง่ายๆ ซึ่งกำหนดค่าได้ผ่านตัวเลือกของ generateSW

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

ในทางกลับกัน คุณไม่ควรใช้ generateSW ในกรณีต่อไปนี้

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

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

คุณควรใช้ injectManifest ในกรณีต่อไปนี้

• คุณต้องการแคชล่วงหน้า แต่ก็ต้องการเขียน Service Worker ของคุณเอง
• คุณมีความจำเป็นในการแคชหรือการกำหนดเส้นทางที่ซับซ้อนซึ่งไม่สามารถแสดงผ่านตัวเลือกการกำหนดค่าของ generateSW ได้
• คุณต้องการใช้ API อื่นๆ ในโปรแกรมทำงานของบริการ (เช่น Web Push)

injectManifest แตกต่างจาก generateSW ตรงที่ระบบกำหนดให้คุณต้องระบุไฟล์ของ Service Worker ต้นทาง ในเวิร์กโฟลว์นี้ ไฟล์ของ Service Worker ต้นทางต้องมีสตริง self.__WB_MANIFEST พิเศษเพื่อให้ injectManifest แทนที่ด้วยไฟล์ Manifest ของแคชล่วงหน้าได้

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

คุณไม่ควรใช้ injectManifest ในกรณีต่อไปนี้

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

ใช้เครื่องมือสร้างของ Workbox

หากคุณกำลังมองหาวิธีที่ไม่จำเป็นต้องใช้งานเฟรมเวิร์กเพื่อใช้ Workbox ในกระบวนการสร้าง คุณมี 3 ตัวเลือก ดังนี้

1. workbox-cli
2. workbox-build เครื่องมือบรรทัดคำสั่ง
3. การใช้ Bundler (เช่น workbox-webpack-plugin)

เครื่องมือบิลด์แต่ละรายการเหล่านี้มีทั้งโหมด generateSW และ injectManifest พร้อมด้วยชุดตัวเลือกที่คล้ายกัน ตัวเลือกเหล่านี้เป็นตัวเลือกที่ดีเมื่อคุณไม่ต้องการเชื่อมโยง Service Worker ที่ทำงานด้วย 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-webpack-plugin จะเรียกใช้เมธอด generateSW หรือ injectManifest เช่นเดียวกับ workbox-cli และ workbox-build ยกเว้นปลั๊กอินจะใช้ตัวพิมพ์ใหญ่สำหรับชื่อเมธอดเหล่านั้นเป็น 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-sw ได้ เมื่อใช้ workbox-sw คุณจะโหลดรันไทม์ของ Workbox ได้จาก CDN หรือในเครื่อง แล้วเขียน Service Worker ของคุณเอง

บทสรุป

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