โค้ดแล็บนี้แสดงวิธีลงทะเบียน Service Worker จากภายในเว็บแอปพลิเคชัน และใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อสังเกตลักษณะการทํางาน นอกจากนี้ ยังครอบคลุมเทคนิคการแก้ไขข้อบกพร่องบางอย่างที่คุณอาจพบว่ามีประโยชน์เมื่อจัดการกับ Service Worker
ทำความคุ้นเคยกับโปรเจ็กต์ตัวอย่าง
ไฟล์ในโปรเจ็กต์ตัวอย่างที่เกี่ยวข้องกับ Codelab นี้มากที่สุดมีดังนี้
register-sw.jsจะเริ่มต้นโดยไม่มีข้อมูล แต่จะมีโค้ดที่ใช้ลงทะเบียน Service Worker ระบบกำลังโหลดผ่านแท็ก<script>ภายในindex.htmlของโปรเจ็กต์อยู่แล้วservice-worker.jsว่างเปล่าเช่นเดียวกัน ซึ่งเป็นไฟล์ที่มี Service Worker สําหรับโปรเจ็กต์นี้
เพิ่มโค้ดการลงทะเบียน Service Worker
ระบบจะไม่ใช้ Service Worker (รวมถึงโปรแกรมทำงานเปล่า เช่น ไฟล์ service-worker.js ปัจจุบัน) เว้นแต่จะลงทะเบียนก่อน ซึ่งทำได้ทางโทรศัพท์เพื่อ
navigator.serviceWorker.register(
'/service-worker.js'
)
ภายในไฟล์ register-sw.js
อย่างไรก็ตาม มีข้อควรพิจารณาอยู่ 2 ข้อที่ควรพิจารณาก่อนเพิ่มโค้ดดังกล่าว
ประการแรก เบราว์เซอร์บางรุ่นไม่รองรับบริการของ Service Worker โดยเฉพาะอย่างยิ่งสำหรับเบราว์เซอร์เวอร์ชันเก่าที่ไม่อัปเดตโดยอัตโนมัติ ดังนั้นแนวทางปฏิบัติแนะนำคือการเรียกใช้ navigator.serviceWorker.register() แบบมีเงื่อนไขหลังจากตรวจสอบว่าระบบรองรับ navigator.serviceWorker หรือไม่
ประการที่ 2 เมื่อคุณลงทะเบียน Service Worker เบราว์เซอร์จะเรียกใช้โค้ดในไฟล์ service-worker.js และอาจเริ่มดาวน์โหลด URL เพื่อป้อนข้อมูลแคช ทั้งนี้ขึ้นอยู่กับโค้ดใน install และ activate ของ Service Worker รวมถึงตัวแฮนเดิลเหตุการณ์
การเรียกใช้โค้ดเพิ่มเติมและการดาวน์โหลดเนื้อหาอาจใช้ทรัพยากรที่มีค่าซึ่งเบราว์เซอร์ของคุณใช้เพื่อแสดงหน้าเว็บปัจจุบันได้ วิธีที่ดีในการหลีกเลี่ยงการแทรกแซงนี้คือ การเลื่อนการลงทะเบียน Service Worker จนกว่าเบราว์เซอร์จะแสดงผลหน้าปัจจุบันเสร็จ วิธีประมาณค่าที่สะดวกคือรอจนกว่าเหตุการณ์ window.load จะเริ่มต้น
เมื่อนำ 2 ข้อมูลข้างต้นมารวมกัน ให้เพิ่มโค้ดการลงทะเบียน Service Worker อเนกประสงค์นี้ลงในไฟล์ register-sw.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
เพิ่มโค้ดการบันทึกของ Service Worker
ไฟล์ service-worker.js คือจุดที่ตรรกะทั้งหมดสำหรับการติดตั้งใช้งานโปรแกรมทำงานของบริการจะเป็นไปอย่างต่อเนื่อง คุณควรใช้เหตุการณ์ตลอดอายุการใช้งาน, Cache Storage API และความรู้เกี่ยวกับการจราจรของข้อมูลเครือข่ายของเว็บแอปเพื่อสร้างโปรแกรมทำงานของบริการที่สร้างขึ้นอย่างสมบูรณ์แบบ ซึ่งพร้อมที่จะจัดการคำขอของเว็บแอปทั้งหมด
แต่… ไว้เรียนรู้กันทีหลัง ในระยะนี้ สิ่งสำคัญคือการสังเกตเหตุการณ์ต่างๆ ของ Service Worker และทำความคุ้นเคยกับการใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome เพื่อแก้ไขข้อบกพร่องสถานะของ Service Worker
ด้วยเหตุนี้ ให้เพิ่มโค้ดต่อไปนี้ลงใน service-worker.js ซึ่งจะบันทึกข้อความไปยังคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บเพื่อตอบสนองต่อเหตุการณ์ต่างๆ (แต่จะไม่ทําอย่างอื่นมากนัก)
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
ทำความคุ้นเคยกับแผง Service Worker ในเครื่องมือสำหรับนักพัฒนาเว็บ
เมื่อเพิ่มโค้ดลงในไฟล์ register-sw.js และ service-worker.js แล้ว ก็ถึงเวลาไปที่โปรเจ็กต์ตัวอย่างเวอร์ชันที่ใช้งานจริง และดูการทำงานของ Service Worker
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บคอนโซล
คุณควรเห็นข้อความบันทึกประมาณนี้ ซึ่งแสดงว่าติดตั้งและเปิดใช้งาน Service Worker แล้ว
จากนั้นไปที่แท็บแอปพลิเคชัน แล้วเลือกแผงService Worker คุณควรจะเห็นข้อมูลต่อไปนี้
ข้อความนี้ช่วยให้ทราบว่ามี Service Worker ที่มี URL แหล่งที่มาของ service-worker.js สำหรับเว็บแอป solar-donkey.glitch.me ที่เปิดใช้งานและทํางานอยู่ และยังบอกด้วยว่าขณะนี้มีไคลเอ็นต์ (แท็บที่เปิดอยู่) 1 รายการที่ Service Worker ควบคุมอยู่
คุณสามารถใช้ลิงก์ในแผงนี้ เช่น Unregister หรือ stop เพื่อทําการเปลี่ยนแปลงใน Service Worker ที่ลงทะเบียนไว้ในปัจจุบันเพื่อวัตถุประสงค์ในการแก้ไขข้อบกพร่อง
ทริกเกอร์ขั้นตอนการอัปเดต Service Worker
แนวคิดหลักอย่างหนึ่งที่ต้องทำความเข้าใจเมื่อพัฒนาด้วยโปรแกรมทำงานของบริการคือแนวคิดเกี่ยวกับขั้นตอนการอัปเดต
หลังจากผู้ใช้เข้าชมเว็บแอปที่ลงทะเบียน Service Worker แล้ว ผู้ใช้จะเห็นรหัสของสำเนาปัจจุบันของ service-worker.js ที่ติดตั้งในเบราว์เซอร์ในเครื่อง แต่จะเกิดอะไรขึ้นเมื่อคุณอัปเดตเวอร์ชันของ service-worker.js ที่เก็บไว้ในเว็บเซิร์ฟเวอร์
เมื่อผู้เข้าชมที่กลับมาเข้าชม URL ที่อยู่ภายในขอบเขตของ Service Worker อีกครั้ง เบราว์เซอร์จะขอ service-worker.js ล่าสุดโดยอัตโนมัติและตรวจสอบการเปลี่ยนแปลง หากมีสิ่งใดในสคริปต์ Service Worker แตกต่างออกไป Service Worker ใหม่ก็มีโอกาสที่จะติดตั้ง เปิดใช้งาน และควบคุมในที่สุด
คุณสามารถจําลองขั้นตอนการอัปเดตนี้ได้โดยกลับไปที่เครื่องมือแก้ไขโค้ดของโปรเจ็กต์ แล้วทําการเปลี่ยนแปลงใดๆ กับโค้ด การเปลี่ยนแปลงง่ายๆ อย่างหนึ่งคือการแทนที่
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
กับ
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
หลังจากทําการเปลี่ยนแปลงดังกล่าวแล้ว ให้กลับไปที่แอปตัวอย่างเวอร์ชันที่ใช้จริง และโหลดหน้าเว็บซ้ำโดยที่แท็บแอปพลิเคชันของเครื่องมือสําหรับนักพัฒนาเว็บยังเปิดอยู่ คุณควรเห็นข้อมูลต่อไปนี้
ข้อมูลนี้แสดงให้เห็นว่ามีการติดตั้ง Service Worker 2 เวอร์ชัน ณ จุดนี้ เวอร์ชันก่อนหน้าซึ่งเปิดใช้งานแล้วทํางานอยู่และควบคุมหน้าปัจจุบัน โปรดดูรายการ Service Worker เวอร์ชันอัปเดตด้านล่าง ซึ่งอยู่ในสถานะ waiting และจะยังคงรอจนกว่าแท็บที่เปิดอยู่ทั้งหมดที่ควบคุมโดย Service Worker เดิมจะปิดลง
ลักษณะการทำงานเริ่มต้นนี้ช่วยให้มั่นใจได้ว่าหาก Service Worker ใหม่มีลักษณะการทำงานที่แตกต่างจาก Service Worker เดิมอย่างสิ้นเชิง เช่น ตัวแฮนเดิล fetch ที่ตอบสนองด้วยทรัพยากรที่เข้ากันไม่ได้กับเว็บแอปเวอร์ชันเก่า ตัวแฮนเดิลใหม่จะไม่ทำงานจนกว่าผู้ใช้จะปิดอินสแตนซ์ก่อนหน้าทั้งหมดของเว็บแอป
สรุป
ตอนนี้คุณน่าจะคุ้นเคยกับขั้นตอนการลงทะเบียนโปรแกรมทำงานของบริการและสังเกตพฤติกรรมของโปรแกรมทำงานของบริการโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว
ตอนนี้คุณพร้อมแล้วที่จะเริ่มใช้กลยุทธ์การแคชและเครื่องมือดีๆ ทั้งหมดที่จะช่วยให้เว็บแอปโหลดได้อย่างรวดเร็วและเชื่อถือได้