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

Việc lưu nội dung 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 dịch vụ hỗ trợ ngoại tuyến. Workbox giúp việc này trở nên dễ dàng và nằm trong phần Create React App (Tạo ứng dụng phản ứng) theo mặc định.

Houssein Djirdeh

Lưu ý: Nếu bạn chưa nắm được ý tưởng cơ bản về trình chạy dịch vụ và khả năng lưu trước vào bộ nhớ đệm, trước tiên, hãy đọc hướng dẫn Lưu trước vào bộ nhớ đệm bằng hộp công việc.

Workbox được tích hợp vào Tạo ứng dụng React (CRA) với cấu hình mặc định giúp 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 điều 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 (lưu 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 tới mạng. Điều này giúp tải trang nhanh hơn khi người dùng truy cập nhiều lần cũng như khả năng hiển thị nội dung khi người dùng không kết nối mạng.

Hộp công việc 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à bạn chỉ cần bật trong tệp src/index.js để đăng ký một trình chạy dịch vụ mới cho 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 tạo bằng CRA có trình chạy dịch vụ được bật 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 View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (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 kích thước tải trọng, cột Size lại hiển thị 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ụ sẽ lưu tất cả các thành phần tĩnh vào bộ nhớ đệm, nên bạn hãy cố gắng dùng ứng dụng trong khi không có kết nối mạng:

1. Trong thẻ Mạng trong Công cụ cho nhà phát triển, hãy chọn hộp đánh dấu Offline (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 tương tự, 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à chiến lược ưu tiên vào bộ nhớ đệm, trong đó mọi thành phần tĩnh sẽ đượ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ọ ở trạng thái ngoại tuyến hoàn toàn.

Mặc dù Workbox hỗ trợ xác định nhiều chiến lược và phương pháp để lưu các 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 đẩy ra hoàn toàn. Tuy nhiên, có một đề xuất mở để khám phá cách thêm tính năng hỗ trợ cho tệp workbox.config.js bên ngoài. Việc này sẽ cho phép các nhà phát triển ghi đè các chế độ cài đặt mặc định chỉ bằng cách tạo một tệp workbox.config.js duy nhất.

Lưu ý: Để biết thêm thông tin chi tiết về tất cả cá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ổ tay nấu ăn ngoại tuyến.

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

Trước tiên, việc dựa vào bộ nhớ đệm của trình chạy dịch vụ rồi quay trở 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 vài điều sau:

• Có thể kiểm tra hành vi lưu vào bộ nhớ đệm của một nhân viên dịch vụ bằng cách nào?
• Bạn 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 trong bộ nhớ đệm không?

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

Kết luận

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

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 chú ý đến thời điểm CRA sẽ hỗ trợ tệp ghi đè workbox.config.js trong vấn đề GitHub này.