ปรับปรุงประสบการณ์การพัฒนาโปรแกรมทำงาน

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

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

ข้อยกเว้นสำหรับการพัฒนาในท้องถิ่น

โดยทั่วไปแล้ว API ของ Service Worker จะใช้ได้เฉพาะในหน้าเว็บที่แสดงผ่าน HTTPS แต่มีข้อยกเว้นสำหรับกฎนี้ที่อาจใช้งานได้ผ่าน HTTP ข้อยกเว้นหนึ่งประการคือหน้าที่แสดงผลเกิน localhost ซึ่งทำงานได้ดีสำหรับการพัฒนาในพื้นที่

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

วิธีแก้ปัญหาชั่วคราวที่สะดวกยิ่งขึ้นคือการสั่งให้เบราว์เซอร์สร้างข้อยกเว้นสำหรับการทดสอบโปรแกรมทำงานของบริการ สำหรับ Chrome ให้ไปที่ chrome://flags/#unsafely-treat-insecure-origin-as-secure และระบุต้นทางที่ไม่ปลอดภัยเพื่อให้ถือเป็นต้นทางที่ปลอดภัย Firefox มีวิธีทดสอบ Service Worker ในต้นทางที่ไม่ปลอดภัยผ่านการตั้งค่า devtools.serviceWorkers.testing.enabled ใน about:config

ความช่วยเหลือในการพัฒนาโปรแกรมทำงานของบริการ

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

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

  1. เปิดหน้าต่างการเรียกดูแบบส่วนตัว
  2. ไปยังหน้าที่ลงทะเบียน Service Worker
  3. ตรวจสอบว่าโปรแกรมทำงานของบริการทำงานตามที่คุณคาดไว้หรือไม่
  4. ปิดหน้าต่างที่ไม่ระบุตัวตน
  5. ทำซ้ำ

ในขั้นตอนนี้ ถือว่าคุณเลียนแบบวงจรการทำงานของโปรแกรมทำงานของบริการอย่างจริงใจ

เครื่องมือทดสอบอื่นๆ ที่มีอยู่ในแผงแอปพลิเคชัน Chrome DevTools อาจช่วยได้ แต่สามารถแก้ไขวงจรการทำงานของโปรแกรมทำงานในบางลักษณะได้

แผงแอปพลิเคชันเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

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

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

Shift และโหลดซ้ำ

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

การดำเนินการนี้เรียกว่าการบังคับรีเฟรช ซึ่งจะข้ามแคช HTTP สำหรับเครือข่าย เมื่อ Service Worker ทำงานอยู่ การบังคับรีเฟรชจะข้าม Service Worker ทั้งหมดด้วย

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

การตรวจสอบเนื้อหาของแคช

เป็นเรื่องยากที่จะบอกว่ากลยุทธ์การแคชทำงานตามที่ต้องการหรือไม่หากตรวจสอบแคชไม่ได้ ได้เลย สามารถตรวจสอบแคชเป็นโค้ดได้ แต่นั่นเป็นกระบวนการที่เกี่ยวข้องกับโปรแกรมแก้ไขข้อบกพร่องและ/หรือคำสั่ง console เมื่อเครื่องมือแบบภาพเหมาะกับงานมากกว่า แผงแอปพลิเคชันในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีแผงย่อยสำหรับตรวจสอบเนื้อหาของอินสแตนซ์ Cache

การตรวจสอบแคชในเครื่องมือสำหรับนักพัฒนาเว็บ

แผงย่อยนี้ช่วยให้การพัฒนาโปรแกรมทำงานของบริการง่ายขึ้นโดยมอบฟังก์ชันการทำงานต่างๆ เช่น

  • ดูชื่อของอินสแตนซ์ Cache รายการ
  • ความสามารถในการตรวจสอบเนื้อหาการตอบกลับของเนื้อหาที่แคชไว้ และส่วนหัวการตอบกลับที่เกี่ยวข้อง
  • นำรายการอย่างน้อย 1 รายการออกจากแคช หรือจะลบอินสแตนซ์ Cache ทั้งหมดเลยก็ได้

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

การจำลองโควต้าพื้นที่เก็บข้อมูล

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

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

เครื่องมือดูการใช้พื้นที่เก็บข้อมูล
เครื่องมือดูการใช้พื้นที่เก็บข้อมูลในแผงแอปพลิเคชันของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ในตอนนี้ระบบกำลังตั้งโควต้าพื้นที่เก็บข้อมูลที่กำหนดเอง

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

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

พัฒนาได้ง่ายขึ้น ประสิทธิภาพการทำงานดีขึ้น

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