ปรับแต่ง cache.addAll() และ ImportScripts() ที่จะมีใน Chrome 71

Jeff Posnick

นักพัฒนาซอฟต์แวร์ที่ใช้โปรแกรมทำงานของบริการและ 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
ตั้งแต่ Chrome 71 เป็นต้นไป คุณจะเห็นข้อความเตือนบันทึกไปยังคอนโซล

การบันทึกนี้เป็นการกระทำเบื้องต้นสำหรับ 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