Việc lưu các tài sản vào bộ nhớ đệm bằng một trình chạy dịch vụ có thể tăng tốc các lượt truy cập lặp lại và cung cấp hỗ trợ ngoại tuyến. Workbox giúp việc này trở nên dễ dàng và được đưa vào ứng dụng Create React theo mặc định.
Workbox được tích hợp sẵn
Tạo Ứng dụng React (CRA) bằng cấu hình mặc định sẽ lưu trước tất cả
nội dung tĩnh trong ứng dụng của bạn với mỗi bản dựng.
Tại sao tính năng này 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 (chuẩn bị) để khi người dùng tải trang web lần thứ hai, trình duyệt có thể truy xuất chúng từ trình chạy dịch vụ thay vì đưa ra yêu cầu mạng. Điều này dẫn đến việc tải trang nhanh hơn trong các lượt truy cập lặp lại cũng như trong khả năng hiển thị nội dung khi người dùng không có kết nối mạng.
Hộp công việc trong CRA
Hộp công việc là tập hợp các công cụ cho phép bạn tạo và duy trì dịch vụ
nhân viên. 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 và có bật trình chạy dịch vụ thông qua tệp này:
Để xem nội dung nào đ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
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 cho thấy
một thông báo (from ServiceWorker) để cho biết 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ả nội dung tĩnh vào bộ nhớ đệm, nên hãy cố gắng sử dụng ứng dụng trong khi ngoại tuyến:
- Trong thẻ Mạng trong 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.
- Tải lại ứng dụng.
Ứng dụng hoạt động theo cách tương tự, ngay cả khi không có mạng kết nối!
Sửa đổi chiến lược lưu vào bộ nhớ đệm
Chiến lược lưu trước mặc định mà Workbox sử dụng trong CRA là chiến lược lưu vào bộ nhớ đệm trước tiên, trong đó tất cả phần tử 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 (chẳng hạn như nếu tài nguyên không được lưu vào bộ nhớ đệm), thì yêu cầu kết nối mạng sẽ được thực hiện. Chiến dịch 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ọ đã trạng thái ngoại tuyến.
Mặc dù Workbox hỗ trợ xác định các chiến lược và phương pháp tiếp cận khác nhau
vào bộ nhớ đệm tài nguyên tĩnh và động, nên cấu hình mặc định trong CRA không thể
bị sửa đổi hoặc ghi đè 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. Chiến dịch này
sẽ cho phép nhà phát triển ghi đè chế độ cài đặt mặc định bằng cách chỉ tạo một
tệp workbox.config.js.
Xử lý chiến lược ưu tiên bộ nhớ đệm
Trước tiên, hãy dựa vào bộ nhớ đệm của trình chạy dịch vụ rồi quay lại mạng là một cách tuyệt vời để xây dựng trang web tải nhanh hơn trong các 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, có một vài điều cần phải cần cân nhắc:
- Làm cách nào để kiểm tra các hành vi lưu vào bộ nhớ đệm của một trình chạy dịch vụ?
- Có nên có thông báo để người dùng biết rằng họ đang xem nội dung được lưu vào bộ nhớ đệm?
CRA tài liệu sẽ giải thích các điểm này và nhiều thông tin khác một cách chi tiết.
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 trong ứng dụng của bạn vào bộ nhớ đệm trước cung cấp trải nghiệm nhanh hơn cho người dùng của bạn cũng như hỗ trợ ngoại tuyến.
- 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 trước trong
src/index.js. - Nếu bạn không sử dụng CRA để tạo ứng dụng React, hãy thêm một trong
nhiều thư viện mà Workbox cung cấp, chẳng hạn như
workbox-webpack-plugin, vào quá trình tạo bản dựng. - Chú ý đến thời điểm CRA sẽ hỗ trợ tệp ghi đè
workbox.config.jstrong nội dung này Vấn đề GitHub.