การทำงานกับ Service Worker

โค้ดแล็บนี้จะแสดงวิธีลงทะเบียน 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 คุณควรเห็นข้อมูลดังต่อไปนี้

แสดงรายละเอียด 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 2 เวอร์ชัน ณ จุดนี้ เวอร์ชันก่อนหน้าซึ่งเปิดใช้งานแล้วทํางานอยู่และควบคุมหน้าปัจจุบัน เวอร์ชันที่อัปเดตแล้วของ Service Worker จะแสดงอยู่ด้านล่าง อยู่ในสถานะwaiting และจะรอจนกว่าแท็บที่เปิดอยู่ทั้งหมดซึ่งควบคุมโดย Service Worker เก่าจะปิด

ลักษณะการทำงานเริ่มต้นนี้ช่วยให้มั่นใจได้ว่าหาก Service Worker ใหม่มีลักษณะการทำงานที่แตกต่างจาก Service Worker เดิมอย่างสิ้นเชิง เช่น ตัวแฮนเดิล fetch ที่ตอบสนองด้วยทรัพยากรที่เข้ากันไม่ได้กับเว็บแอปเวอร์ชันเก่า ตัวแฮนเดิลใหม่จะไม่ทำงานจนกว่าผู้ใช้จะปิดอินสแตนซ์ก่อนหน้าทั้งหมดของเว็บแอป

สรุป

ตอนนี้คุณควรเข้าใจขั้นตอนการลงทะเบียน Service Worker และสังเกตลักษณะการทํางานของ Service Worker โดยใช้เครื่องมือสําหรับนักพัฒนาเว็บของ Chrome แล้ว

ตอนนี้คุณพร้อมแล้วที่จะเริ่มใช้กลยุทธ์การแคชและเครื่องมือดีๆ ทั้งหมดที่จะช่วยให้เว็บแอปโหลดได้อย่างรวดเร็วและเชื่อถือได้