การแก้ไขข้อบกพร่องของโปรแกรมทำงานของบริการไม่ใช่เรื่องง่าย คุณต้องจัดการกับวงจร การอัปเดต แคช และการโต้ตอบระหว่างสิ่งต่างๆ เหล่านี้ โชคดีที่ Workbox ทำให้การพัฒนา Service Worker ง่ายขึ้น แต่ก็ทำให้การแก้ไขข้อบกพร่องทำได้ง่ายขึ้นผ่านการบันทึกข้อมูลด้วย หน้านี้จะพูดถึงเครื่องมือแก้ไขข้อบกพร่องบางส่วนที่มี รวมถึงวิธีการทำงานของการบันทึกของ Workbox รวมถึงวิธีกำหนดค่า
เครื่องมือแก้ปัญหาที่พร้อมใช้งาน
มีเครื่องมือมากมายให้เลือกใช้ในเบราว์เซอร์สำหรับการแก้ไขข้อบกพร่องและการแก้ปัญหาขณะพัฒนา Service Worker ต่อไปนี้เป็นแหล่งข้อมูลบางส่วนที่ช่วยให้คุณเริ่มต้นใช้งานเบราว์เซอร์ที่คุณเลือกได้
Chrome และ Edge
Chrome (และ EDGE เวอร์ชันล่าสุดจากเครื่องมือ Blink) มีชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีประสิทธิภาพ เครื่องมือบางส่วนโดยเฉพาะใน DevTools ของ Chrome ได้รับการกล่าวถึงในช่วงต้นของเอกสารนี้ แต่ก็ยังมีอะไรให้สำรวจอีกมากมายดังนี้
- แก้ไขข้อบกพร่อง Progressive Web App
- ตรวจสอบกิจกรรมในเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- วิดีโอ: การแก้ไขข้อบกพร่อง Service Worker ใน Chrome
- Codelab: แก้ไขข้อบกพร่องของผู้ปฏิบัติงานบริการ
Firefox
ผู้ใช้ Firefox โปรดไปที่แหล่งข้อมูลต่อไปนี้
- แก้ไขข้อบกพร่องของโปรแกรมทำงานของบริการโดยใช้แผงแอปพลิเคชัน Devtools ของ Firefox
- วิดีโอ: Debugging Service Workers ใน Firefox
Safari
ปัจจุบัน Safari มีชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่จำกัดมากขึ้นสำหรับการแก้ไขข้อบกพร่องของ Service Worker คุณดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้
การบันทึกเวิร์กบ็อกซ์
การพัฒนาประสบการณ์ที่สำคัญสำหรับนักพัฒนาซอฟต์แวร์ที่ Workbox นำเสนอคือการบันทึกข้อมูล เมื่อเปิดใช้งานการบันทึกแล้ว Workbox จะบันทึกกิจกรรมเกือบทั้งหมดโดยมีวิธีการทำงานที่เป็นเอกลักษณ์
บิลด์การพัฒนาของ Workbox จะเปิดการบันทึกโดยค่าเริ่มต้น แต่เวอร์ชันที่ใช้งานจริงจะปิดฟังก์ชันนี้ การสลับระหว่างบิลด์การพัฒนาและเวอร์ชันที่ใช้งานจริงมีขั้นตอนที่แตกต่างกัน ขึ้นอยู่กับว่าคุณสร้างแพ็กเกจ Workbox ที่กำหนดเอง หรือใช้สำเนาที่จัดกลุ่มไว้ล่วงหน้าผ่าน workbox-sw
มีหรือไม่มี Bundler
Bundler เป็นเครื่องมือที่นำโค้ดจากโมดูลแต่ละโมดูลมาสร้างเอาต์พุต JavaScript ที่พร้อมทำงานในเบราว์เซอร์ เมื่อใช้ Bundler คุณอาจใช้ปลั๊กอิน Workbox สำหรับ Bundler โดยเฉพาะเพื่อช่วยในการแคชล่วงหน้า เช่น workbox-webpack-plugin
หรือคุณอาจกำลังรวมตรรกะการแคชรันไทม์ของ Workbox ไว้ การบันทึกของ Workbox ก็ขึ้นอยู่กับการตั้งค่าโหมดการใช้งานจริงในการกำหนดค่าของ Bundler ดังนี้
- ใน Webpack คุณตั้งตัวเลือกการกำหนดค่า
mode
เป็น'production'
หรือ'development'
ได้workbox-webpack-plugin
จะใช้การบันทึกการผลิตหรือการพัฒนาใน Workbox ตามค่านี้ - สำหรับ Rollup
rollup-plugin-workbox
จะยอมรับตัวเลือกการกำหนดค่าmode
ซึ่งมีผลไม่ว่า Workbox จะบันทึกข้อมูลใดๆ ไปยังคอนโซลหรือไม่ หากใช้ Rollup โดยไม่มีปลั๊กอินเฉพาะสำหรับ Workbox คุณจะต้องกำหนดค่า@rollup/plugin-replace
ให้แทนที่process.env.NODE_ENV
ด้วย'development'
หรือ'production'
สมมติว่าต้องลบล้างพฤติกรรมการบันทึกเริ่มต้นในการพัฒนา ในกรณีนี้ ปลั๊กอิน Workbox ที่เหมาะสมสำหรับ Bundler ควรอนุญาตให้คุณฮาร์ดโค้ดค่ากำหนดสำหรับการแก้ไขข้อบกพร่องของบันทึกในการกำหนดค่า เช่น คุณสามารถปิดการบันทึกในเวิร์กบ็อกซ์ผ่านตัวเลือก mode
ของ workbox-webpack-plugin
สำหรับเมธอด GenerateSW
ไม่มี Bundler
แม้ว่า Bundler จะยอดเยี่ยม แต่ก็ไม่ใช่ทุกโปรเจ็กต์ที่ต้องการ หากคุณพบว่าตนเองตกอยู่ในสถานการณ์ที่คุณต้องการเพิ่ม Workbox ในโปรเจ็กต์ที่ไม่ได้ใช้ Bundler เราขอแนะนำให้ใช้ workbox-sw
โมดูล workbox-sw
ช่วยให้การโหลดโมดูล Workbox อื่นๆ ง่ายขึ้น (เช่น workbox-routing
, workbox-precaching
ฯลฯ) จาก CDN การที่จะโหลด Workbox เวอร์ชันการพัฒนาหรือเวอร์ชันที่ใช้งานจริงจะขึ้นอยู่กับ URL ที่ใช้เข้าถึงเว็บแอปของคุณ โดยค่าเริ่มต้น workbox-sw
จะโหลด Workbox เวอร์ชันการพัฒนาหากเว็บแอปทำงานบน http://localhost
และเวอร์ชันที่ใช้งานจริงตลอดเวลา
คุณลบล้างลักษณะการทำงานเริ่มต้นได้โดยเรียกใช้เมธอด setConfig
ของ Workbox เพื่อตั้งค่าตัวเลือก debug
เป็น true
ดังนี้
// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
// This must come before any other workbox.* methods.
workbox.setConfig({
debug: true
});
// Now use workbox.routing.*, workbox.precaching.*, etc.
ปิดการเข้าสู่ระบบในเวอร์ชันสำหรับการพัฒนาในเวิร์กโฟลว์ใดก็ได้
ไม่ว่าคุณจะใช้ Bundler หรือไม่ก็ตาม คุณสามารถปิดการบันทึกในบิลด์สำหรับการพัฒนาทั้งหมดได้โดยกำหนด true
ให้กับตัวแปร self.__WB_DISABLE_DEV_LOGS
พิเศษใน Service Worker ดังนี้
//
self.__WB_DISABLE_DEV_LOGS = true;
// The rest of your Workbox service worker code goes here
ข้อดีอย่างหนึ่งของวิธีนี้คือไม่ขึ้นอยู่กับการกำหนดค่า Bundler เลย และจะทำงานได้ไม่ว่าจะใช้ workbox-sw
โดยตรง หรือใช้ Bundler สร้างแพ็กเกจ Service Worker ที่ทำงานด้วย Workbox ให้คุณ
ข้อมูลเพิ่มเติม
หากยังคงต้องค้นหาสิ่งที่เกิดขึ้นใน Service Worker ที่มีข้อบกพร่องและการบันทึกยังไม่เพียงพอ ให้ลองโพสต์คำถามใน Stack Overflow โดยใช้แท็ก workbox
หากไม่พบคำตอบ ให้แจ้งปัญหาเกี่ยวกับ GitHub (หลังจากอ่านหลักเกณฑ์การมีส่วนร่วม) วิธีนี้ไม่เพียงเปิดโอกาสให้นักพัฒนาแอปจำนวนมากได้อ่านและตอบคำถามของคุณเท่านั้น แต่คำตอบสำหรับคำถามของคุณอาจช่วยเหลือผู้อื่นที่ตกอยู่ในสถานการณ์เดียวกันได้ในอนาคต