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. Phương pháp này được gọi là "lưu trước vào bộ nhớ đệm". 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 cho trình duyệt mà không cần đi vào mạng. Sử dụng tính năng lưu trước 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 các tài sản 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 có sẵn. Bạn sẽ ít gặp phải nhiều sự cố hơn khi cập nhật các tài sản được lưu trước vào bộ nhớ đệm bằng Workbox so với khi phải tự mình quản lý phiên bản và cập nhật các tệp này.
Tệp kê khai của bộ nhớ đệm trước
Quá trình lưu vào bộ nhớ đệm được thúc đẩy bởi 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 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ứ nằm trong bộ nhớ đệm trước cho một phiên bản ứng dụng web nhất định. Tệp kê khai trước bộ nhớ đệm, ở định dạng mà Workbox sử dụng, sẽ trông giố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 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 đã được 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ác 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 thông tin lập phiên bản nào trong URL. Vì vậy, các công cụ xây dựng của Workbox sẽ tạo một trường revision riêng biệt chứa hàm băm cho nội dung của tệp cục bộ.
Cung cấp các tài nguyên được lưu trước trong bộ nhớ đệm
Việc thêm tài sản vào bộ nhớ đệm chỉ là một phần của quá trình lưu trước. 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 việc này, 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 được 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 khi kết nối 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 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 tổ hợp URL/bản sửa đổi trong tệp kê khai thay đổi, thì trình chạy dịch vụ 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. 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 xem cần làm mới URL nào được lưu trước vào bộ nhớ đệm.
Cập nhật 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 vào bộ nhớ đệm trước đây, lưu tài sản mới vào bộ nhớ đệm mới 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 xây dựng 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 của bạn tại bất kỳ thời điểm nào.
Nếu hiện có một URL có trường sửa đổi mới hoặc nếu có URL nào đã được thêm hoặc bị xoá khỏi tệp kê khai, thì đó là một dấu hiệu cho biết rằng trình chạy dịch vụ của bạn cần thực hiện việc 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 cho trang web của mình rồi tạo lại, thì tệp kê khai bộ nhớ đệm 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 sẽ 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á để 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 thực sự ở "cửa hàng ứng dụng"
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ể cung cấp cho người dùng một trải nghiệm mà nếu không có được thì ngoài cài đặt "cửa hàng ứng dụng". Khi người dùng lần đầu 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ỳ khung hiển thị nào của ứng dụng web mà không phải đợi cho đến khi họ truy cập từng khung hiển thị riêng lẻ.
Khi cài đặt một ứng dụng, người dùng mong muốn mọi phần sẽ hiển thị nhanh chóng, chứ không chỉ các khung hiển thị họ đã truy cập trước đó. Việc lưu trước vào bộ nhớ đệm mang lại trải nghiệm tương tự cho các ứng dụng web.
Tài sản 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 những nội dung đang được tải để hiểu rõ về những URL phù hợp nhất để lưu trước vào bộ nhớ đệm. Nguyên tắc chung là phải lưu trước vào bộ nhớ đệm mọi HTML, JavaScript hoặc CSS được tải sớm và đóng vai trò quan trọng trong 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 tài sản khác được tải sau (trừ phi nó 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 thành phần này được lưu vào bộ nhớ đệm khi bạn di chuyển.
Luôn lưu ý rằng việc lưu trước vào bộ nhớ đệm bao gồm 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 (tương tự 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 có trách nhiệm cân nhắc kỹ khi lưu trước vào bộ nhớ đệm và tránh sử dụng tệp kê khai bộ nhớ đệm trước bị cồng kềnh.
Các công cụ xây dựng của Workbox hỗ trợ bằng cách cho bạn biết số lượng mục trong tệp kê khai lưu vào bộ nhớ đệm cũng như tổng dung lượng của tải trọng tải trước vào bộ nhớ đệm.
Những khách truy cập thường xuyên truy cập vào ứng dụng web của bạn sẽ được hưởng lợi về lâu dài từ việc trả trước chi phí trước, do khả năng tránh mạng nhanh chóng tự trả bằng băng thông tiết kiệm được theo thời gian.