đóng hộp làm việc

Một tính năng của worker dịch vụ là khả năng lưu một tập hợp tệp vào bộ nhớ đệm khi worker dịch vụ đang cài đặt. Quá trình này thường được gọi là "lưu trước" vì bạn đang lưu nội dung vào bộ nhớ đệm trước khi sử dụng trình chạy dịch vụ.

Lý do chính để làm việc này là để nhà phát triển có thể kiểm soát bộ nhớ đệm, tức là họ có thể xác định thời điểm và thời lượng lưu tệp vào bộ nhớ đệm cũng như phân phát tệp đó cho trình duyệt mà không cần truy cập vào mạng, tức là có thể dùng để tạo ứng dụng web hoạt động khi không có mạng.

Workbox giúp bạn thực hiện nhiều thao tác tải trước bằng cách đơn giản hoá API và đảm bảo tải các thành phần xuống một cách hiệu quả.

Cách hoạt động của tính năng lưu trước workbox

Khi một ứng dụng web được tải lần đầu tiên, workbox-precaching sẽ xem xét tất cả các thành phần mà bạn muốn tải xuống, xoá mọi thành phần trùng lặp và kết nối các sự kiện trình chạy dịch vụ có liên quan để tải xuống và lưu trữ các thành phần đó. Các URL đã bao gồm thông tin phiên bản (chẳng hạn như hàm băm nội dung) được dùng làm khoá bộ nhớ đệm mà không cần sửa đổi thêm. Các URL không chứa thông tin về phiên bản sẽ có thêm một tham số truy vấn URL được thêm vào khoá bộ nhớ đệm của chúng, đại diện cho hàm băm của nội dung mà Workbox tạo ra tại thời điểm tạo bản dựng.

workbox-precaching thực hiện tất cả những việc này trong sự kiện install của worker dịch vụ.

Sau này, khi người dùng truy cập lại vào ứng dụng web của bạn và bạn có một worker dịch vụ mới với các thành phần được lưu vào bộ nhớ đệm trước khác nhau, workbox-precaching sẽ xem danh sách mới và xác định những thành phần hoàn toàn mới và những thành phần hiện có cần cập nhật, dựa trên việc sửa đổi của các thành phần đó. Mọi thành phần mới hoặc bản sửa đổi cập nhật sẽ được thêm vào bộ nhớ đệm trong sự kiện install của worker dịch vụ mới.

Worker dịch vụ mới này sẽ không được dùng để phản hồi các yêu cầu cho đến khi sự kiện activate của worker được kích hoạt. Trong sự kiện activate, workbox-precaching sẽ kiểm tra mọi thành phần đã lưu vào bộ nhớ đệm không còn xuất hiện trong danh sách URL hiện tại và xoá các thành phần đó khỏi bộ nhớ đệm.

workbox-precaching sẽ thực hiện các bước này mỗi khi trình chạy dịch vụ được cài đặt và kích hoạt, đảm bảo người dùng có các thành phần mới nhất và chỉ tải các tệp đã thay đổi xuống.

Phân phát phản hồi được lưu vào bộ nhớ đệm trước

Việc gọi precacheAndRoute() hoặc addRoute() sẽ tạo một tuyến khớp với các yêu cầu về URL được lưu vào bộ nhớ đệm trước.

Chiến lược phản hồi được sử dụng trong tuyến này là ưu tiên bộ nhớ đệm: phản hồi được lưu vào bộ nhớ đệm trước sẽ được sử dụng, trừ phi phản hồi được lưu vào bộ nhớ đệm đó không xuất hiện (do một số lỗi không mong muốn), trong trường hợp đó, phản hồi mạng sẽ được sử dụng.

Thứ tự gọi precacheAndRoute() hoặc addRoute() rất quan trọng. Thông thường, bạn nên gọi phương thức này sớm trong tệp worker, trước khi đăng ký bất kỳ tuyến đường bổ sung nào bằng registerRoute(). Nếu bạn đã gọi registerRoute() trước và tuyến đó khớp với một yêu cầu đến, thì bất kỳ chiến lược nào bạn đã xác định trong tuyến bổ sung đó sẽ được dùng để phản hồi, thay vì chiến lược ưu tiên bộ nhớ đệm mà workbox-precaching sử dụng.

Giải thích về Danh sách lưu trước

workbox-precaching dự kiến một mảng đối tượng có thuộc tính url và revision. Mảng này đôi khi được gọi là tệp kê khai bộ nhớ đệm trước:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Danh sách này tham chiếu đến một tập hợp URL, mỗi URL có một phần thông tin "chỉnh sửa" riêng.

Đối với đối tượng thứ hai và thứ ba trong ví dụ trên, thuộc tính revision được đặt thành null. Lý do là thông tin sửa đổi nằm trong chính URL. Đây thường là phương pháp hay nhất cho các thành phần tĩnh.

Đối tượng đầu tiên (/index.html) đặt rõ ràng một thuộc tính sửa đổi, đây là một hàm băm được tạo tự động của nội dung tệp. Không giống như tài nguyên JavaScript và CSS, các tệp HTML thường không thể đưa thông tin sửa đổi vào URL, nếu không, các đường liên kết đến các tệp này trên web sẽ bị hỏng bất cứ khi nào nội dung của trang thay đổi.

Bằng cách truyền thuộc tính sửa đổi đến precacheAndRoute(), Workbox có thể biết thời điểm tệp thay đổi và cập nhật tệp đó cho phù hợp.

Lưu ý: Các phiên bản workbox-precaching trước đây cho phép tệp kê khai bộ nhớ đệm trước chứa các URL chuỗi trong các đối tượng bổ sung có thuộc tính url và revision. Trong phiên bản 5, tính năng này không còn được dùng nữa. Giờ đây, bạn phải luôn truyền một đối tượng và để ngăn Workbox sửa đổi URL trong bộ nhớ đệm, bạn phải đặt thuộc tính revision thành null một cách rõ ràng. Việc truyền một chuỗi sẽ tiếp tục hoạt động (với cảnh báo) trong phiên bản 5, nhưng trong phiên bản 6, tính năng này sẽ không còn được hỗ trợ.

Workbox đi kèm với các công cụ giúp tạo danh sách này:

• workbox-build: Đây là một gói nút có thể được sử dụng trong tác vụ gulp hoặc dưới dạng tập lệnh chạy npm.
• workbox-webpack-plugin: Người dùng webpack có thể sử dụng trình bổ trợ này.
• workbox-cli: Bạn cũng có thể dùng CLI của chúng tôi để tạo danh sách thành phần và thêm các thành phần đó vào worker dịch vụ.

Cảnh báo:Bạn nên sử dụng một trong các công cụ tạo bản dựng của Workbox để tạo tệp kê khai bộ nhớ đệm trước này. Đừng bao giờ mã hoá cứng thông tin sửa đổi vào tệp kê khai "được viết thủ công", vì các URL được lưu vào bộ nhớ đệm trước sẽ không được cập nhật trừ khi thông tin sửa đổi phản ánh nội dung của URL!

Yêu cầu đến cho các tệp được lưu vào bộ nhớ đệm trước

Một việc mà workbox-precaching sẽ làm ngay lập tức là thao tác với các yêu cầu mạng sắp tới để cố gắng so khớp các tệp được lưu vào bộ nhớ đệm trước. Điều này phù hợp với các phương pháp phổ biến trên web.

Ví dụ: yêu cầu về / thường có thể được tệp tại /index.html đáp ứng.

Dưới đây là danh sách các thao tác mà workbox-precaching thực hiện theo mặc định và cách bạn có thể thay đổi hành vi đó.

Bỏ qua tham số URL

Bạn có thể thay đổi các yêu cầu có thông số tìm kiếm để xoá các giá trị cụ thể hoặc xoá tất cả giá trị.

Theo mặc định, các thông số tìm kiếm bắt đầu bằng utm_ hoặc khớp chính xác với fbclid sẽ bị xoá, nghĩa là yêu cầu về /about.html?utm_campaign=abcd sẽ được thực hiện bằng mục nhập được lưu vào bộ nhớ đệm trước cho /about.html.

Bạn có thể bỏ qua một nhóm thông số tìm kiếm khác bằng cách sử dụng ignoreURLParametersMatching:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Chỉ mục thư mục

Theo mặc định, các yêu cầu kết thúc bằng / sẽ được so khớp với các mục có index.html được thêm vào cuối. Điều này có nghĩa là yêu cầu sắp tới cho / có thể tự động được xử lý bằng mục nhập được lưu vào bộ nhớ đệm trước /index.html.

Bạn có thể thay đổi giá trị này thành một giá trị khác hoặc tắt hoàn toàn bằng cách đặt directoryIndex:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

URL hợp lệ

Nếu một yêu cầu không khớp với bộ nhớ đệm trước, chúng ta sẽ thêm .html vào cuối để hỗ trợ các URL "sạch" (còn gọi là URL "đẹp"). Điều này có nghĩa là một yêu cầu như /about sẽ được xử lý bằng mục nhập được lưu vào bộ nhớ đệm trước cho /about.html.

Bạn có thể tắt hành vi này bằng cách đặt cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Thao tác tuỳ chỉnh

Nếu muốn xác định các kết quả trùng khớp tuỳ chỉnh từ các yêu cầu sắp tới đến các thành phần được lưu vào bộ nhớ đệm trước, bạn có thể thực hiện việc này bằng tuỳ chọn urlManipulation. Đây phải là lệnh gọi lại trả về một mảng các kết quả trùng khớp có thể có.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Cách sử dụng nâng cao

Sử dụng trực tiếp PrecacheController

Theo mặc định, workbox-precaching sẽ thiết lập trình nghe install và activate cho bạn. Đối với các nhà phát triển quen thuộc với trình chạy dịch vụ, bạn có thể không muốn làm như vậy nếu cần kiểm soát nhiều hơn.

Thay vì sử dụng tính năng xuất mặc định, bạn có thể sử dụng trực tiếp PrecacheController để thêm các mục vào bộ nhớ đệm trước, xác định thời điểm cài đặt các thành phần này và thời điểm dọn dẹp.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Đọc trực tiếp các thành phần được lưu vào bộ nhớ đệm trước

Đôi khi, bạn có thể cần đọc trực tiếp một thành phần được lưu vào bộ nhớ đệm trước, bên ngoài ngữ cảnh của tuyến đường mà workbox-precaching có thể tự động thực hiện. Ví dụ: bạn có thể muốn lưu một phần mẫu HTML vào bộ nhớ đệm trước, sau đó cần truy xuất và sử dụng khi tạo một phản hồi đầy đủ.

Nhìn chung, bạn có thể sử dụng API Bộ nhớ đệm để lấy các đối tượng Response được lưu vào bộ nhớ đệm trước, nhưng có một vấn đề: khoá bộ nhớ đệm URL cần được sử dụng khi gọi cache.match() có thể chứa tham số tạo phiên bản mà workbox-precaching tự động tạo và duy trì.

Để lấy khoá bộ nhớ đệm chính xác, bạn có thể gọi getCacheKeyForURL(), truyền vào URL gốc, sau đó sử dụng kết quả để thực hiện cache.match() trên bộ nhớ đệm thích hợp.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

Ngoài ra, nếu tất cả những gì bạn cần là đối tượng Response được lưu vào bộ nhớ đệm trước, bạn có thể gọi matchPrecache(). Phương thức này sẽ tự động sử dụng khoá bộ nhớ đệm chính xác và tìm kiếm trong bộ nhớ đệm chính xác:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Lưu ý:Nếu đang sử dụng thực thể PrecacheController của riêng mình, thay vì sử dụng thực thể mặc định thông qua precacheAndRoute, bạn nên gọi phương thức matchPrecache() hoặc getCacheKeyForURL() trực tiếp trên thực thể đó.

Dọn dẹp bộ nhớ đệm trước cũ

Hầu hết các bản phát hành của Workbox đều duy trì cùng một định dạng để lưu trữ dữ liệu được lưu vào bộ nhớ đệm trước, và các bản lưu vào bộ nhớ đệm trước do các phiên bản Workbox cũ tạo ra thường có thể được sử dụng nguyên trạng bởi các bản phát hành mới hơn. Tuy nhiên, hiếm khi có thay đổi có thể gây lỗi trong bộ nhớ lưu vào bộ nhớ đệm trước, khiến người dùng hiện tại phải tải lại mọi thứ và khiến dữ liệu đã lưu vào bộ nhớ đệm trước đó trở nên lỗi thời. (Thay đổi như vậy đã xảy ra trong khoảng thời gian giữa các bản phát hành Workbox phiên bản 3 và 4.)

Dữ liệu lỗi thời này không được gây ảnh hưởng đến các hoạt động bình thường, nhưng sẽ góp phần làm tăng mức sử dụng hạn mức bộ nhớ tổng thể. Bạn nên xoá dữ liệu này một cách rõ ràng để người dùng cảm thấy thoải mái hơn. Bạn có thể thực hiện việc này bằng cách thêm cleanupOutdatedCaches() vào trình chạy dịch vụ hoặc đặt cleanupOutdatedCaches: true nếu bạn đang sử dụng một trong các công cụ bản dựng của Workbox để tạo trình chạy dịch vụ.

Sử dụng tính năng Tính toàn vẹn của tài nguyên phụ

Một số nhà phát triển có thể muốn có thêm các đảm bảo do việc thực thi tính toàn vẹn của tài nguyên phụ cung cấp khi truy xuất URL được lưu vào bộ nhớ đệm trước từ mạng.

Bạn có thể thêm một thuộc tính bổ sung, không bắt buộc có tên là integrity vào bất kỳ mục nhập nào trong tệp kê khai bộ nhớ đệm trước. Nếu được cung cấp, giá trị này sẽ được dùng làm giá trị integrity khi tạo Request dùng để điền vào bộ nhớ đệm. Nếu không khớp, quá trình lưu vào bộ nhớ đệm trước sẽ không thành công.

Việc xác định các mục nhập tệp kê khai bộ nhớ đệm trước cần có thuộc tính integrity và tìm ra các giá trị thích hợp để sử dụng nằm ngoài phạm vi của các công cụ xây dựng Workbox. Thay vào đó, những nhà phát triển muốn chọn sử dụng chức năng này nên sửa đổi tệp kê khai bộ nhớ đệm trước mà Workbox tạo để tự thêm thông tin phù hợp. Tuỳ chọn manifestTransform trong cấu hình công cụ bản dựng của Workbox có thể giúp:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

Loại

CleanupResult

Thuộc tính

• deletedCacheRequests

  string[]

InstallResult

Thuộc tính

• notUpdatedURLs

  string[]

• updatedURLs

  string[]

PrecacheController

Thực hiện lưu trước tài sản một cách hiệu quả.

Thuộc tính

• hàm khởi tạo

  void

  Tạo một PrecacheController mới.

  Hàm constructor có dạng như sau:

  (options?: PrecacheControllerOptions) => {...}

  • tùy chọn

    PrecacheControllerOptions không bắt buộc

  • returns

    PrecacheController

• chiến lược

  Chiến lược

• kích hoạt

  void

  Xoá các thành phần không còn có trong tệp kê khai lưu vào bộ nhớ đệm trước hiện tại. Gọi phương thức này từ sự kiện kích hoạt worker dịch vụ.

  Lưu ý: phương thức này sẽ gọi event.waitUntil() cho bạn, vì vậy, bạn không cần phải tự gọi phương thức này trong trình xử lý sự kiện.

  Hàm activate có dạng như sau:

  (event: ExtendableEvent) => {...}

  • event

    ExtendableEvent

  • returns

    Promise<CleanupResult>

• addToCacheList

  void

  Phương thức này sẽ thêm các mục vào danh sách lưu vào bộ nhớ đệm trước, xoá các mục trùng lặp và đảm bảo thông tin là hợp lệ.

  Hàm addToCacheList có dạng như sau:

  (entries: (string | PrecacheEntry)[]) => {...}

  • mục nhập

    (string | PrecacheEntry)[]

    Mảng các mục nhập để lưu vào bộ nhớ đệm trước.

• createHandlerBoundToURL

  void

  Trả về một hàm tra cứu url trong bộ nhớ đệm trước (có tính đến thông tin sửa đổi) và trả về Response tương ứng.

  Hàm createHandlerBoundToURL có dạng như sau:

  (url: string) => {...}

  • url

    chuỗi

    URL được lưu vào bộ nhớ đệm trước sẽ được dùng để tra cứu Response.

  • returns

    RouteHandlerCallback

• getCacheKeyForURL

  void

  Trả về khoá bộ nhớ đệm dùng để lưu trữ một URL nhất định. Nếu URL đó không có phiên bản, chẳng hạn như "/index.html", thì khoá bộ nhớ đệm sẽ là URL ban đầu có thêm một tham số tìm kiếm.

  Hàm getCacheKeyForURL có dạng như sau:

  (url: string) => {...}

  • url

    chuỗi

    URL có khoá bộ nhớ đệm mà bạn muốn tra cứu.

  • returns

    chuỗi

    URL có phiên bản tương ứng với khoá bộ nhớ đệm cho URL gốc hoặc không xác định nếu URL đó không được lưu vào bộ nhớ đệm trước.

• getCachedURLs

  void

  Trả về danh sách tất cả URL mà worker dịch vụ hiện tại đã lưu vào bộ nhớ đệm trước.

  Hàm getCachedURLs có dạng như sau:

  () => {...}

  • returns

    string[]

    Các URL được lưu vào bộ nhớ đệm trước.

• getIntegrityForCacheKey

  void

  Hàm getIntegrityForCacheKey có dạng như sau:

  (cacheKey: string) => {...}

  • cacheKey

    chuỗi

  • returns

    chuỗi

    Tính toàn vẹn của tài nguyên phụ được liên kết với khoá bộ nhớ đệm hoặc không xác định nếu không được đặt.

• getURLsToCacheKeys

  void

  Trả về mối liên kết của một URL được lưu vào bộ nhớ đệm trước với khoá bộ nhớ đệm tương ứng, có tính đến thông tin sửa đổi cho URL.

  Hàm getURLsToCacheKeys có dạng như sau:

  () => {...}

  • returns

    Map<stringstring>

    URL để lưu bản đồ ánh xạ phím vào bộ nhớ đệm.

• cài đặt

  void

  Lưu trước các thành phần mới và đã cập nhật. Gọi phương thức này từ sự kiện cài đặt worker dịch vụ.

  Lưu ý: phương thức này sẽ gọi event.waitUntil() cho bạn, vì vậy, bạn không cần phải tự gọi phương thức này trong trình xử lý sự kiện.

  Hàm install có dạng như sau:

  (event: ExtendableEvent) => {...}

  • event

    ExtendableEvent

  • returns

    Promise<InstallResult>

• matchPrecache

  void

  Phương thức này đóng vai trò thay thế cho cache.match() với những điểm khác biệt sau:

  • Trình duyệt biết tên của bộ nhớ đệm trước và chỉ kiểm tra trong bộ nhớ đệm đó.
  • Phương thức này cho phép bạn truyền vào một URL "gốc" không có tham số phiên bản và sẽ tự động tra cứu khoá bộ nhớ đệm chính xác cho bản sửa đổi hiện đang hoạt động của URL đó.

  Ví dụ: matchPrecache('index.html') sẽ tìm thấy phản hồi được lưu vào bộ nhớ đệm trước chính xác cho worker dịch vụ đang hoạt động, ngay cả khi khoá bộ nhớ đệm thực tế là '/index.html?__WB_REVISION__=1234abcd'.

  Hàm matchPrecache có dạng như sau:

  (request: string | Request) => {...}

  • request

    string | Yêu cầu

    Khoá (không có tham số sửa đổi) để tra cứu trong bộ nhớ đệm trước.

  • returns

    Promise<Response>

• lưu vào bộ nhớ đệm trước

  void

  Thêm các mục vào danh sách lưu vào bộ nhớ đệm trước, xoá mọi mục trùng lặp và lưu trữ các tệp trong bộ nhớ đệm" khi trình chạy dịch vụ cài đặt.

  Bạn có thể gọi phương thức này nhiều lần.

  Hàm precache có dạng như sau:

  (entries: (string | PrecacheEntry)[]) => {...}

  • mục nhập

    (string | PrecacheEntry)[]

PrecacheEntry

Thuộc tính

• tính toàn vẹn

  chuỗi không bắt buộc

• bản sửa đổi

  chuỗi không bắt buộc

• url

  chuỗi

PrecacheFallbackPlugin

PrecacheFallbackPlugin cho phép bạn chỉ định phản hồi "phương án dự phòng ngoại tuyến" để sử dụng khi một chiến lược nhất định không thể tạo phản hồi.

Trình bổ trợ này thực hiện việc này bằng cách chặn lệnh gọi lại trình bổ trợ handlerDidError và trả về một phản hồi được lưu vào bộ nhớ đệm trước, tự động tính đến tham số sửa đổi dự kiến.

Trừ phi bạn truyền một thực thể PrecacheController vào hàm khởi tạo một cách rõ ràng, hệ thống sẽ sử dụng thực thể mặc định. Nói chung, hầu hết các nhà phát triển sẽ sử dụng chế độ mặc định.

Thuộc tính

• hàm khởi tạo

  void

  Tạo một PrecacheFallbackPlugin mới với fallbackURL được liên kết.

  Hàm constructor có dạng như sau:

  (config: object) => {...}

  • config

    đối tượng

    • fallbackURL

      chuỗi

      URL được lưu vào bộ nhớ đệm trước để dùng làm dự phòng nếu chiến lược liên kết không thể tạo phản hồi.

    • precacheController

      PrecacheController không bắt buộc

  • returns

    PrecacheFallbackPlugin

PrecacheRoute

Một lớp con của workbox-routing.Route lấy một bản sao workbox-precaching.PrecacheController và sử dụng bản sao đó để so khớp các yêu cầu đến và xử lý việc tìm nạp phản hồi từ bộ nhớ đệm trước.

Thuộc tính

• hàm khởi tạo

  void

  Hàm constructor có dạng như sau:

  (precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}

  • precacheController

    PrecacheController

    Một thực thể PrecacheController dùng để so khớp các yêu cầu và phản hồi các sự kiện tìm nạp.

  • tùy chọn

    PrecacheRouteOptions không bắt buộc

  • returns

    PrecacheRoute

• catchHandler

  RouteHandlerObject không bắt buộc

• trình xử lý

  RouteHandlerObject

• phù hợp

  RouteMatchCallback

• method

  HTTPMethod

• setCatchHandler

  void

  Hàm setCatchHandler có dạng như sau:

  (handler: RouteHandler) => {...}

  • trình xử lý

    RouteHandler

    Hàm gọi lại trả về một Lời hứa phân giải thành một Phản hồi

PrecacheRouteOptions

Thuộc tính

• cleanURLs

  boolean không bắt buộc

• directoryIndex

  chuỗi không bắt buộc

• ignoreURLParametersMatching

  RegExp[] không bắt buộc

• urlManipulation

  urlManipulation không bắt buộc

PrecacheStrategy

Việc triển khai workbox-strategies.Strategy được thiết kế riêng để hoạt động với workbox-precaching.PrecacheController cho cả việc lưu vào bộ nhớ đệm và tìm nạp các thành phần được lưu vào bộ nhớ đệm trước.

Lưu ý: một thực thể của lớp này được tạo tự động khi tạo PrecacheController; thường thì bạn không cần tự tạo thực thể này.

Thuộc tính

• hàm khởi tạo

  void

  Hàm constructor có dạng như sau:

  (options?: PrecacheStrategyOptions) => {...}

  • tùy chọn

    PrecacheStrategyOptions không bắt buộc

  • returns

    PrecacheStrategy

• cacheName

  chuỗi

• fetchOptions

  RequestInit không bắt buộc

• matchOptions

  CacheQueryOptions không bắt buộc

• trình bổ trợ

  WorkboxPlugin[]

• copyRedirectedCacheableResponsesPlugin

  WorkboxPlugin

• defaultPrecacheCacheabilityPlugin

  WorkboxPlugin

• _awaitComplete

  void

  Hàm _awaitComplete có dạng như sau:

  (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

  • responseDone

    Promise<Response>

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

  Hàm _getResponse có dạng như sau:

  (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

  • event

    ExtendableEvent

  • returns

    Promise<Response>

• _handleFetch

  void

  Hàm _handleFetch có dạng như sau:

  (request: Request, handler: StrategyHandler) => {...}

  • request

    Yêu cầu

  • trình xử lý

    StrategyHandler

  • returns

    Promise<Response>

• _handleInstall

  void

  Hàm _handleInstall có dạng như sau:

  (request: Request, handler: StrategyHandler) => {...}

  • request

    Yêu cầu

  • trình xử lý

    StrategyHandler

  • returns

    Promise<Response>

• handle

  void

  Thực hiện chiến lược yêu cầu và trả về một Promise sẽ phân giải bằng Response, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.

  Khi một thực thể chiến lược được đăng ký bằng Workbox workbox-routing.Route, phương thức này sẽ tự động được gọi khi tuyến trùng khớp.

  Ngoài ra, bạn có thể sử dụng phương thức này trong trình nghe FetchEvent độc lập bằng cách truyền phương thức này đến event.respondWith().

  Hàm handle có dạng như sau:

  (options: FetchEvent | HandlerCallbackOptions) => {...}

  • tùy chọn

    FetchEvent | HandlerCallbackOptions

    FetchEvent hoặc một đối tượng có các thuộc tính được liệt kê bên dưới.

  • returns

    Promise<Response>

• handleAll

  void

  Tương tự như workbox-strategies.Strategy~handle, nhưng thay vì chỉ trả về một Promise phân giải thành Response, hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó giá trị trước đó (response) tương đương với giá trị mà handle() trả về và giá trị sau là một Lời hứa sẽ phân giải sau khi mọi lời hứa được thêm vào event.waitUntil() trong quá trình thực hiện chiến lược đã hoàn tất.

  Bạn có thể chờ lời hứa done để đảm bảo mọi công việc bổ sung do chiến lược thực hiện (thường là lưu phản hồi vào bộ nhớ đệm) đều hoàn tất thành công.

  Hàm handleAll có dạng như sau:

  (options: FetchEvent | HandlerCallbackOptions) => {...}

  • tùy chọn

    FetchEvent | HandlerCallbackOptions

    FetchEvent hoặc một đối tượng có các thuộc tính được liệt kê bên dưới.

  • returns

    [Promise<Response>, Promise<void>]

    Một bộ dữ liệu gồm các lời hứa [response, done] có thể được dùng để xác định thời điểm phản hồi phân giải cũng như thời điểm trình xử lý hoàn tất mọi công việc.

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

Loại

hàm

Tham số

• { url }

  đối tượng

  • url

    URL

Giá trị trả về

• URL[]

Phương thức

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

Thêm trình bổ trợ vào chiến lược lưu vào bộ nhớ đệm trước.

Tham số

• trình bổ trợ

  WorkboxPlugin[]

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

Thêm trình nghe fetch vào trình chạy dịch vụ. Trình nghe này sẽ phản hồi [yêu cầu mạng]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests bằng các thành phần được lưu trước vào bộ nhớ đệm.

Các yêu cầu về tài sản không được lưu vào bộ nhớ đệm trước, FetchEvent sẽ không được phản hồi, cho phép sự kiện chuyển sang trình nghe sự kiện fetch khác.

Tham số

• tùy chọn

  PrecacheRouteOptions không bắt buộc

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Thêm trình nghe sự kiện activate để dọn dẹp các bộ nhớ đệm trước không tương thích do các phiên bản Workbox cũ tạo.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Hàm trợ giúp gọi PrecacheController#createHandlerBoundToURL trên thực thể PrecacheController mặc định.

Nếu bạn đang tạo PrecacheController của riêng mình, hãy gọi PrecacheController#createHandlerBoundToURL trên thực thể đó thay vì sử dụng hàm này.

Tham số

• url

  chuỗi

  URL được lưu vào bộ nhớ đệm trước sẽ được dùng để tra cứu Response.

Giá trị trả về

• RouteHandlerCallback

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Nhận một URL và trả về URL tương ứng có thể dùng để truy vấn mục nhập trong bộ nhớ đệm trước.

Nếu bạn cung cấp URL tương đối, thì vị trí của tệp worker sẽ được dùng làm cơ sở.

Đối với các mục được lưu vào bộ nhớ đệm trước không có thông tin sửa đổi, khoá bộ nhớ đệm sẽ giống với URL gốc.

Đối với các mục được lưu vào bộ nhớ đệm trước có thông tin sửa đổi, khoá bộ nhớ đệm sẽ là URL ban đầu, thêm một tham số truy vấn dùng để theo dõi thông tin sửa đổi.

Tham số

• url

  chuỗi

  URL có khoá bộ nhớ đệm cần tra cứu.

Giá trị trả về

• string | undefined

  Khoá bộ nhớ đệm tương ứng với URL đó.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

Hàm trợ giúp gọi PrecacheController#matchPrecache trên thực thể PrecacheController mặc định.

Nếu bạn đang tạo PrecacheController của riêng mình, hãy gọi PrecacheController#matchPrecache trên thực thể đó thay vì sử dụng hàm này.

Tham số

• request

  string | Yêu cầu

  Khoá (không có tham số sửa đổi) để tra cứu trong bộ nhớ đệm trước.

Giá trị trả về

• Promise<Response | undefined>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

Thêm các mục vào danh sách lưu vào bộ nhớ đệm trước, xoá mọi mục trùng lặp và lưu trữ các tệp trong bộ nhớ đệm" khi trình chạy dịch vụ cài đặt.

Bạn có thể gọi phương thức này nhiều lần.

Xin lưu ý: Phương thức này sẽ không phân phát bất kỳ tệp nào được lưu vào bộ nhớ đệm cho bạn. Phương thức này chỉ lưu các tệp vào bộ nhớ đệm trước. Để phản hồi một yêu cầu mạng, bạn gọi workbox-precaching.addRoute.

Nếu có một mảng tệp để lưu vào bộ nhớ đệm trước, bạn chỉ cần gọi workbox-precaching.precacheAndRoute.

Tham số

• mục nhập

  (string | PrecacheEntry)[]

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

Phương thức này sẽ thêm các mục vào danh sách lưu vào bộ nhớ đệm trước và thêm một tuyến để phản hồi các sự kiện tìm nạp.

Đây là một phương thức thuận tiện sẽ gọi workbox-precaching.precache và workbox-precaching.addRoute trong một lệnh gọi.

Tham số

• mục nhập

  (string | PrecacheEntry)[]

  Mảng các mục nhập để lưu vào bộ nhớ đệm trước.

• tùy chọn

  PrecacheRouteOptions không bắt buộc