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

เวิร์กบ็อกซ์มีความยืดหยุ่นมากพอที่จะรองรับกระบวนการบิลด์ของโปรเจ็กต์ต่างๆ ซึ่งหมายความว่าคุณจะใช้ 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 ตัวเลือก ดังนี้

1. workbox-cli
2. เครื่องมือบรรทัดคำสั่ง workbox-build
3. การใช้ 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 ด้วยฟีเจอร์ขั้นสูงเพิ่มเติมเมื่อจำเป็น