Khi một trình chạy dịch vụ xử lý các sự kiện fetch, trình duyệt sẽ đợi trình chạy này cung cấp phản hồi. Mặc dù độ trễ của yêu cầu mạng là một phần lớn của thời gian chờ, nhưng trình duyệt cũng có thể phải đợi service worker khởi động và kích hoạt lệnh gọi lại sự kiện fetch.
Thời gian khởi động khác nhau tuỳ theo thiết bị và các khả năng của thiết bị, nhưng thời gian khởi động có thể đáng kể, đôi khi lên tới nửa giây khi CPU chậm hoặc đang hoạt động ở trạng thái được điều tiết do điều kiện môi trường xung quanh. Hiệu suất đạt được nhờ việc tránh mạng có thể lớn hơn thời gian khởi động này khi phản hồi điều hướng được phân phát từ thực thể Cache. Đối với các yêu cầu điều hướng đi đến mạng, việc giới thiệu một trình chạy dịch vụ có thể tạo ra độ trễ có thể nhận biết được.
Nhập tải trước điều hướng
Tải trước điều hướng là một tính năng của trình chạy dịch vụ giúp giải quyết độ trễ do thời gian khởi động trình chạy dịch vụ gây ra. Nếu không bật tính năng tải trước điều hướng, thì cả quá trình khởi động của trình chạy dịch vụ và yêu cầu điều hướng mà trình chạy này xử lý sẽ xảy ra liên tiếp:
Điều này không lý tưởng, nhưng bạn có thể khắc phục vấn đề này bằng cách bật tính năng tải trước điều hướng. Tính năng này đảm bảo khởi động trình chạy dịch vụ và yêu cầu điều hướng xảy ra đồng thời:
Mặc dù tải trước điều hướng là một tính năng tối ưu hoá hiệu suất tuyệt vời cho các trang web sử dụng trình chạy dịch vụ, nhưng bạn không nên bật tính năng này trong mọi trường hợp. Cụ thể, các trang web sử dụng giao diện ứng dụng được lưu trước trong bộ nhớ đệm không cần tải trước tính năng điều hướng, vì bộ nhớ đệm phân phát yêu cầu điều hướng cho mã đánh dấu shell ứng dụng mà không có độ trễ điều hướng. Trong những trường hợp này, phản hồi được tải trước sẽ bị lãng phí. Điều này thật không phù hợp.
Thời điểm tốt nhất để sử dụng tính năng tải trước điều hướng là khi trang web không thể lưu trước HTML vào bộ nhớ đệm. Hãy nghĩ về các trang web mà phản hồi đánh dấu có tính động và thay đổi theo nội dung như trạng thái xác thực. Yêu cầu điều hướng cho những chiến dịch này có thể sử dụng chiến lược ưu tiên mạng (hoặc thậm chí là chỉ mạng). Đó là lúc mà việc tải trước điều hướng có thể tạo ra sự khác biệt lớn.
Sử dụng tính năng tải trước thành phần điều hướng trong Workbox
Bạn sẽ khó sử dụng được tính năng tải trước điều hướng trực tiếp trong một trình chạy dịch vụ không do Workbox hỗ trợ. Trước tiên, không phải trình duyệt nào cũng hỗ trợ tính năng này. Thứ hai, có thể hơi khó để đưa ra quyết định đúng. Bạn có thể tìm hiểu cách sử dụng trực tiếp trong bài giải thích hay này của Jake Archibald.
Workbox đơn giản hoá việc sử dụng tính năng tải trước điều hướng vì phương thức enable của mô-đun workbox-navigation-preload sẽ thực hiện các bước kiểm tra hỗ trợ tính năng cần thiết, cũng như tạo trình nghe sự kiện activate để bật tính năng này cho bạn.
Từ đây, lợi ích của tính năng tải trước điều hướng sẽ được thể hiện trong các trình duyệt hỗ trợ bằng cách sử dụng Workbox để xử lý các yêu cầu điều hướng bằng trình xử lý chiến lược ưu tiên mạng:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Khi bật tính năng tải trước điều hướng, Workbox sẽ phản hồi các yêu cầu điều hướng sử dụng chiến lược NetworkFirst hoặc NetworkOnly với phản hồi được tải trước.
Làm cách nào để biết tính năng tải trước điều hướng có đang hoạt động hay không?
Trong các bản dựng phát triển, Workbox ghi lại rất nhiều về hoạt động của công việc. Nếu bạn muốn kiểm tra xem tính năng tải trước điều hướng có đang hoạt động trong Workbox hay không, hãy mở bảng điều khiển trong trình duyệt hỗ trợ trong khi yêu cầu điều hướng và bạn sẽ thấy thông báo nhật ký có nội dung như sau:
Theo mặc định, tính năng ghi nhật ký này sẽ không hiển thị trong các bản dựng chính thức. Vì vậy, bạn sẽ không thấy nội dung này khi triển khai trình chạy dịch vụ cho phiên bản chính thức. Tuy nhiên, đây là một cách tuyệt vời để xác minh rằng tính năng tải trước thành phần điều hướng đang hoạt động (cùng với các nội dung khác).
Tuỳ chỉnh phản hồi tải trước
Khi sử dụng tính năng tải trước điều hướng, có thể có những trường hợp cần phải tuỳ chỉnh các phản hồi được tải trước trong phần phụ trợ của ứng dụng. Trong trường hợp này, trình chạy dịch vụ có thể phát trực tuyến một phần nội dung từ mạng.
Trong các trường hợp như vậy, bạn cần biết rằng các yêu cầu tải trước được gửi bằng tiêu đề Service-Worker-Navigation-Preload có giá trị mặc định là true:
Service-Worker-Navigation-Preload: true
Sau đó, trong phần phụ trợ của ứng dụng mà bạn chọn, bạn có thể kiểm tra tiêu đề này và sửa đổi phản hồi cho phù hợp với nhu cầu của mình. Nếu giá trị mặc định của tiêu đề có vấn đề vì bất kỳ lý do gì, bạn có thể thay đổi giá trị đó trong ngữ cảnh cửa sổ. Xin lưu ý rằng mọi công việc bạn thực hiện trên máy chủ để đọc tiêu đề này là tuỳ thuộc vào bạn và nằm ngoài phạm vi của Workbox.
Kết luận
Rất khó để tải trước điều hướng khi sử dụng trực tiếp, nhưng công việc khó khăn đó là xứng đáng để đảm bảo rằng một trình chạy dịch vụ không ngăn trình duyệt thực hiện các yêu cầu điều hướng. Nhờ Workbox, bạn có thể hưởng lợi từ tính năng tải trước điều hướng với ít công việc hơn. Để biết thêm thông tin chi tiết về mô-đun workbox-navigation-preload, hãy xem tài liệu tham khảo của mô-đun đó.