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