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