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