นักพัฒนาซอฟต์แวร์ที่ใช้โปรแกรมทำงานของบริการและ Cache Storage API ควรมองหาการเปลี่ยนแปลงเล็กๆ น้อยๆ 2 ประการที่จะเปิดตัวใน Chrome 71 ก่อน การเปลี่ยนแปลงทั้ง 2 อย่างนี้ทำให้การใช้งาน Chrome สอดคล้องกับข้อกำหนดและเบราว์เซอร์อื่นๆ มากขึ้น
การไม่อนุญาต importScripts() แบบอะซิงโครนัส
importScripts()
จะแจ้งให้สคริปต์ของผู้ปฏิบัติงานบริการหลักหยุดการดำเนินการปัจจุบันชั่วคราว ดาวน์โหลดโค้ดเพิ่มเติมจาก URL ที่ระบุ และเรียกใช้สคริปต์นั้นให้เสร็จสมบูรณ์ในขอบเขตส่วนกลางปัจจุบัน เมื่อดำเนินการเสร็จแล้ว สคริปต์ Service Worker หลักจะกลับมาทำงานต่อ importScripts() มีประโยชน์เมื่อคุณต้องการแบ่งสคริปต์ Service Worker หลักออกเป็นชิ้นเล็กๆ เพื่อเหตุผลด้านการจัดระเบียบ หรือดึงโค้ดของบุคคลที่สามมาเพิ่มฟังก์ชันการทำงานให้กับ Service Worker
เบราว์เซอร์จะพยายามลดปัญหาประสิทธิภาพที่เป็นไปได้ของ "ดาวน์โหลดและเรียกใช้โค้ดแบบซิงโครนัส" ด้วยการแคชสิ่งที่ดึงผ่าน importScripts() โดยอัตโนมัติ ซึ่งหมายความว่าหลังจากการดาวน์โหลดครั้งแรก จะมีค่าใช้จ่ายในการดำเนินการกับโค้ดที่นำเข้าน้อยมาก
แต่เบราว์เซอร์จะต้องทราบว่าจะไม่มีโค้ด "เซอร์ไพรส์" ที่นําเข้ามาใน Service Worker หลังจากการติดตั้งครั้งแรกเพื่อให้การทํางานดังกล่าวได้ผล
ตามข้อกำหนดของโปรแกรมทำงานของบริการ การเรียกใช้ importScripts() ควรที่จะทำงานพร้อมกันของสคริปต์โปรแกรมทำงานของบริการระดับบนสุดได้พร้อมกัน หรือไม่พร้อมกันภายในเครื่องจัดการ 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