Một đặc điểm 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. Hoạt động này được gọi là "lưu trữ trước". Việc lưu trước vào bộ nhớ đệm giúp bạn có thể phân phát các tệp đã lưu vào bộ nhớ đệm vào 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 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ó kết nối mạng: trang chính, kiểu, hình ảnh dự phòng và các 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 trước vào bộ nhớ đệm. Bạn có thể viết mã của riêng mình để lưu trước các nội dung quan trọng vào bộ nhớ đệm 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ẽ ít gặp rắc rối khi cập nhật các tài sản được lưu trước trong bộ nhớ đệm 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 trước bộ nhớ đệm
Quá trình lưu trước vào bộ nhớ đệm diễn ra bởi một danh sách URL và thông tin phiên bản liên quan của từng URL. Khi nói chung, 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 thứ nằm trong bộ nhớ đệm trước của một phiên bản ứng dụng web nhất định. Tệp kê khai bộ nhớ đệm trước ở định dạng mà Hộp công việc sử dụng sẽ 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 bộ nhớ đệm sẽ được tạo trong Bộ nhớ đệm, cho mỗi URL được liệt kê. Nội dung đầu tiên có thông tin phiên bản đã bao gồm 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 đuôi tệp .js). Công cụ xây 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 trước trong bộ nhớ đệm
Việc thêm các tài sản vào bộ nhớ đệm chỉ là một phần của quá trình lưu vào bộ nhớ đệm – sau khi các tài sản được lưu vào bộ nhớ đệm, chúng cần phản hồi các yêu cầu gửi đi. Để làm được như vậy, bạn cần có một trình nghe sự kiện fetch trong trình chạy dịch vụ để có thể kiểm tra xem URL nào đã được lưu trước vào bộ nhớ đệm 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 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 trước bộ nhớ đệm 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 được lưu trong bộ nhớ đệm trước đó không còn hợp lệ và cần được cập nhật. Bạn chỉ cần một yêu cầu mạng do trình duyệt tự động thực hiện 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 URL cần lưu trước trong bộ nhớ đệm.
Thông tin cập nhật về tài nguyên được lưu trước trong bộ nhớ đệm
Khi phát hành các phiên bản ứng dụng web mới theo thời gian, bạn cần cập nhật các URL đã lưu trước trong bộ nhớ đệm, lưu trước nội dung mới vào bộ nhớ đệm và xoá các mục lỗi thời. Miễn là bạn tiếp tục tạo một tệp kê khai bộ nhớ đệm đầy đủ mỗi lần bạn 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 bất cứ lúc 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 của mình 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 những 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 nhập đã lưu vào 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á để xoá các URL không còn dùng đến ('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 việc lưu trước vào bộ nhớ đệm là bạn có thể mang đến cho người dùng trải nghiệm mà nếu không phải cài đặt "cửa hàng ứng dụng" thì sẽ rất khó có được. 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 xuất hiện nhanh chóng, chứ không chỉ những khung hiển thị họ truy cập trước đây. Việc lưu trước vào bộ nhớ đệm cũng 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 hướng dẫn Xác định nội dung đang được tải để nắm rõ những URL phù hợp nhất để lưu trước vào bộ nhớ đệm. Quy tắc chung là lưu trước vào bộ nhớ đệm bất kỳ HTML, JavaScript hoặc CSS nào đượ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 được tải sau (trừ phi 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 những tài sản này được lưu vào bộ nhớ đệm khi bạn sử dụng.
Luôn lưu ý rằng việc lưu vào bộ nhớ đệm liên quan đến việc sử dụng băng thông mạng và dung lượng lưu trữ trên thiết bị của người dùng (giống như việc cài đặt ứng dụng từ cửa hàng ứng dụng). Với tư cách là nhà phát triển, bạn là người phải lưu trước bộ nhớ đệm một cách cẩn thận và tránh việc tệp kê khai bộ nhớ đệm trước bị quá tải.
Các công cụ xây dựng của Workbox hỗ trợ bạn bằng cách cho bạn biết số lượng mục trong tệp kê khai bộ nhớ đệm trước cũng như tổng kích thước của tải trọng bộ nhớ đệm trước.
Về lâu dài, những khách truy cập lặp lại vào ứng dụng web của bạn sẽ hưởng lợi từ chi phí chuẩn bị trước, vì ứng dụng này cho phép bạn tránh việc mạng lưới tự thanh toán nhanh chóng bằng băng thông đã tiết kiệm được theo thời gian.