Tôi được yêu cầu viết bài đăng này về một bản cập nhật khá nhỏ đối với API bộ nhớ đệm của worker dịch vụ. Tôi không nghĩ rằng vấn đề này cần phải có một bài viết riêng, nhưng sau một cuộc tranh luận dài cuối cùng cũng phải kết thúc bằng một trò chơi đá giấy kéo, tôi đã thua, vì vậy, đây là bài viết đó.
Bạn đã sẵn sàng tìm hiểu về các bản cập nhật đối với cách triển khai API bộ nhớ đệm của worker dịch vụ trên Chrome chưa?
Tôi không nghe thấy bạn nói! Tôi muốn hỏi bạn đã sẵn sàng nghe về các nội dung cập nhật đối với việc triển khai API bộ nhớ đệm của worker dịch vụ trên Chrome chưa?
(bạn chỉ có thể đọc tiếp nếu đã nhảy lên ghế và hét to "YEAHHH!". Bạn không bắt buộc phải vừa đọc vừa giả vờ vung dây lasso, nhưng nên làm như vậy).
cache.addAll đã có trong Chrome 46
Có! Chính xác! Bộ nhớ đệm! Dấu chấm thêm tất cả! Chrome 46!
Ok ok, ngoài lời châm biếm, đây thực sự là một vấn đề khá lớn, vì cache.addAll là phần còn lại cuối cùng của bộ đệm "thiết yếu" polyfill, nghĩa là bạn không cần dùng đến nữa.
Sau đây là cách hoạt động của cache.addAll:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll lấy một mảng các URL và yêu cầu, tìm nạp và thêm các URL và yêu cầu đó vào bộ nhớ đệm. Đây là giao dịch – nếu bất kỳ thao tác tìm nạp hoặc ghi nào không thành công, toàn bộ thao tác sẽ không thành công và bộ nhớ đệm sẽ được trả về trạng thái trước đó. Điều này đặc biệt hữu ích cho các thao tác cài đặt như trên, trong đó một lỗi duy nhất sẽ là lỗi tổng thể.
Ví dụ trên nằm trong một trình chạy dịch vụ, nhưng bạn cũng có thể truy cập đầy đủ vào API bộ nhớ đệm từ các trang.
Firefox đã hỗ trợ API này trong phiên bản dành cho nhà phát triển, vì vậy, API này sẽ được triển khai cùng với phần còn lại của trình triển khai dịch vụ.
Nhưng chờ đã, đó chưa phải là tất cả, chúng tôi còn có nhiều điểm cải tiến khác về bộ nhớ đệm trong quá trình phát triển…
cache.matchAll sẽ có trong Chrome 47
Điều này cho phép bạn nhận được nhiều kết quả trùng khớp:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
Mã trên sẽ lấy mọi thứ trong mysite-static-v1 khớp với /. Bộ nhớ đệm cho phép bạn có nhiều mục nhập cho mỗi URL nếu các mục nhập đó có thể lưu vào bộ nhớ đệm một cách độc lập, ví dụ: nếu các mục nhập đó có tiêu đề Vary khác nhau.
Firefox đã hỗ trợ tính năng này trong phiên bản dành cho nhà phát triển, vì vậy, tính năng này sẽ được triển khai cùng với các tính năng triển khai worker dịch vụ còn lại.
Các tuỳ chọn truy vấn bộ nhớ đệm sắp ra mắt trên Chrome
Dưới đây là một trình xử lý tìm nạp khá tiêu chuẩn:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Nếu chúng ta đã lưu / vào bộ nhớ đệm và nhận được yêu cầu về /, thì yêu cầu đó sẽ được phân phát từ bộ nhớ đệm. Tuy nhiên, nếu chúng ta nhận được yêu cầu về /?utm_source=blahblahwhatever thì yêu cầu đó sẽ không đến từ bộ nhớ đệm. Bạn có thể giải quyết vấn đề này bằng cách bỏ qua chuỗi tìm kiếm URL trong khi so khớp:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
Bây giờ, /?utm_source=blahblahwhatever sẽ được so khớp với mục nhập cho /! Các tuỳ chọn đầy đủ là:
ignoreSearch– bỏ qua phần tìm kiếm của URL trong cả đối số yêu cầu và yêu cầu được lưu trong bộ nhớ đệmignoreMethod– bỏ qua phương thức của đối số yêu cầu, vì vậy, yêu cầu POST có thể khớp với mục nhập GET trong bộ nhớ đệmignoreVary– bỏ qua tiêu đề vary trong các phản hồi được lưu vào bộ nhớ đệm
Firefox đã hỗ trợ tính năng này trong… ok, bạn đã biết cách làm rồi. Hãy nói với Ben Kelly rằng anh ấy thật tuyệt vời khi đã đưa tất cả những tính năng này vào Firefox.
Nếu bạn muốn làm theo cách triển khai các tuỳ chọn truy vấn bộ nhớ đệm của Chrome, hãy xem crbug.com/426309.
Hẹn gặp lại bạn vào lần tới để tìm hiểu thêm về một chương thú vị khác trong phần "những gì chúng tôi đã triển khai trong API bộ nhớ đệm"!