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ỏ cho API bộ nhớ đệm của trình chạy dịch vụ. Tôi không nghĩ rằng bài viết đó tuân thủ chính sách của riêng bài viết đó, nhưng sau một cuộc tranh luận dài, cuối cùng tôi đã quyết định chơi trò oẳn tù tì, tôi đã thua, vì vậy, đây là bài viết.
Bạn đã sẵn sàng nhận thông tin cập nhật về việc triển khai API bộ nhớ đệm của trình chạy dịch vụ của Chrome chưa?
Tôi không nghe rõ! Xin lưu ý rằng bạn đã sẵn sàng nắm bắt thông tin cập nhật về việc triển khai API bộ nhớ đệm của trình chạy dịch vụ của Chrome chưa?
(bạn chỉ có thể đọc tiếp nếu bạn nhảy lên ghế và hét "YEAHHH!" (bạn không bắt buộc phải làm việc này). Bạn cũng có thể làm như vậy nhưng được khuyến khích làm việc này.
cache.addAll đã có trên Chrome 46
Có chứ! Chính xác! Bộ nhớ đệm! Đừng thêm tất cả! Chrome 46!
Được thôi, sang một bên, châm biếm, đây thực sự là một vấn đề khá lớn, vì cache.addAll là phần cuối cùng còn lại của phần mềm polyfill “thiết yếu” cho bộ nhớ đệm, nghĩa là nó không còn cần thiết nữa.
Dưới đâ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 rồi thêm chúng vào bộ nhớ đệm. Đây là giao dịch – nếu bất kỳ quá trình tìm nạp hoặc ghi nào không thành công thì toàn bộ thao tác đều 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 hoạt động cài đặt như trên, trong đó một lỗi duy nhất sẽ là lỗi chung.
Ví dụ ở trên nằm trong trình chạy dịch vụ, nhưng API của bộ nhớ đệm cũng có thể truy cập đầy đủ 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ẽ kết thúc với phần còn lại của quá trình triển khai trình chạy dịch vụ.
Nhưng chờ đã, chưa hết, vẫn còn nhiều cải tiến khác cho bộ nhớ đệm trong quy trình...
cache.matchTất cả sắp có trên Chrome 47
Điều này cho phép bạn nhận được nhiều kết quả phù hợp:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
Thao tác ở trên sẽ lấy mọi nội dung trong mysite-static-v1 phù hợp với /. Bộ nhớ đệm cho phép bạn có nhiều mục nhập cho mỗi URL nếu chúng có thể lưu vào bộ nhớ đệm độc lập, ví dụ: nếu chúng có cá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, trình duyệt này sẽ triển khai phần còn lại của quá trình triển khai trình chạy dịch vụ.
Chrome sắp có các lựa chọn truy vấn về bộ nhớ đệm...
Dưới đây là một trình xử lý tìm nạp khá 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ì hệ thống sẽ phân phát yêu cầu đó từ bộ nhớ đệm. Tuy nhiên, nếu chúng tôi nhận được yêu cầu đối với /?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ác lựa chọn đầy đủ như sau:
ignoreSearch– bỏ qua phần tìm kiếm của url trong cả đối số yêu cầu và các yêu cầu được lưu vào bộ nhớ đệmignoreMethod– bỏ qua phương thức của đối số yêu cầu, để yêu cầu POST có thể khớp với mục nhập GET trong bộ nhớ đệmignoreVary– bỏ qua tiêu đề thay đổi 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... Hãy kể cho Ben Kelly biết anh ấy tuyệt vời như thế nào khi đưa tất cả những điều 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 truy cập vào crbug.com/426309.
Hẹn gặp lại bạn trong một chương thú vị khác của “những gì chúng tôi đã triển khai trong API bộ nhớ đệm”!