Nhà phát triển sử dụng trình chạy dịch vụ và API bộ nhớ đệm cần chú ý đến hai thay đổi nhỏ sẽ ra mắt trong Chrome 71. Cả hai thay đổi này đều giúp việc triển khai Chrome phù hợp hơn với quy cách và các trình duyệt khác.
Không cho phép importScripts() không đồng bộ
importScripts()
yêu cầu tập lệnh worker dịch vụ chính tạm dừng quá trình thực thi hiện tại, tải mã bổ sung xuống từ
một URL nhất định và chạy mã đó cho đến khi hoàn tất trong phạm vi toàn cục hiện tại. Sau khi hoàn tất, tập lệnh worker dịch vụ chính sẽ tiếp tục thực thi. importScripts() rất hữu ích khi bạn muốn chia tập lệnh worker dịch vụ chính thành các phần nhỏ hơn vì lý do tổ chức hoặc để lấy mã của bên thứ ba nhằm thêm chức năng vào worker dịch vụ.
Các trình duyệt cố gắng giảm thiểu các vấn đề về hiệu suất có thể xảy ra khi "tải xuống và chạy một số mã đồng bộ" bằng cách tự động lưu vào bộ nhớ đệm mọi nội dung được lấy thông qua importScripts(), nghĩa là sau khi tải xuống ban đầu, sẽ có rất ít hao tổn liên quan đến việc thực thi mã đã nhập.
Tuy nhiên, để làm được điều đó, trình duyệt cần biết rằng sẽ không có mã "bất ngờ" nào được nhập vào worker dịch vụ sau lần cài đặt ban đầu.
Theo quy cách của worker dịch vụ, việc gọi importScripts() chỉ được thực hiện trong quá trình thực thi đồng bộ của tập lệnh worker dịch vụ cấp cao nhất hoặc không đồng bộ bên trong trình xử lý install nếu cần.
Trước Chrome 71, việc gọi importScripts() không đồng bộ bên ngoài trình xử lý install sẽ hoạt động. Kể từ Chrome 71, các lệnh gọi đó sẽ gửi một ngoại lệ thời gian chạy (trừ phi cùng một URL đã được nhập trước đó trong trình xử lý install), khớp với hành vi trong các trình duyệt khác.
Thay vì mã như sau:
// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
importScripts('my-fetch-logic.js');
event.respondWith(self.customFetchLogic(event));
});
Mã của trình chạy dịch vụ sẽ có dạng như sau:
// 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));
});
Ngừng sử dụng các URL lặp lại được truyền đến cache.addAll()
Nếu bạn đang sử dụng API Bộ nhớ đệm cùng với một worker dịch vụ, thì Chrome 71 sẽ có một thay đổi nhỏ khác để phù hợp với quy cách liên quan. Khi cùng một URL được truyền nhiều lần đến một lệnh gọi duy nhất đến cache.addAll(), quy cách sẽ cho biết rằng lời hứa do lệnh gọi trả về sẽ bị từ chối.
Trước Chrome 71, điều này không được phát hiện và các URL trùng lặp sẽ bị bỏ qua một cách hiệu quả.
Việc ghi nhật ký này là bước khởi đầu cho Chrome 72, trong đó thay vì chỉ cảnh báo được ghi lại, các URL trùng lặp sẽ dẫn đến việc cache.addAll() từ chối. Nếu bạn đang gọi cache.addAll() trong một chuỗi hứa hẹn được truyền đến InstallEvent.waitUntil(), như thông lệ, thì việc từ chối đó có thể khiến trình chạy dịch vụ của bạn không cài đặt được.
Sau đây là những trường hợp bạn có thể gặp sự cố:
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))
);
});
Quy định hạn chế này chỉ áp dụng cho các URL thực tế được truyền đến cache.addAll() và việc lưu vào bộ nhớ đệm hai phản hồi tương đương có URL khác nhau (chẳng hạn như '/' và '/index.html') sẽ không kích hoạt trường hợp từ chối.
Kiểm thử rộng rãi việc triển khai trình chạy dịch vụ
Tại thời điểm này, trình chạy dịch vụ được triển khai rộng rãi trên tất cả các trình duyệt"mãi mãi xanh" chính. Nếu thường xuyên kiểm thử ứng dụng web tiến bộ trên một số trình duyệt hoặc nếu có một số lượng đáng kể người dùng không sử dụng Chrome, thì có thể bạn đã phát hiện thấy sự không nhất quán và cập nhật mã của mình. Tuy nhiên, trong trường hợp bạn chưa nhận thấy hành vi này trong các trình duyệt khác, chúng tôi muốn nêu rõ thay đổi này trước khi chuyển đổi hành vi của Chrome.