Workbox-navigation-ắm

"Tăng tốc Service Worker bằng tải trước thành phần điều hướng" giải thích rất rõ khái niệm tải trước điều hướng và những lợi ích mà tính năng này mang lại cho các ứng dụng web mà trình chạy dịch vụ không xử lý rõ ràng các yêu cầu điều hướng.

Mô-đun này có chức năng gì?

workbox-navigation-preload sẽ xử lý việc kiểm tra trong thời gian chạy để xem trình duyệt hiện tại có hỗ trợ tính năng tải trước thành phần điều hướng hay không. Nếu có, trình duyệt sẽ tự động tạo một trình xử lý sự kiện activate để bật tính năng này.

Mã được chia sẻ bên trong workbox-core xử lý việc tạo các yêu cầu mạng trên toàn bộ Workbox cũng đã được cập nhật để tự động tận dụng phản hồi tải trước (nếu có). Điều này có nghĩa là mọi chiến lược tích hợp sẵn đều có thể tự động tận dụng tính năng tải trước điều hướng sau khi bạn bật.

Ai nên bật tính năng tải trước thành phần điều hướng?

Các nhà phát triển đã xử lý thao tác điều hướng bằng cách phản hồi bằng HTML được lưu trước vào bộ nhớ đệm (có thể được định cấu hình bằng tính năng dự phòng App Shell) không cần bật tính năng tải trước điều hướng! Tính năng này nhằm giảm độ trễ điều hướng cho các nhà phát triển không thể lưu trước HTML của họ vào bộ nhớ đệm nhưng vẫn muốn sử dụng Workbox để xử lý việc lưu các tài sản khác vào bộ nhớ đệm trên trang web của họ.

Ví dụ: nếu bạn đang làm theo mẫu App Shell và đã có tuyến điều hướng đã được thiết lập để sử dụng HTML được lưu trước trong bộ nhớ đệm, thì việc bật tính năng tải trước thành phần điều hướng sẽ là lãng phí. Phản hồi của mạng liên kết với yêu cầu tải trước sẽ không bao giờ được sử dụng, vì HTML được lưu trước vào bộ nhớ đệm sẽ được sử dụng vô điều kiện.

Cách sử dụng cơ bản

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

Câu chuyện hỗ trợ trình duyệt là gì?

Hiện tại, Google Chrome là trình duyệt duy nhất hỗ trợ tải trước tính năng điều hướng. enable() sẽ kiểm tra xem trình duyệt có hỗ trợ không trong thời gian chạy và chỉ cố gắng bật tính năng tải trước thành phần điều hướng nếu trình duyệt hiện tại hỗ trợ. Do đó, bạn có thể gọi enable() vô điều kiện trong trình chạy dịch vụ.

Bạn nên lưu ý rằng những trình duyệt đó sẽ không được hưởng lợi từ việc giảm độ trễ điều hướng. Bạn nên đo lường cẩn thận hệ quả về hiệu suất khi vận chuyển một trình chạy dịch vụ không xử lý các yêu cầu điều hướng và không sử dụng tính năng tải trước điều hướng.

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()