นักพัฒนาซอฟต์แวร์ที่ใช้โปรแกรมทำงานของบริการและ 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](https://developer.chrome.com/static/blog/tweeks-to-addAll-importScripts/image/a-screenshot-the-warning-46bead1fd2604.png?authuser=0&hl=th)
การบันทึกนี้เป็นการเกริ่นนำสำหรับ 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