โค้ดแล็บนี้จะแสดงวิธีลงทะเบียน 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 ที่ว่างเปล่า เช่น ไฟล์ service-worker.js ปัจจุบัน) เว้นแต่จะมีการลงทะเบียนก่อน ซึ่งทำได้ด้วยการโทรไปที่หมายเลขต่อไปนี้
navigator.serviceWorker.register(
'/service-worker.js'
)
ในไฟล์ register-sw.js
แต่ก่อนเพิ่มรหัสดังกล่าว โปรดคำนึงถึงสิ่งต่อไปนี้
ประการแรก เบราว์เซอร์บางรุ่นไม่รองรับ 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 คือที่ที่เก็บตรรกะทั้งหมดสําหรับการใช้งาน Service Worker ตามปกติ คุณจะใช้ เหตุการณ์วงจรของ Service Worker, Cache Storage API และความรู้เกี่ยวกับการเข้าชมเครือข่ายของเว็บแอปร่วมกันเพื่อสร้าง Service Worker ที่ออกแบบมาอย่างสมบูรณ์แบบ พร้อมที่จะจัดการคําขอทั้งหมดของเว็บแอป
แต่… ไว้เรียนรู้กันทีหลัง ในระยะนี้ ประเด็นสำคัญคือการสังเกตเหตุการณ์ต่างๆ ของ 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 แล้ว ผู้ใช้จะเห็นรหัสของสำเนาปัจจุบันของ 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 ที่ตอบสนองด้วยทรัพยากรที่เข้ากันไม่ได้กับเว็บแอปเวอร์ชันเก่า ตัวแฮนเดิลใหม่จะไม่ทำงานจนกว่าผู้ใช้จะปิดอินสแตนซ์ก่อนหน้าทั้งหมดของเว็บแอป
สรุป
ตอนนี้คุณควรเข้าใจขั้นตอนการลงทะเบียน Service Worker และสังเกตลักษณะการทํางานของ Service Worker โดยใช้เครื่องมือสําหรับนักพัฒนาเว็บของ Chrome แล้ว
ตอนนี้คุณพร้อมแล้วที่จะเริ่มใช้กลยุทธ์การแคชและเครื่องมือดีๆ ทั้งหมดที่จะช่วยให้เว็บแอปโหลดได้อย่างรวดเร็วและเชื่อถือได้