การแก้ปัญหาและการบันทึก

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

เครื่องมือแก้ปัญหาที่พร้อมใช้งาน

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

Chrome และ Edge

Chrome (และ EDGE เวอร์ชันล่าสุดจากเครื่องมือ Blink) มีชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีประสิทธิภาพ เครื่องมือบางส่วนโดยเฉพาะใน DevTools ของ Chrome ได้รับการกล่าวถึงในช่วงต้นของเอกสารนี้ แต่ก็ยังมีอะไรให้สำรวจอีกมากมายดังนี้

Firefox

ผู้ใช้ Firefox โปรดไปที่แหล่งข้อมูลต่อไปนี้

Safari

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

การบันทึกเวิร์กบ็อกซ์

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

ภาพหน้าจอของ Workbox ที่มีการบันทึกข้อความในคอนโซลของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ข้อความการบันทึกจะแตกต่างจากบันทึกของคอนโซลปกติที่มีป้าย 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 (หลังจากอ่านหลักเกณฑ์การมีส่วนร่วม) วิธีนี้ไม่เพียงเปิดโอกาสให้นักพัฒนาแอปจำนวนมากได้อ่านและตอบคำถามของคุณเท่านั้น แต่คำตอบสำหรับคำถามของคุณอาจช่วยเหลือผู้อื่นที่ตกอยู่ในสถานการณ์เดียวกันได้ในอนาคต