Codelab นี้จะแสดงวิธีลงทะเบียน Service Worker จากภายในเว็บแอปพลิเคชันของคุณ และใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อสังเกตการทำงานของโปรแกรม นอกจากนี้ยังพูดถึงเทคนิคการแก้ไขข้อบกพร่องบางส่วนที่อาจมีประโยชน์เมื่อติดต่อกับโปรแกรมทำงานของบริการ
ทำความคุ้นเคยกับโปรเจ็กต์ตัวอย่าง
ไฟล์ในโปรเจ็กต์ตัวอย่างที่เกี่ยวข้องกับ Codelab นี้มากที่สุดมีดังนี้
register-sw.jsเริ่มต้นจากค่าว่าง แต่จะมีโค้ดที่ใช้ในการลงทะเบียน Service Worker โหลดผ่านแท็ก<script>ภายในindex.htmlของโปรเจ็กต์แล้วservice-worker.jsว่างเปล่าในลักษณะเดียวกัน ซึ่งเป็นไฟล์ที่จะมี 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 คือจุดที่ตรรกะทั้งหมดสำหรับการติดตั้งใช้งานโปรแกรมทำงานของบริการจะเป็นไปอย่างต่อเนื่อง คุณควรใช้เหตุการณ์ตลอดอายุการใช้งาน, Cache Storage API และความรู้เกี่ยวกับการจราจรของข้อมูลเครือข่ายของเว็บแอปเพื่อสร้างโปรแกรมทำงานของบริการที่สร้างขึ้นอย่างสมบูรณ์แบบ ซึ่งพร้อมที่จะจัดการคำขอของเว็บแอปทั้งหมด
แต่... ทั้งหมดก็คือการเรียนรู้ในภายหลัง ในขั้นตอนนี้ มุ่งเน้นที่การสังเกตเหตุการณ์ต่างๆ ของ Service Worker และการทำความคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome เพื่อแก้ไขข้อบกพร่องสถานะของโปรแกรมทำงานของบริการ
หากต้องการดำเนินการดังกล่าว ให้เพิ่มโค้ดต่อไปนี้ลงใน 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 แล้ว ก็ถึงเวลาไปที่โปรเจ็กต์ตัวอย่างเวอร์ชันที่ใช้งานจริงและสังเกตการทำงานของโปรแกรมทำงานของบริการ
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด
เต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บคอนโซล
คุณควรเห็นข้อความบันทึกต่อไปนี้ ซึ่งแสดงว่าได้ติดตั้งและเปิดใช้งานโปรแกรมทำงานของบริการแล้ว
จากนั้นไปที่แท็บ Applications แล้วเลือกแผง 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 ล่าสุดโดยอัตโนมัติและตรวจหาการเปลี่ยนแปลง หากมีอะไรในสคริปต์โปรแกรมทำงานของบริการแตกต่างกัน โปรแกรมทำงานของบริการใหม่จะมีโอกาสติดตั้ง เปิดใช้งาน และเข้าควบคุมได้ในที่สุด
คุณจำลองขั้นตอนการอัปเดตนี้ได้โดยกลับไปที่ตัวแก้ไขโค้ดของโปรเจ็กต์แล้วทำการเปลี่ยนแปลงโค้ดใดๆ ก็ได้ การเปลี่ยนแปลงอย่างรวดเร็วอย่างหนึ่ง คือการแทนที่
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 ใหม่มีลักษณะการทำงานที่แตกต่างโดยพื้นฐานจากเวอร์ชันเก่า เช่น ตัวแฮนเดิล fetch ซึ่งตอบสนองด้วยทรัพยากรที่เข้ากันไม่ได้กับเว็บแอปเวอร์ชันเก่า ลักษณะการทำงานนี้จะไม่มีผลจนกว่าผู้ใช้จะปิดอินสแตนซ์ก่อนหน้าทั้งหมดของเว็บแอป
สรุปข้อมูล
ตอนนี้คุณน่าจะคุ้นเคยกับขั้นตอนการลงทะเบียนโปรแกรมทำงานของบริการและสังเกตพฤติกรรมของโปรแกรมทำงานของบริการโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้ว
ตอนนี้คุณอยู่ในจุดที่ดีในการเริ่มใช้กลยุทธ์การแคชแล้ว และสิ่งดีๆ ทั้งหมดที่จะช่วยให้เว็บแอปโหลดได้อย่างรวดเร็วและเชื่อถือได้