Một tính năng của trình chạy dịch vụ là khả năng lưu tệp vào bộ nhớ đệm khi trình chạy dịch vụ đang cài đặt. Quá trình này được gọi là "lưu trước". Tính năng lưu vào bộ nhớ đệm trước cho phép phân phát các tệp đã lưu vào bộ nhớ đệm cho trình duyệt mà không cần truy cập vào mạng. Sử dụng tính năng lưu vào bộ nhớ đệm trước cho các thành phần quan trọng mà trang web của bạn cần ngay cả khi không có mạng: trang chính, kiểu, hình ảnh dự phòng và tập lệnh thiết yếu.
Tại sao bạn nên sử dụng Workbox?
Bạn không bắt buộc phải sử dụng Workbox để lưu vào bộ nhớ đệm trước. Bạn có thể viết mã của riêng mình để lưu trước các thành phần quan trọng khi trình chạy dịch vụ đang cài đặt. Lợi ích chính khi sử dụng Workbox là khả năng kiểm soát phiên bản ngay từ đầu. Bạn sẽ gặp ít rắc rối hơn khi cập nhật các thành phần được lưu vào bộ nhớ đệm trước bằng Workbox so với khi phải tự quản lý việc tạo phiên bản và cập nhật các tệp này.
Tệp kê khai lưu vào bộ nhớ đệm trước
Tính năng lưu vào bộ nhớ đệm trước được điều khiển bằng danh sách URL và thông tin phiên bản liên kết cho từng URL. Tất cả thông tin này được gọi là tệp kê khai bộ nhớ đệm trước. Tệp kê khai là "nguồn đáng tin cậy" cho trạng thái của mọi nội dung dự kiến sẽ có trong bộ nhớ đệm trước cho một phiên bản nhất định của ứng dụng web. Tệp kê khai bộ nhớ đệm trước, ở định dạng do Workbox sử dụng, có dạng như sau:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Khi trình chạy dịch vụ được cài đặt, 3 mục nhập bộ nhớ đệm sẽ được tạo trong Bộ nhớ đệm cho mỗi URL trong số 3 URL được liệt kê. Tài sản đầu tiên có thông tin phiên bản đã có trong URL (app là tên tệp thực tế và .abcd1234 chứa thông tin phiên bản, ngay trước phần mở rộng tệp .js). Các công cụ bản dựng của Workbox có thể phát hiện điều này và loại trừ trường sửa đổi. Hai tài sản còn lại không chứa bất kỳ thông tin phiên bản nào trong URL, vì vậy, các công cụ xây dựng của Workbox tạo một trường revision riêng biệt, chứa hàm băm của nội dung tệp cục bộ.
Phân phát tài nguyên được lưu vào bộ nhớ đệm trước
Việc thêm thành phần vào bộ nhớ đệm chỉ là một phần của quá trình lưu vào bộ nhớ đệm trước. Sau khi các thành phần được lưu vào bộ nhớ đệm, các thành phần đó cần phản hồi các yêu cầu gửi đi. Điều đó đòi hỏi trình nghe sự kiện fetch trong trình chạy dịch vụ của bạn có thể kiểm tra xem URL nào đã được lưu vào bộ nhớ đệm trước và trả về các phản hồi đã lưu vào bộ nhớ đệm đó một cách đáng tin cậy, bỏ qua mạng trong quá trình này. Vì trình chạy dịch vụ kiểm tra bộ nhớ đệm để tìm các phản hồi (và sử dụng các phản hồi trước mạng), nên đây được gọi là chiến lược ưu tiên bộ nhớ đệm.
Cập nhật hiệu quả
Tệp kê khai lưu vào bộ nhớ đệm trước cung cấp thông tin chính xác về trạng thái bộ nhớ đệm dự kiến; nếu một tổ hợp URL/bản sửa đổi trong tệp kê khai thay đổi, thì trình chạy dịch vụ sẽ biết rằng mục đã lưu vào bộ nhớ đệm trước đó không còn hợp lệ và cần được cập nhật. Chỉ cần một yêu cầu mạng duy nhất do trình duyệt thực hiện tự động trong quá trình kiểm tra bản cập nhật của trình chạy dịch vụ để xác định những URL được lưu vào bộ nhớ đệm trước cần làm mới.
Nội dung cập nhật về tài nguyên được lưu vào bộ nhớ đệm trước
Khi phát hành các phiên bản mới của ứng dụng web theo thời gian, bạn cần cập nhật các URL được lưu vào bộ nhớ đệm trước đó, lưu các thành phần mới vào bộ nhớ đệm trước và xoá các mục nhập đã lỗi thời. Miễn là bạn tiếp tục tạo tệp kê khai bộ nhớ đệm trước đầy đủ mỗi khi tạo lại trang web, tệp kê khai đó sẽ đóng vai trò là "nguồn đáng tin cậy" cho trạng thái bộ nhớ đệm trước của bạn tại bất kỳ thời điểm nào.
Nếu có một URL hiện có trường bản sửa đổi mới hoặc nếu có URL nào đó được thêm hoặc xoá khỏi tệp kê khai, thì đó là dấu hiệu cho thấy trình chạy dịch vụ cần được thực hiện cập nhật, như một phần của trình xử lý sự kiện install và activate. Ví dụ: nếu bạn đã thực hiện một số thay đổi đối với trang web và tạo lại, thì tệp kê khai bộ nhớ đệm trước mới nhất của bạn có thể đã trải qua các thay đổi sau:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Mỗi thay đổi này cho trình chạy dịch vụ biết rằng cần thực hiện các yêu cầu mới để cập nhật các mục đã lưu trong bộ nhớ đệm trước đó ('offline.svg' và 'index.html') và lưu các URL mới vào bộ nhớ đệm ('app.ffaa4455.js'), cũng như xoá để dọn dẹp các URL không còn được sử dụng ('app.abcd1234.js').
Trải nghiệm cài đặt "cửa hàng ứng dụng" thực sự
Một lợi ích khác của tính năng lưu vào bộ nhớ đệm trước là bạn có thể mang đến cho người dùng trải nghiệm mà họ khó có được khi cài đặt qua "cửa hàng ứng dụng". Sau lần đầu người dùng truy cập vào một trang bất kỳ trên ứng dụng web của bạn, bạn có thể lưu trước tất cả các URL cần thiết để hiển thị trước bất kỳ lượt xem nào của ứng dụng web mà không phải đợi cho đến khi họ truy cập từng chế độ xem riêng lẻ.
Khi cài đặt một ứng dụng, người dùng mong muốn mọi phần đều hiển thị nhanh chóng, không chỉ những thành phần hiển thị mà họ đã truy cập trước đây. Tính năng lưu vào bộ nhớ đệm trước mang lại trải nghiệm tương tự cho các ứng dụng web.
Nội dung nào của bạn nên được lưu trước vào bộ nhớ đệm?
Hãy tham khảo lại hướng dẫn Xác định nội dung đang tải để nắm được những URL nào phù hợp nhất để lưu vào bộ nhớ đệm trước. Quy tắc chung là lưu trước mọi HTML, JavaScript hoặc CSS được tải sớm và rất quan trọng để hiển thị cấu trúc cơ bản của một trang nhất định.
Bạn nên tránh lưu trước nội dung nghe nhìn hoặc các thành phần khác sẽ được tải sau (trừ phi chúng rất quan trọng đối với chức năng của ứng dụng web). Thay vào đó, hãy sử dụng chiến lược lưu vào bộ nhớ đệm trong thời gian chạy để đảm bảo các tài sản này được lưu vào bộ nhớ đệm khi bạn truy cập.
Luôn nhớ rằng việc lưu vào bộ nhớ đệm trước sẽ sử dụng băng thông mạng và bộ nhớ trên thiết bị của người dùng (giống như khi cài đặt ứng dụng từ cửa hàng ứng dụng). Là nhà phát triển, bạn có thể quyết định lưu vào bộ nhớ đệm trước một cách hợp lý và tránh tệp kê khai lưu vào bộ nhớ đệm trước bị phình to.
Các công cụ xây dựng của Workbox sẽ giúp bạn bằng cách cho biết số lượng mục trong tệp kê khai trước cũng như tổng kích thước của tải trọng trước.
Về lâu dài, khách truy cập thường xuyên vào ứng dụng web của bạn sẽ được hưởng lợi từ chi phí trả trước của tính năng lưu vào bộ nhớ đệm trước, vì khả năng lưu vào bộ nhớ đệm trước giúp tránh mạng nhanh chóng tự trả phí bằng băng thông đã tiết kiệm được theo thời gian.