Dự đoán trước trong Tạo ứng dụng phản ứng bằng Workbox

Việc lưu tài sản vào bộ nhớ đệm bằng trình chạy dịch vụ có thể giúp tăng tốc số lượt truy cập lặp lại và hỗ trợ khi không có mạng. Workbox giúp việc này trở nên dễ dàng và được đưa vào Create React App theo mặc định.

Houssein Djirdeh

Thận trọng: Một hoặc nhiều bản minh hoạ trên trang này không còn hoạt động nữa vì Glitch đã ngừng lưu trữ.

Lưu ý: Nếu bạn chưa hiểu rõ ý tưởng cơ bản về trình chạy dịch vụ và lưu trước vào bộ nhớ đệm, hãy đọc trước hướng dẫn về mô-đun workbox-precaching.

Workbox được tích hợp vào Tạo ứng dụng React (CRA) với cấu hình mặc định lưu trước tất cả tài sản tĩnh trong ứng dụng của bạn với mọi bản dựng.

Tại sao việc này lại hữu ích?

Trình chạy dịch vụ cho phép bạn lưu trữ các tài nguyên quan trọng trong bộ nhớ đệm (lưu trước vào bộ nhớ đệm) để khi người dùng tải trang web lần thứ hai, trình duyệt có thể truy xuất các tài nguyên đó từ trình chạy dịch vụ thay vì gửi yêu cầu đến mạng. Điều này giúp trang tải nhanh hơn trong những lần truy cập sau, cũng như giúp hiển thị nội dung khi người dùng không có kết nối mạng.

Workbox trong CRA

Workbox là một tập hợp các công cụ cho phép bạn tạo và duy trì trình chạy dịch vụ. Trong CRA, workbox-webpack-plugin đã được đưa vào bản dựng chính thức và chỉ cần được bật trong tệp src/index.js để đăng ký một trình chạy dịch vụ mới với mọi bản dựng:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

Dưới đây là ví dụ về một ứng dụng React được xây dựng bằng CRA có trình chạy dịch vụ được bật thông qua tệp này:

Cách xem những thành phần đang được lưu vào bộ nhớ đệm:

• Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình .
• Nhấn tổ hợp phím `Control+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở Công cụ cho nhà phát triển.
• Nhấp vào thẻ Mạng.
• Tải lại ứng dụng.

Bạn sẽ nhận thấy rằng thay vì hiển thị kích thước tải trọng, cột Size sẽ hiển thị thông báo (from ServiceWorker) để cho biết rằng các tài nguyên này được truy xuất từ trình chạy dịch vụ.

Vì trình chạy dịch vụ lưu tất cả tài sản tĩnh vào bộ nhớ đệm, hãy thử sử dụng ứng dụng khi không có mạng:

1. Trong thẻ Mạng của Công cụ cho nhà phát triển, hãy bật hộp đánh dấu Ngoại tuyến để mô phỏng trải nghiệm ngoại tuyến.
2. Tải lại ứng dụng.

Ứng dụng hoạt động theo cách giống hệt nhau, ngay cả khi không có kết nối mạng!

Sửa đổi chiến lược lưu vào bộ nhớ đệm

Chiến lược lưu trước vào bộ nhớ đệm mặc định mà Workbox sử dụng trong CRA là ưu tiên bộ nhớ đệm, trong đó tất cả tài sản tĩnh được tìm nạp từ bộ nhớ đệm của trình chạy dịch vụ và nếu không thành công (ví dụ: nếu tài nguyên không được lưu vào bộ nhớ đệm), thì yêu cầu mạng sẽ được thực hiện. Đây là cách nội dung vẫn có thể được phân phát cho người dùng ngay cả khi họ hoàn toàn không có kết nối mạng.

Mặc dù Workbox hỗ trợ xác định các chiến lược và phương pháp khác nhau để lưu tài nguyên tĩnh và động vào bộ nhớ đệm, nhưng bạn không thể sửa đổi hoặc ghi đè cấu hình mặc định trong CRA trừ phi bạn loại bỏ hoàn toàn. Tuy nhiên, có một đề xuất mở để khám phá việc thêm tính năng hỗ trợ cho tệp workbox.config.js bên ngoài. Điều này cho phép nhà phát triển ghi đè chế độ cài đặt mặc định chỉ bằng cách tạo một tệp workbox.config.js.

Lưu ý: Để biết thêm thông tin chi tiết về tất cả chiến lược lưu vào bộ nhớ đệm mà một trình chạy dịch vụ có thể sử dụng, hãy xem Sách hướng dẫn ngoại tuyến.

Xử lý chiến lược ưu tiên bộ nhớ đệm

Việc dựa vào bộ nhớ đệm của trình chạy dịch vụ trước rồi quay lại mạng là một cách tuyệt vời để xây dựng các trang web tải nhanh hơn trong những lần truy cập tiếp theo và hoạt động ngoại tuyến ở một mức độ nào đó. Tuy nhiên, bạn cần lưu ý một số điều sau:

• Làm cách nào để kiểm thử hành vi lưu vào bộ nhớ đệm của trình chạy dịch vụ?
• Có nên hiển thị thông báo cho người dùng biết rằng họ đang xem nội dung được lưu vào bộ nhớ đệm không?

Tài liệu về CRA giải thích chi tiết những điểm này và nhiều điểm khác.

Kết luận

Sử dụng trình chạy dịch vụ để lưu trước các tài nguyên quan trọng vào bộ nhớ đệm trong ứng dụng của bạn nhằm mang lại trải nghiệm nhanh hơn cho người dùng cũng như hỗ trợ khi không có mạng.

1. Nếu bạn đang sử dụng CRA, hãy bật trình chạy dịch vụ được định cấu hình sẵn trong src/index.js.
2. Nếu bạn không sử dụng CRA để tạo ứng dụng React, hãy đưa một trong nhiều thư viện mà Workbox cung cấp (chẳng hạn như workbox-webpack-plugin) vào quy trình xây dựng.
3. Hãy theo dõi thời điểm CRA sẽ hỗ trợ tệp ghi đè workbox.config.js trong vấn đề này trên GitHub.