Codelab นี้จะแสดงวิธีลงทะเบียน Service Worker จากภายในเว็บแอปพลิเคชัน และใช้ Chrome DevTools เพื่อสังเกตพฤติกรรมของโปรแกรม นอกจากนี้ยังครอบคลุมถึงเทคนิคการแก้ไขข้อบกพร่องบางส่วนที่อาจเป็นประโยชน์เมื่อทำงานกับโปรแกรมทำงานของบริการ
ทำความคุ้นเคยกับโปรเจ็กต์ตัวอย่าง
ไฟล์ในโปรเจ็กต์ตัวอย่างที่เกี่ยวข้องกับ 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-3 ประเด็นที่ควรคำนึงถึง
ข้อแรก เบราว์เซอร์บางตัว
ไม่ได้รองรับโปรแกรมทำงาน โดยเฉพาะอย่างยิ่งสำหรับเบราว์เซอร์เวอร์ชันเก่าๆ ที่ไม่ได้อัปเดตโดยอัตโนมัติ ดังนั้นจึงเป็นแนวทางปฏิบัติแนะนำในการเรียกใช้ navigator.serviceWorker.register() อย่างมีเงื่อนไข หลังจากที่ตรวจสอบแล้วว่ารองรับ navigator.serviceWorker หรือไม่
ประการที่ 2 เมื่อคุณลงทะเบียน Service Worker เบราว์เซอร์จะเรียกใช้โค้ดในไฟล์ service-worker.js และอาจเริ่มดาวน์โหลด URL เพื่อเติมข้อมูลแคช ทั้งนี้ขึ้นอยู่กับโค้ดในตัวแฮนเดิลเหตุการณ์ install และ activate ของโปรแกรมทำงานของบริการ
การเรียกใช้โค้ดเพิ่มเติมและการดาวน์โหลดเนื้อหาสามารถใช้ทรัพยากรที่มีค่าซึ่งเบราว์เซอร์ของคุณสามารถใช้เพื่อแสดงหน้าเว็บปัจจุบัน เพื่อหลีกเลี่ยงการรบกวนนี้ คุณควรเลื่อนการลงทะเบียน 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 ทำงานตามปกติ คุณควรใช้เหตุการณ์ในวงจร, 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 แล้ว ก็ถึงเวลาไปที่เวอร์ชัน Live ของโปรเจ็กต์ตัวอย่างและสังเกตการทำงานของ Service Worker
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บคอนโซล
คุณควรเห็นข้อความในบันทึกต่อไปนี้ ซึ่งแสดงว่ามีการติดตั้งและเปิดใช้งาน Service Worker แล้ว
จากนั้นไปที่แท็บแอปพลิเคชัน และเลือกแผง Service Workers คุณควรจะเห็นข้อความดังนี้
การดำเนินการนี้ช่วยให้คุณทราบว่ามี Service Worker ที่มี URL แหล่งที่มาเป็น service-worker.js สำหรับเว็บแอป solar-donkey.glitch.me ซึ่งเปิดใช้งานและทำงานอยู่ และยังบอกให้ทราบว่าปัจจุบันมีไคลเอ็นต์ 1 รายการ (แท็บเปิด) ที่โปรแกรมทำงานของบริการควบคุมอยู่
คุณสามารถใช้ลิงก์ในแผงนี้ เช่น Unregister หรือ stop เพื่อเปลี่ยนแปลง Service Worker ที่ลงทะเบียนไว้ในปัจจุบันเพื่อวัตถุประสงค์ในการแก้ไขข้อบกพร่อง
ทริกเกอร์ขั้นตอนการอัปเดต Service Worker
แนวคิดหลักอย่างหนึ่งที่ควรทำความเข้าใจเมื่อพัฒนาด้วยโปรแกรมทำงานของบริการคือขั้นตอนการอัปเดต
หลังจากที่ผู้ใช้ไปที่เว็บแอปซึ่งลงทะเบียน Service Worker แล้ว ผู้ใช้จะพบโค้ดสำหรับสำเนาปัจจุบันของ service-worker.js ที่ติดตั้งในเบราว์เซอร์ในเครื่อง แต่จะเกิดอะไรขึ้นเมื่อคุณอัปเดต
service-worker.js เวอร์ชันที่เก็บไว้ในเว็บเซิร์ฟเวอร์ของคุณ
เมื่อผู้เข้าชมซ้ำกลับมายัง URL ที่อยู่ในขอบเขตของ Service Worker เบราว์เซอร์จะขอ service-worker.js ล่าสุดโดยอัตโนมัติและตรวจหาการเปลี่ยนแปลง หากสคริปต์ของ 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 เดิมจะปิดลง
ลักษณะการทำงานเริ่มต้นนี้จะช่วยให้มั่นใจว่าหากโปรแกรมทำงานของบริการใหม่มีลักษณะการทำงานที่แตกต่างจากตัวเก่าอย่างพื้นฐาน เช่น ตัวแฮนเดิล fetch ที่ตอบสนองด้วยทรัพยากรที่เข้ากันไม่ได้กับเว็บแอปเวอร์ชันเก่า ฟีเจอร์ดังกล่าวจะไม่มีผลจนกว่าผู้ใช้จะปิดเว็บแอปทั้งหมดก่อนหน้านี้
สรุปสิ่งต่างๆ
ตอนนี้คุณคงคุ้นเคยกับขั้นตอนการลงทะเบียน Service Worker และสังเกตพฤติกรรมของ Service Worker โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว
ตอนนี้คุณพร้อมแล้วที่จะเริ่มใช้กลยุทธ์การแคช และข้อมูลดีๆ ทั้งหมดที่จะช่วยให้เว็บแอปโหลดได้อย่างรวดเร็วและเสถียร