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 mà 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 được lưu vào bộ nhớ đệm vào trình duyệt mà không cần chuyển đến vào mạng. Sử dụng tính năng lưu vào bộ nhớ đệm cho những tài sản quan trọng mà trang web của bạn cần khi không có 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 nếu bạn 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 do một danh sách URL và thông tin phiên bản liên quan cho từng URL. Khi kết hợp lại với nhau, 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ứ bộ nhớ đệm trước cho một phiên bản cụ thể của ứng dụng web. Một tệp kê khai trước bộ nhớ đệm, trong định dạng mà Workbox 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, ba mục nhập bộ nhớ đệm sẽ được tạo trong
Dung lượng lưu trữ của bộ nhớ đệm, cho từng URL trong số ba URL được liệt kê. Nội dung đầu tiên có ghi phiên bản
thông tin đã có trong URL (app là tên tệp thực tế và
.abcd1234 chứa thông tin về phiên bản, ngay trước đuôi tệp
.js). Các công cụ xây dựng của Workbox có thể phát hiện vấn đề này và loại trừ một trường bản sửa đổi. Chiến lược phát hành đĩa đơn
hai nội dung khác không có bất kỳ thông tin về phiên bản nào trong URL của chúng, vì vậy, Workbox
các công cụ tạo bản dựng sẽ tạo một trường revision riêng biệt, chứa hàm băm của
nội dung của tệp.
Phân phát tài nguyên được lưu trước trong bộ nhớ đệm
Việc thêm nội dung 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 lưu vào bộ nhớ đệm, chúng 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ó thể kiểm tra xem URL nào có
đượ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 xử lý. 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 những mã này trước mạng), đâ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 bản trình bày chính xác về bộ nhớ đệm dự kiến state; nếu một tổ hợp URL/bản sửa đổi trong tệp kê khai thay đổi, thì một trình chạy dịch vụ biết rằng mục nhập đượ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 với vai trò là một trình chạy dịch vụ kiểm tra bản cập nhật, để xác định xem cần làm mới URL nào được 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 mới của ứng dụng web theo thời gian, bạn cần duy trì cập nhật các URL trước đó được lưu trong bộ nhớ đệm, lưu trước các nội dung mới vào bộ nhớ đệm và xoá các nội dung lỗi thời mục nhập. Miễn là bạn tiếp tục tạo một tệp kê khai đầy đủ trong bộ nhớ đệm mỗi lần bạn tạo lại trang web của mình, tệp kê khai đó đóng vai trò là "nguồn đáng tin cậy" cho trạng thái bộ nhớ đệm trước tại bất kỳ thời điểm nào.
Nếu có URL hiện tại với trường bản sửa đổi mới hoặc có URL nào đó
thêm hoặc bị xoá khỏi tệp kê khai. Đây là dấu hiệu cho thấy trình chạy dịch vụ của bạn
các cập nhật cần thực hiện, như một phần của
install
và
activate
trình xử lý sự kiện. 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, tệp kê khai bộ nhớ đệm mới nhất của bạn có thể đã trải qua những trải nghiệm sau
các thay đổi:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Mỗi thay đổi này sẽ cho trình chạy dịch vụ biết rằng cần có các yêu cầu mới
được thực hiện để cập nhật các mục nhập đã lưu vào bộ nhớ đệm trước đây ('offline.svg' và 'index.html')
và lưu URL mới vào bộ nhớ đệm ('app.ffaa4455.js'), cũng như xoá để dọn dẹp URL
không còn được sử dụng ('app.abcd1234.js').
Đúng "cửa hàng ứng dụng" trải nghiệm cài đặt
Một lợi ích khác của việc lưu vào bộ nhớ đệm là bạn có thể cung cấp cho người dùng trải nghiệm nếu không có "cửa hàng ứng dụng" thì sẽ rất khó đạt được cài đặt. Sau khi người dùng truy cập vào trang bất kỳ trên ứng dụng web của bạn lần đầu tiên, bạn có thể lưu trước tất cả URL cần thiết để hiển thị bất kỳ URL nào của mình trong bộ nhớ đệm lượt xem của ứng dụng web trước mà không phải đợi cho đến khi họ truy cập 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ỉ là lượt xem trước đây. Việc chuẩn bị trước cũng mang lại điều đó với 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 bài viết Xác định vấn đề đã tải hướng dẫn để có được hình ảnh về URL nào có ý nghĩa nhất để lưu trước trong bộ nhớ đệm. Quy tắc chung là lưu trước trong bộ nhớ đệm bất kỳ HTML, JavaScript hoặc CSS nào được tải sớm và là điều quan trọng đối với việc 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 này (trừ phi rất quan trọng đối với chức năng của ứng dụng web). Thay vào đó, hãy dùng thời gian chạy lưu vào bộ nhớ đệm để đảm bảo được lưu vào bộ nhớ đệm khi di chuyển.
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 (cũng giống như 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 bộ nhớ đệm tệp kê khai bộ nhớ đệm trước.
Các công cụ xây dựng của Workbox trợ giúp bạn bằng cách cho bạn biết số lượng mục trong bộ nhớ đệm trước tệp kê khai cũng như tổng kích thước của tải trọng bộ nhớ đệm trước.
Khách truy cập thường xuyên vào ứng dụng web của bạn sẽ hưởng lợi về lâu dài từ chi phí trả trước lưu vào bộ nhớ đệm, vì khả năng này giúp tránh việc mạng lưới thanh toán một cách nhanh chóng trong băng thông đã được tiết kiệm theo thời gian.