นักพัฒนาซอฟต์แวร์ที่ใช้โปรแกรมทำงานของบริการและ Cache Storage API ควรเฝ้าติดตาม การเปลี่ยนแปลงเล็กๆ น้อยๆ ที่เริ่มเปิดตัวใน Chrome 71 การเปลี่ยนแปลงทั้งสองนี้ทำให้การใช้งาน Chrome สอดคล้องกับ ข้อกำหนดและเบราว์เซอร์อื่นๆ
การไม่อนุญาต ImportScripts() แบบไม่พร้อมกัน
importScripts()
บอกสคริปต์โปรแกรมทำงานของบริการหลักของคุณให้หยุดการดำเนินการปัจจุบันชั่วคราว ให้ดาวน์โหลดโค้ดเพิ่มเติมจาก
URL หนึ่งๆ แล้วเรียกใช้ให้เสร็จสมบูรณ์ในขอบเขตส่วนกลางปัจจุบัน เมื่อดำเนินการเสร็จแล้ว
สคริปต์ของ Service Worker หลักจะกลับมาทำงานอีกครั้ง importScripts()
มีประโยชน์เมื่อ
คุณต้องการแบ่งสคริปต์ผู้ปฏิบัติงานของบริการหลักออกเป็นส่วนย่อยๆ เพื่อเหตุผลด้านองค์กร หรือ
ดึงโค้ดของบุคคลที่สามเข้ามาเพื่อเพิ่มฟังก์ชันการทำงานให้กับ Service Worker
เบราว์เซอร์จะพยายามลดปัญหาประสิทธิภาพที่เป็นไปได้ของ "ดาวน์โหลดและเรียกใช้แบบซิงโครนัส"
รหัส" โดยการแคชทุกสิ่งที่ดึงผ่าน 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));
});
รหัสโปรแกรมทำงานของบริการควรมีลักษณะดังนี้
// 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 ร่วมกับโปรแกรมทำงานของบริการ จะเกิดการเปลี่ยนแปลงเล็กน้อยอีกแ
Chrome 71 เพื่อให้สอดคล้องกับข้อกำหนดที่เกี่ยวข้อง เมื่อ URL เดียวกันคือ
หลายครั้งเป็นการโทรครั้งเดียวเพื่อ
cache.addAll()
บอกว่าคำมั่นสัญญาที่การเรียกแสดงผลควรจะปฏิเสธ
เวอร์ชันก่อนหน้า Chrome 71 เป็น Chrome 71 ไม่พบ และระบบจะไม่สนใจ URL ซ้ำ
![ภาพหน้าจอของข้อความเตือนในคอนโซลของ Chrome](https://developer.chrome.google.cn/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()
,
ตามแนวทางปฏิบัติทั่วไป การปฏิเสธนั้นอาจทำให้โปรแกรมทำงานของบริการไม่สามารถติดตั้งได้
ปัญหาที่พบอาจมีลักษณะดังนี้
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 ในวงกว้าง
โปรแกรมทำงานของบริการมีการใช้งานอย่างแพร่หลาย ใน "evergreen" ทั้งหมด เบราว์เซอร์ที่ ถึงจุดนี้ หากคุณทดสอบ Progressive Web App กับเบราว์เซอร์จำนวนมากเป็นประจำ หรือหากคุณ มีผู้ใช้จำนวนมากที่ไม่ได้ใช้ Chrome นั่นหมายความว่าคุณมีโอกาสตรวจพบอยู่แล้ว ความไม่สอดคล้อง และอัปเดตโค้ดของคุณแล้ว แต่คุณไม่ได้สังเกตเห็นสิ่งนี้ ในเบราว์เซอร์อื่นๆ เราต้องการแจ้งให้ทราบถึงการเปลี่ยนแปลงนี้ก่อนที่จะเปลี่ยนลักษณะการทำงานของ Chrome