Workbox-navigation-ắm

Bài viết "Tăng tốc Trình chạy dịch vụ bằng tính năng tải trước điều hướng" giải thích rõ ràng về tính năng tải trước điều hướng và các lợi ích mà tính năng này mang lại cho các ứng dụng web có 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 điều hướng hay không. Nếu có, trình duyệt sẽ tự động tạo trình xử lý sự kiện activate để bật tính năng này.

Mã dùng chung bên trong workbox-core xử lý việc tạo yêu cầu mạng trên tất cả 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à bất kỳ chiến lược tích hợp nào cũng có thể tự động tận dụng tính năng tải trước điều hướng sau khi tính năng này được bật.

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

Nhà phát triển đang xử lý thao tác điều hướng bằng cách phản hồi bằng HTML được lưu vào bộ nhớ đệm trước (có thể được định cấu hình bằng một dự phòng App Shell) không cần bật tính năng tải trước thao tác điều hướng! Tính năng này nhằm giảm độ trễ điều hướng cho những nhà phát triển không thể lưu trước HTML nhưng vẫn muốn sử dụng Workbox để xử lý việc lưu các thành phầ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 Vỏ ứng dụng và đã thiết lập tuyến điều hướng để sử dụng HTML được lưu vào bộ nhớ đệm trước, thì việc bật tính năng tải trước điều hướng sẽ là một sự lãng phí. Phản hồi 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 vào bộ nhớ đệm trước 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 về việc 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ính năng tải trước điều hướng. enable() sẽ kiểm tra khả năng hỗ trợ trình duyệt trong thời gian chạy và chỉ cố gắng bật tính năng tải trước điều hướng nếu trình duyệt hiện tại hỗ trợ tính năng này. Do đó, bạn có thể gọi enable() một cách an toàn trong worker 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 tác động đến hiệu suất của việc vận chuyển một worker 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()