นักพัฒนาซอฟต์แวร์ที่ใช้ Service Worker และ Cache Storage API ควรเตรียมพร้อมรับการเปลี่ยนแปลงเล็กๆ 2 รายการที่จะเปิดตัวใน Chrome 71 การเปลี่ยนแปลงทั้ง 2 รายการนี้จะช่วยให้การใช้งาน Chrome สอดคล้องกับข้อกำหนดและเบราว์เซอร์อื่นๆ มากขึ้น
การไม่อนุญาต importScripts() แบบอะซิงโครนัส
importScripts()
บอกสคริปต์ Service Worker หลักให้หยุดการดําเนินการปัจจุบันชั่วคราว ดาวน์โหลดโค้ดเพิ่มเติมจาก URL ที่ระบุ และเรียกใช้จนเสร็จสมบูรณ์ในขอบเขตส่วนกลางปัจจุบัน เมื่อดำเนินการเสร็จแล้ว สคริปต์ Service Worker หลักจะกลับมาทำงานต่อ importScripts() มีประโยชน์เมื่อคุณต้องการแบ่งสคริปต์ Service Worker หลักออกเป็นชิ้นเล็กๆ เพื่อเหตุผลด้านการจัดระเบียบ หรือดึงโค้ดของบุคคลที่สามมาเพิ่มฟังก์ชันการทำงานให้กับ Service Worker
เบราว์เซอร์พยายามลดปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้นจาก "การดาวน์โหลดและเรียกใช้โค้ดแบบซิงค์" โดยแคชข้อมูลทั้งหมดที่ดึงผ่าน importScripts() โดยอัตโนมัติ ซึ่งหมายความว่าหลังจากการดาวน์โหลดครั้งแรก จะมีการเรียกใช้โค้ดที่นําเข้าเพียงเล็กน้อย
แต่เบราว์เซอร์จะต้องทราบว่าจะไม่มีโค้ด "เซอร์ไพรส์" ที่นําเข้ามาใน Service Worker หลังจากการติดตั้งครั้งแรกเพื่อให้การทํางานดังกล่าวได้ผล
ตามข้อกำหนดเฉพาะของ Service Worker การเรียก importScripts() ควรทำงานเฉพาะระหว่างการดำเนินการแบบซิงค์ของสคริปต์ Service Worker ระดับบนสุด หรือแบบไม่ซิงค์ภายในตัวแฮนเดิล install หากจำเป็น
ก่อน Chrome 71 การเรียก importScripts() แบบไม่พร้อมกันนอกตัวแฮนเดิล install จะทํางานได้ ตั้งแต่ Chrome 71 เป็นต้นไป การเรียกเหล่านั้นจะแสดงข้อยกเว้นรันไทม์ (เว้นแต่จะมีการนําเข้า URL เดียวกันในตัวแฮนเดิล install ก่อนหน้านี้) ซึ่งตรงกับลักษณะการทํางานในเบราว์เซอร์อื่นๆ
แทนที่จะใช้โค้ดเช่นนี้
// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
importScripts('my-fetch-logic.js');
event.respondWith(self.customFetchLogic(event));
});
โค้ด Service Worker ควรมีลักษณะดังนี้
// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
event.respondWith(self.customFetchLogic(event));
});
การเลิกใช้งาน URL ซ้ำที่ส่งไปยัง cache.addAll()
หากคุณใช้ Cache Storage API ร่วมกับ Service Worker จะมีการเปลี่ยนแปลงเล็กๆ อีกอย่างหนึ่งใน Chrome 71 เพื่อให้สอดคล้องกับข้อกำหนดที่เกี่ยวข้อง เมื่อมีการส่ง URL เดียวกันหลายครั้งไปยังการเรียกใช้ cache.addAll() ครั้งเดียว ข้อกําหนดระบุว่า Promise ที่การเรียกใช้แสดงผลควรปฏิเสธ
ก่อนหน้านี้ Chrome 71 ไม่ได้ตรวจพบ URL ซ้ำ และระบบจะไม่สนใจ URL ซ้ำ
การบันทึกนี้เป็นช่วงเริ่มต้นของ Chrome 72 ซึ่ง URL ซ้ำจะทําให้cache.addAll()ปฏิเสธแทนที่จะเป็นเพียงคําเตือนที่บันทึกไว้ หากคุณเรียกใช้ cache.addAll() เป็นส่วนหนึ่งของเชนสัญญาที่ส่งผ่านไปยัง InstallEvent.waitUntil() ตามแนวทางปฏิบัติทั่วไป การปฏิเสธดังกล่าวอาจทำให้ Service Worker ติดตั้งไม่สำเร็จ
ปัญหาที่อาจเกิดขึ้นมีดังนี้
const urlsToCache = [
'/index.html',
'/main.css',
'/app.js',
'/index.html', // Oops! This is listed twice and should be removed.
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
);
});
ข้อจํากัดนี้มีผลกับ URL จริงที่ส่งไปยัง cache.addAll() เท่านั้น และการแคชสิ่งที่กลายเป็นการตอบกลับที่เทียบเท่ากัน 2 รายการซึ่งมี URL ต่างกัน เช่น '/' และ '/index.html' จะไม่ทริกเกอร์การปฏิเสธ
ทดสอบการใช้งาน Service Worker อย่างกว้างขวาง
ขณะนี้ Service Worker มีการใช้งานอย่างแพร่หลายในเบราว์เซอร์"เวอร์ชันปัจจุบันเสมอ" หลักๆ ทั้งหมด หากคุณทดสอบ Progressive Web App กับเบราว์เซอร์หลายรายการเป็นประจำ หรือหากคุณมีผู้ใช้จำนวนมากที่ไม่ได้ใช้ Chrome ก็มีโอกาสที่คุณจะตรวจพบความไม่สอดคล้องและอัปเดตโค้ดแล้ว แต่ในกรณีที่คุณอาจไม่สังเกตเห็นลักษณะการทำงานนี้ในเบราว์เซอร์อื่นๆ เราจึงอยากแจ้งให้ทราบถึงการเปลี่ยนแปลงนี้ก่อนที่จะเปลี่ยนลักษณะการทำงานของ Chrome