Các nhà phát triển sử dụng service worker và Cache Storage API nên chú ý đến 2 những thay đổi nhỏ được triển khai trong Chrome 71. Cả hai thay đổi đều giúp cách 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 thực thi hiện tại, tải mã bổ sung xuống từ
một URL nhất định và chạy cho đến khi hoàn tất trong phạm vi chung hiện tại. Sau khi hoàn tất,
tập lệnh trình chạy 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 nhỏ tập lệnh trình chạy dịch vụ chính của mì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 để thêm chức năng cho trình chạy dịch vụ của bạn.
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 liên quan đến việc "tải xuống và chạy một số giải pháp đồng bộ
mã" bằng cách tự động lưu vào bộ nhớ đệm mọi nội dung được lấy qua importScripts(), có nghĩa là sau khi
tải xuống ban đầu, có rất ít chi phí liên quan đến việc thực thi mã đã nhập.
Tuy nhiên, để việc đó hoạt động, trình duyệt cần biết rằng sẽ không có bất kỳ sự "bất ngờ" nào mã đã nhập
vào trình chạy dịch vụ sau lần đầu tiên
cài đặt.
Theo quy cách trình chạy dịch vụ,
lệnh gọi importScripts() chỉ được thực thi trong quá trình thực thi đồng bộ cấp cao nhất
tập lệnh service worker hoặc nếu cần, 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ẽ
cơ quan. Kể từ Chrome 71, các lệnh gọi đó
gửi một ngoại lệ thời gian chạy (trừ phi trước đó URL đó đã được nhập 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ã trình chạy dịch vụ của bạn 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));
});
Không còn 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 trình chạy dịch vụ, sẽ có một thay đổi nhỏ khác về
Chrome 71 phù hợp với thông số kỹ thuật có liên quan. Khi cùng một URL là
được truyền nhiều lần vào một lệnh gọi tới
cache.addAll(),
cho biết rằng hứa hẹn mà cuộc gọi trả về sẽ từ chối.
Trước Chrome 71, vấn đề này không được phát hiện nên các URL trùng lặp sẽ bị bỏ qua.
Việc ghi nhật ký này là bước đệm cho Chrome 72, trong đó các URL trùng lặp sẽ thay vì chỉ hiển thị một cảnh báo được ghi lại
khiến cache.addAll() bị từ chối. Nếu bạn đang gọi cache.addAll() trong chuỗi cam kết
đã chuyển đến
InstallEvent.waitUntil(),
như thường lệ, 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.
Dưới đây là cách bạn có thể gặp phải 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à lưu những dữ liệu vào bộ nhớ đệm
sẽ trở thành hai phản hồi tương đương có URL khác nhau (như '/' và '/index.html') sẽ
không kích hoạt từ chối.
Kiểm thử việc triển khai trình chạy dịch vụ trên diện rộng
Trình chạy dịch vụ được triển khai rộng rãi trên tất cả các chủ đề "thường xanh" trình duyệt tại điểm này. Nếu bạn thường xuyên kiểm thử ứng dụng web tiến bộ của mình trên một số trình duyệt hoặc nếu bạn có một số lượng đáng kể người dùng không sử dụng Chrome, thì có khả năng bạn đã phát hiện sự không nhất quán và cập nhật mã của bạn. Nhưng có thể bạn đã không nhận thấy điều này trong các trình duyệt khác, chúng tôi muốn nêu rõ sự thay đổi này trước khi chuyển đổi hành vi của Chrome.