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

Một tính năng của trình chạy dịch vụ là khả năng lưu một nhóm tệp vào bộ nhớ đệm khi trình chạy 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 trình chạy dịch vụ được sử dụng.

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

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

Cách hoạt động của tính năng lưu trước vào bộ nhớ đệm

Khi một ứng dụng web được tải lần đầu tiên, workbox-precaching sẽ xem xét tất 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 của 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 tạo phiên bản (như hàm băm nội dung) sẽ được dùng làm khoá bộ nhớ đệm mà không cần sửa đổi thêm. Những URL không bao gồm thông tin lập 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, biểu thị hàm băm của nội dung mà Workbox tạo ra trong thời gian xây dựng.

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

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

Trình chạy 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 trình chạy đó được kích hoạt. Chính 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ó tài sản mới nhất và chỉ tải các tệp đã thay đổi xuống.

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

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

Chiến lược phản hồi được dùng trong tuyến này là ưu tiên bộ nhớ đệm: phản hồi được lưu trước vào bộ nhớ đệm sẽ được sử dụng, trừ phi phản hồi được lưu vào bộ nhớ đệm đó không có (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ự mà bạn gọi precacheAndRoute() hoặc addRoute() là 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 trình chạy dịch vụ trước khi đăng ký bất kỳ tuyến 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 mà bạn đã xác định trong tuyến bổ sung đó đều 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 bộ nhớ đệm

workbox-precaching yêu cầu một mảng các đố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 precache:

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 các URL, mỗi URL có một phần thông tin "sửa đổi" 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 về bản sửa đổi nằm trong chính URL. Đây thường là phương pháp hay nhất cho tài sả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à hàm băm được tạo tự động cho nội dung của tệp. Không giống như tài nguyên JavaScript và CSS, tệp HTML thường không được đưa thông tin sửa đổi vào URL, nếu không, đườ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 một thuộc tính sửa đổi vào precacheAndRoute(), Workbox có thể biết khi nào tệp thay đổi và cập nhật cho phù hợp.

Lưu ý: Các phiên bản trước của workbox-precaching cho phép tệp kê khai bộ nhớ đệm trước chứa URL chuỗi bên cạnh các đối tượng có thuộc tính url và revision. Trong phiên bản 5, tính năng này không được dùng nữa. Bây giờ, 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 thiết lập rõ ràng thuộc tính revision thành null. Tính năng chuyển một chuỗi sẽ tiếp tục hoạt động (kèm theo 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 hỗ trợ nữa.

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

• workbox-build: Đây là gói nút có thể được 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 gói web có thể sử dụng trình bổ trợ này.
• workbox-cli: CLI của chúng ta cũng có thể được dùng để tạo danh sách các thành phần và thêm các thành phần đó vào trình chạy dịch vụ.

Cảnh báo: Bạn nên dùng một trong các công cụ tạo của Workbox để tạo tệp kê khai bộ nhớ đệm trước này. Tuyệt đối không mã cứng thông tin sửa đổi vào tệp kê khai "viết tay", vì các URL được lưu trước vào bộ nhớ đệm sẽ không được cập nhật trừ phi 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 trước vào bộ nhớ đệm

workbox-precaching sẽ thực hiện ngay từ đầu để thao tác với các yêu cầu mạng đến để thử và so khớp các tệp được lưu trước vào bộ nhớ đệm. Điều này phù hợp với các phương pháp phổ biến trên web.

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

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 các tham số URL

Có thể thay đổi 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 tham 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á, tức là yêu cầu đối với /about.html?utm_campaign=abcd sẽ được thực hiện bằng một mục nhập được lưu trước vào bộ nhớ đệm 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, những yêu cầu kết thúc bằng / sẽ được so khớp với các mục nhập có index.html được thêm vào cuối. Điều này có nghĩa là hệ thống có thể tự động xử lý yêu cầu đến cho / bằng mục nhập /index.html được lưu trước vào bộ nhớ đệm.

Bạn có thể thay đổi tuỳ chọn này thành nội dung 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,
  }
);

Xoá URL

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

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 so khớp tuỳ chỉnh từ các yêu cầu được gửi đến đến tài sả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 nên là lệnh gọi lại trả về một loạt các kết quả phù hợp có thể xảy ra.

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

Trực tiếp sử dụng 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ụ, điều này có thể không như mong muốn nếu bạn cần kiểm soát nhiều hơn.

Thay vì sử dụng lệnh 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 tài sản được lưu trước vào bộ nhớ đệm

Đôi khi, bạn có thể cần đọc trực tiếp một tài sản được lưu trước vào bộ nhớ đệm, bên ngoài bối cảnh định tuyến mà workbox-precaching có thể tự động thực hiện. Ví dụ: bạn có thể muốn lưu trước một phần các mẫu HTML một phần vào bộ nhớ đệm mà sau đó cần được truy xuất và sử dụng khi tạo 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 trước vào bộ nhớ đệm, nhưng có một điểm hạn chế là khoá bộ nhớ đệm URL cần dùng khi gọi cache.match() có thể chứa tham số 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 URL ban đầu rồi 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 trước vào bộ nhớ đệm, bạn có thể gọi matchPrecache(). Thao tác này sẽ tự động sử dụng đúng khoá bộ nhớ đệm và tìm kiếm trong đúng bộ nhớ đệm:

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 thì thay vì sử dụng thực thể mặc định thông qua precacheAndRoute, bạn nên gọi trực tiếp phương thức matchPrecache() hoặc getCacheKeyForURL() trên thực thể đó.

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

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

Dữ liệu lỗi thời này không nên làm ảnh hưởng đến hoạt động thông thường, nhưng sẽ góp phần vào tổng mức sử dụng bộ nhớ của bạn, đồng thời người dùng có thể dễ dàng xoá dữ liệu đó 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ụ xây dựng của Workbox để tạo trình chạy dịch vụ.

Sử dụ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 sự đảm bảo qua việc thực thi tính toàn vẹn của tài nguyên phụ khi truy xuất các URL được lưu trước vào bộ nhớ đệm 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 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 có kết quả không khớp, quá trình lưu trước vào bộ nhớ đệm sẽ không thành công.

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

  chuỗi[]

InstallResult

Thuộc tính

• notUpdatedURLs

  chuỗi[]

• updatedURLs

  chuỗi[]

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 PrecacheController mới.

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

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

  • tùy chọn

    PrecacheControllerOptions không bắt buộc

  • giá trị trả về

    PrecacheController

• chiến thuật

  Chiến lược

• kích hoạt

  void

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

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

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

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

  • event

    ExtendableEvent

  • giá trị trả về

    Promise<CleanupResult>

• addToCacheList

  void

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

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

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

  • mục nhập

    (chuỗi | PrecacheEntry)[]

    Một loạt các mục nhập cần lưu vào bộ nhớ đệm.

• 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 tài khoản) và trả về Response tương ứng.

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

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

  • url

    string

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

  • giá trị trả về

    RouteHandlerCallback

• getCacheKeyForURL

  void

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

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

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

  • url

    string

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

  • giá trị trả về

    string

    URL đã tạo 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 trước vào bộ nhớ đệm.

• getCachedURLs

  void

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

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

  () => {...}

  • giá trị trả về

    chuỗi[]

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

• getIntegrityForCacheKey

  void

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

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

  • cacheKey

    string

  • giá trị trả về

    string

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

• getURLsToCacheKeys

  void

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

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

  () => {...}

  • giá trị trả về

    Bản đồ<string>

    Một URL để ánh xạ khoá vào bộ nhớ đệm.

• cài đặt

  void

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

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

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

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

  • event

    ExtendableEvent

  • giá trị trả về

    Promise<InstallResult>

• matchPrecache

  void

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

  • Nó 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 chuyển URL "gốc" mà không cần tham số phiên bản, đồng thời 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 chính xác được lưu vào bộ nhớ đệm trước cho trình thực thi 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 sẽ có dạng như sau:

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

  • request

    chuỗi | 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ề

    Hứa hẹn<Phản hồi>

• bộ nhớ đệm trước

  void

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

  Phương thức này có thể được gọi nhiều lần.

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

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

  • mục nhập

    (chuỗi | 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

  string

PrecacheFallbackPlugin

PrecacheFallbackPlugin cho phép bạn chỉ định phản hồi "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 trước vào bộ nhớ đệm, tự động xem xét tham số sửa đổi dự kiến.

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

Thuộc tính

• hàm khởi tạo

  void

  Tạo một PrecacheFallbackPlugin mới có URL dự phòng được liên kết.

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

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

  • cấu hình

    đối tượng

    • fallbackURL

      string

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

    • precacheController

      PrecacheController không bắt buộc

  • giá trị trả về

    PrecacheFallbackPlugin

PrecacheRoute

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

Thuộc tính

• hàm khởi tạo

  void

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

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

  • precacheController

    PrecacheController

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

  • tùy chọn

    PrecacheRouteOptions không bắt buộc

  • giá trị trả về

    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 sẽ có dạng như sau:

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

  • trình xử lý

    RouteHandler

    Một hàm callback trả về một Hứa hẹn sẽ giải quyết 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

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

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

Thuộc tính

• hàm khởi tạo

  void

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

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

  • tùy chọn

    PrecacheStrategyOptions không bắt buộc

  • giá trị trả về

    PrecacheStrategy

• cacheName

  string

• 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

• _Hoàn tất chờ

  void

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

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

  • responseDone

    Hứa hẹn<Phản hồi>

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

  • event

    ExtendableEvent

  • giá trị trả về

    Promise<void>

• _getResponse

  void

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

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

  • event

    ExtendableEvent

  • giá trị trả về

    Hứa hẹn<Phản hồi>

• _handleFetch

  void

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

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

  • request

    Yêu cầu

  • trình xử lý

    StrategyHandler

  • giá trị trả về

    Hứa hẹn<Phản hồi>

• _handleInstall

  void

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

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

  • request

    Yêu cầu

  • trình xử lý

    StrategyHandler

  • giá trị trả về

    Hứa hẹn<Phản hồi>

• handle

  void

  Thực hiện chiến lược yêu cầu và trả về một Promise mà sẽ phân giải bằng Response, gọi tất cả cá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 một trình nghe FetchEvent độc lập bằng cách truyền phương thức đó vào event.respondWith().

  Hàm handle sẽ 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ê dưới đây.

  • giá trị trả về

    Hứa hẹn<Phản hồi>

• 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 [response, done] lời hứa, trong đó câu lệnh trước (response) tương đương với kết quả mà handle() trả về, và câu lệnh thứ hai là một Lời hứa sẽ giải quyết sau khi bất kỳ hứa hẹn nào đượ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 thao tác bổ sung mà chiến lược này thực hiện (thường là các phản hồi lưu vào bộ nhớ đệm) đã hoàn tất thành công.

  Hàm handleAll sẽ 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ê dưới đây.

  • giá trị trả về

    [Promise<Response>, Promise<void>]

    Một bộ dữ liệu gồm [response, done] hứa hẹn có thể dùng để xác định thời điểm phản hồi được 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 trước vào bộ nhớ đệm.

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 với các tài sản được lưu trước vào bộ nhớ đệm.

Yêu cầu đối với tài sản không được lưu trước vào bộ nhớ đệm, FetchEvent sẽ không được phản hồi, cho phép sự kiện chuyển đến các 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 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

  string

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

Giá trị trả về

• RouteHandlerCallback

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

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

Đối với các mục nhập được lưu trước vào bộ nhớ đệm mà 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 nhập được lưu trước vào bộ nhớ đệm có thông tin về bản sửa đổi, khoá bộ nhớ đệm sẽ là URL gốc, kèm theo việc bổ sung một tham số truy vấn dùng để theo dõi thông tin về bản sửa đổi.

Tham số

• url

  string

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

Giá trị trả về

• chuỗi | không xác định

  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

  chuỗi | 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 bộ nhớ đệm trước, xoá mọi bản sao và lưu trữ tệp trong bộ nhớ đệm" khi trình chạy dịch vụ cài đặt.

Phương thức này có thể được gọi nhiều lần.

Xin lưu ý: Phương pháp 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. Tính năng 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 cần gọi workbox-precaching.addRoute.

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

Tham số

• mục nhập

  (chuỗi | PrecacheEntry)[]

precacheAndRoute()

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

Phương thức này sẽ thêm các mục nhập vào danh sách 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 tiện lợi sẽ gọi workbox-precaching.precache và workbox-precaching.addRoute trong một lệnh gọi.

Tham số

• mục nhập

  (chuỗi | PrecacheEntry)[]

  Một loạt các mục nhập cần lưu vào bộ nhớ đệm.

• tùy chọn

  PrecacheRouteOptions không bắt buộc