chiến lược hộp công việc

Khi trình chạy dịch vụ được giới thiệu lần đầu tiên, một tập hợp các chiến lược lưu vào bộ nhớ đệm phổ biến đã xuất hiện. Chiến lược lưu vào bộ nhớ đệm là một mẫu xác định cách trình chạy dịch vụ sẽ tạo phản hồi sau khi nhận được sự kiện tìm nạp.

workbox-strategies cung cấp các chiến lược lưu vào bộ nhớ đệm phổ biến nhất để bạn có thể dễ dàng hãy áp dụng chúng trong trình chạy dịch vụ của bạn.

Chúng tôi sẽ không đi vào chi tiết ngoài các chiến lược mà Workbox hỗ trợ, nhưng bạn có thể tìm hiểu thêm trong Sổ tay nấu ăn ngoại tuyến.

Sử dụng các chiến lược

Trong các ví dụ sau, chúng tôi sẽ hướng dẫn bạn cách sử dụng tính năng lưu vào bộ nhớ đệm của Hộp công việc với workbox-routing. Có một số lựa chọn bạn có thể xác định bằng mỗi chiến lược được đề cập trong Định cấu hình phần Chiến lược trong tài liệu này.

Trong phần Sử dụng nâng cao, chúng tôi sẽ đề cập đến cách bạn có thể sử dụng các chiến lược lưu vào bộ nhớ đệm trực tiếp mà không cần workbox-routing.

Lỗi thời trong khi xác thực lại

Sơ đồ lỗi thời trong khi xác thực lại

Chế độ cũ trong khi xác thực lại cho phép bạn phản hồi yêu cầu nhanh nhất có thể bằng phản hồi được lưu vào bộ nhớ đệm nếu có, sẽ quay lại yêu cầu mạng nếu có chưa được lưu vào bộ nhớ đệm. Sau đó, yêu cầu mạng được dùng để cập nhật bộ nhớ đệm. Trái ngược với một số cách triển khai cũ trong khi xác thực lại, chiến lược này sẽ luôn đưa ra yêu cầu xác thực lại, bất kể tuổi của phản hồi được lưu vào bộ nhớ đệm.

Đây là một chiến lược khá phổ biến, trong đó việc có nguồn tài nguyên mới nhất không quan trọng đối với ứng dụng.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Bộ nhớ đệm trước tiên (Bộ nhớ đệm quay lại mạng)

Sơ đồ bộ nhớ đệm đầu tiên

Các ứng dụng web ngoại tuyến sẽ phụ thuộc nhiều vào bộ nhớ đệm, nhưng các nội dung không quan trọng và có thể dần được lưu vào bộ nhớ đệm, lưu vào bộ nhớ đệm trước là lựa chọn tốt nhất.

Nếu có Phản hồi trong bộ nhớ đệm, thì Yêu cầu sẽ được thực hiện bằng cách sử dụng phản hồi đã lưu vào bộ nhớ đệm và sẽ không sử dụng mạng. Nếu không có tệp được lưu vào bộ nhớ đệm thì Yêu cầu sẽ được thực hiện bằng một yêu cầu mạng và phản hồi sẽ được lưu vào bộ nhớ đệm để yêu cầu tiếp theo được phân phát trực tiếp từ bộ nhớ đệm đó.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Mạng trước tiên (Mạng chuyển về bộ nhớ đệm)

Sơ đồ mạng đầu tiên

Đối với các yêu cầu được cập nhật thường xuyên, mạng lưới trước tiên chính là giải pháp lý tưởng. Theo mặc định, Chrome sẽ cố gắng tìm nạp dữ liệu mới nhất phản hồi từ mạng. Nếu yêu cầu thành công, hệ thống sẽ đặt phản hồi trong bộ nhớ đệm. Nếu mạng không trả về phản hồi, thì phản hồi đã lưu vào bộ nhớ đệm sẽ được sử dụng.

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Chỉ mạng

Sơ đồ chỉ mạng

Nếu bạn yêu cầu thực hiện các yêu cầu cụ thể từ mạng, chỉ mạng là chiến lược nên sử dụng.

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Chỉ bộ nhớ đệm

Sơ đồ chỉ lưu vào bộ nhớ đệm

Chỉ bộ nhớ đệm đảm bảo rằng phản hồi được lấy từ bộ nhớ đệm. Trường hợp này ít phổ biến hơn trong hộp công việc, nhưng có thể hữu ích nếu bạn có bước chuẩn bị bộ nhớ đệm của riêng mình.

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

Định cấu hình chiến lược

Tất cả các chiến lược cho phép bạn định cấu hình:

  • Tên của bộ nhớ đệm sẽ sử dụng trong chiến lược.
  • Các hạn chế khi hết hạn bộ nhớ đệm để sử dụng trong chiến lược.
  • Một loạt trình bổ trợ sẽ có phương thức vòng đời được gọi khi tìm nạp và lưu yêu cầu vào bộ nhớ đệm.

Thay đổi bộ nhớ đệm mà chiến lược sử dụng

Bạn có thể thay đổi chiến lược cho bộ nhớ đệm bằng cách cung cấp tên bộ nhớ đệm. Đây là hữu ích nếu bạn muốn tách riêng các thành phần để hỗ trợ gỡ lỗi.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Sử dụng trình bổ trợ

Workbox đi kèm với một bộ trình bổ trợ có thể sử dụng với các chiến lược này.

Để sử dụng bất kỳ trình bổ trợ nào trong số này (hoặc trình bổ trợ tuỳ chỉnh), bạn chỉ cần chuyển thực thể vào tuỳ chọn plugins.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

Chiến lược tuỳ chỉnh

Ngoài việc định cấu hình chiến lược, Workbox cho phép bạn tạo các chiến lược tuỳ chỉnh của riêng mình. Bạn có thể thực hiện việc này bằng cách nhập và mở rộng lớp cơ sở Strategy từ workbox-strategies:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

Trong ví dụ này, handle() được dùng làm chiến lược yêu cầu để xác định logic xử lý cụ thể. Có là hai chiến lược yêu cầu mà bạn có thể sử dụng:

  • handle(): Thực hiện chiến lược yêu cầu và trả về Promise sẽ phân giải bằng Response, gọi tất cả lệnh gọi lại trình bổ trợ liên quan.
  • handleAll(): Tương tự như handle() nhưng trả về 2 đối tượng Promise. Đầu tiên là tương đương với giá trị handle() trả về và lượt thứ hai sẽ phân giải khi đã hứa được thêm vào event.waitUntil() trong chiến lược đã hoàn tất.

Cả hai chiến lược yêu cầu đều được gọi bằng 2 tham số:

  • request: Request mà chiến lược sẽ trả về phản hồi.
  • handler: Một thực thể StrategyHandler được tạo tự động cho chiến lược hiện tại.

Tạo một chiến lược mới

Sau đây là ví dụ về một chiến lược mới triển khai lại hành vi của NetworkOnly:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Hãy lưu ý cách gọi handler.fetch() thay vì phương thức fetch gốc. StrategyHandler lớp này sẽ cung cấp một số thao tác tìm nạp và lưu vào bộ nhớ đệm có thể được dùng bất cứ khi nào handle() hoặc handleAll() được dùng:

  • fetch: Tìm nạp một yêu cầu nhất định và gọi requestWillFetch(), fetchDidSucceed() và Phương thức vòng đời của trình bổ trợ fetchDidFail()
  • cacheMatch: So khớp một yêu cầu từ bộ nhớ đệm rồi gọi cacheKeyWillBeUsed() và Phương thức vòng đời của trình bổ trợ cachedResponseWillBeUsed()
  • cachePut: Đặt một cặp yêu cầu/phản hồi vào bộ nhớ đệm và gọi cacheKeyWillBeUsed(), Các phương thức vòng đời của trình bổ trợ cacheWillUpdate() và cacheDidUpdate()
  • fetchAndCachePut: Gọi fetch() và chạy cachePut() ở chế độ nền trên phản hồi do fetch() tạo.
  • hasCallback: Lấy lệnh gọi lại làm dữ liệu đầu vào và trả về giá trị true nếu chiến lược có ít nhất một trình bổ trợ bằng lệnh gọi lại đã cho.
  • runCallbacks: Chạy tất cả các lệnh gọi lại trình bổ trợ khớp với một tên cụ thể theo thứ tự, truyền một thông số nhất định đối tượng (được hợp nhất với trạng thái trình bổ trợ hiện tại) làm đối số duy nhất.
  • iterateCallbacks: Chấp nhận một lệnh gọi lại và trả về một lệnh gọi lại có thể lặp lại của các lệnh gọi lại trình bổ trợ phù hợp, trong đó mỗi lệnh gọi lại được gói bằng trạng thái trình xử lý hiện tại (tức là khi bạn gọi mỗi lệnh gọi lại, bất kỳ thông số đối tượng nào bạn truyền, tham số đó sẽ được hợp nhất với trạng thái hiện tại của trình bổ trợ).
  • waitUntil: Thêm lời hứa vào thời gian dài hơn cam kết toàn thời gian của sự kiện liên kết với được xử lý (thường là FetchEvent).
  • doneWaiting: Trả về lời hứa sẽ được giải quyết sau khi tất cả lời hứa được chuyển cho waitUntil() đã được thực hiện đã giải quyết.
  • destroy: Ngừng chạy chiến lược và ngay lập tức giải quyết mọi lời hứa waitUntil() đang chờ xử lý.

Chiến lược cạnh tranh mạng bộ nhớ đệm tuỳ chỉnh

Ví dụ sau đây dựa trên cache-network-race từ Sổ tay nấu ăn ngoại tuyến (mà Workbox không cung cấp), nhưng tiến một bước xa hơn và luôn cập nhật lưu vào bộ nhớ đệm sau khi yêu cầu mạng thành công. Đây là ví dụ về một chiến lược phức tạp hơn sử dụng nhiều thao tác.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

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

Nếu muốn sử dụng các chiến lược này trong logic tìm nạp sự kiện của riêng mình, bạn có thể sử dụng các lớp chiến lược để chạy yêu cầu thông qua một chiến lược cụ thể.

Ví dụ: để sử dụng chiến lược cũ trong khi xác thực lại, bạn có thể thực hiện sau:

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

Bạn có thể xem danh sách các lớp học hiện có trong tài liệu tham khảo về chiến lược của Workbox.

Loại

CacheFirst

Triển khai cơ chế ưu tiên bộ nhớ đệm .

Chiến lược ưu tiên sử dụng bộ nhớ đệm sẽ hữu ích cho những nội dung đã được sửa đổi, chẳng hạn như URL như /styles/example.a8f5f1.css vì chúng có thể được lưu vào bộ nhớ đệm trong thời gian dài.

Nếu yêu cầu mạng không thành công và không có kết quả nào khớp với bộ nhớ đệm, thì lệnh này sẽ gửi ngoại lệ WorkboxError.

Thuộc tính

  • hàm khởi tạo

    void

    Tạo một phiên bản mới của chiến lược và đặt tất cả các tùy chọn được ghi lại trong tài liệu làm thuộc tính của đối tượng công khai.

    Lưu ý: nếu lớp chiến lược tuỳ chỉnh mở rộng lớp Chiến lược cơ bản và không cần nhiều hơn những thuộc tính này, nên không cần xác định hàm khởi tạo.

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

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

  • cacheName

    string

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise&lt;Response&gt;

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • returns

      Lời hứa<vô hiệu>

  • _getResponse

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • handle

    void

    Thực hiện chiến lược yêu cầu và trả về 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 được tự động được gọi khi tuyến đường này khớp.

    Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một FetchEvent độc lập trình nghe bằng cách truyền tham số đó đế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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      Promise&lt;Response&gt;

  • 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, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó (response) tương đương với kết quả trả về của handle() và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tất event.waitUntil() trong quá trình thực hiện chiến lược.

    Bạn có thể chờ đợi lời hứa done để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) 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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      [Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]

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

CacheOnly

Việc triển khai chế độ chỉ dành cho bộ nhớ đệm .

Lớp này rất hữu ích nếu bạn muốn tận dụng bất kỳ Trình bổ trợ hộp làm việc.

Nếu không có kết quả trùng khớp với bộ nhớ đệm, thì thao tác này sẽ gửi một ngoại lệ WorkboxError.

Thuộc tính

  • hàm khởi tạo

    void

    Tạo một phiên bản mới của chiến lược và đặt tất cả các tùy chọn được ghi lại trong tài liệu làm thuộc tính của đối tượng công khai.

    Lưu ý: nếu lớp chiến lược tuỳ chỉnh mở rộng lớp Chiến lược cơ bản và không cần nhiều hơn những thuộc tính này, nên không cần xác định hàm khởi tạo.

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

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

  • cacheName

    string

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise&lt;Response&gt;

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • returns

      Lời hứa<vô hiệu>

  • _getResponse

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • handle

    void

    Thực hiện chiến lược yêu cầu và trả về 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 được tự động được gọi khi tuyến đường này khớp.

    Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một FetchEvent độc lập trình nghe bằng cách truyền tham số đó đế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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      Promise&lt;Response&gt;

  • 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, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó (response) tương đương với kết quả trả về của handle() và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tất event.waitUntil() trong quá trình thực hiện chiến lược.

    Bạn có thể chờ đợi lời hứa done để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) 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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      [Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]

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

NetworkFirst

Việc triển khai một mạng lưới trước tiên .

Theo mặc định, chiến lược này sẽ lưu các phản hồi có mã trạng thái 200 vào bộ nhớ đệm dưới dạng cũng như các phản hồi không rõ ràng. Phản hồi mờ là các yêu cầu trên nhiều nguồn gốc, trong đó phản hồi không làm như vậy hỗ trợ CORS.

Nếu yêu cầu mạng không thành công và không có kết quả nào khớp với bộ nhớ đệm, thì lệnh này sẽ gửi ngoại lệ WorkboxError.

Thuộc tính

  • hàm khởi tạo

    void

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

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

  • cacheName

    string

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise&lt;Response&gt;

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • returns

      Lời hứa<vô hiệu>

  • _getResponse

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • handle

    void

    Thực hiện chiến lược yêu cầu và trả về 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 được tự động được gọi khi tuyến đường này khớp.

    Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một FetchEvent độc lập trình nghe bằng cách truyền tham số đó đế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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      Promise&lt;Response&gt;

  • 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, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó (response) tương đương với kết quả trả về của handle() và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tất event.waitUntil() trong quá trình thực hiện chiến lược.

    Bạn có thể chờ đợi lời hứa done để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) 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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      [Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]

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

NetworkFirstOptions

Thuộc tính

  • cacheName

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

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • networkTimeoutSeconds

    số không bắt buộc

  • trình bổ trợ

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

NetworkOnly

Việc triển khai một chỉ với mạng .

Lớp này rất hữu ích nếu bạn muốn tận dụng bất kỳ Trình bổ trợ hộp làm việc.

Nếu yêu cầu mạng không thành công, thì thao tác này sẽ gửi một ngoại lệ WorkboxError.

Thuộc tính

  • hàm khởi tạo

    void

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

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

  • cacheName

    string

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise&lt;Response&gt;

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • returns

      Lời hứa<vô hiệu>

  • _getResponse

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • handle

    void

    Thực hiện chiến lược yêu cầu và trả về 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 được tự động được gọi khi tuyến đường này khớp.

    Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một FetchEvent độc lập trình nghe bằng cách truyền tham số đó đế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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      Promise&lt;Response&gt;

  • 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, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó (response) tương đương với kết quả trả về của handle() và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tất event.waitUntil() trong quá trình thực hiện chiến lược.

    Bạn có thể chờ đợi lời hứa done để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) 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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      [Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]

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

NetworkOnlyOptions

Thuộc tính

  • fetchOptions

    RequestInit không bắt buộc

  • networkTimeoutSeconds

    số không bắt buộc

  • trình bổ trợ

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

StaleWhileRevalidate

Việc triển khai một cũ trong khi xác thực lại .

Các tài nguyên được yêu cầu song song từ cả bộ nhớ đệm và mạng. Chiến lược sẽ phản hồi bằng phiên bản đã lưu vào bộ nhớ đệm nếu có, nếu không đợi phản hồi mạng. Bộ nhớ đệm được cập nhật bằng phản hồi mạng với mỗi yêu cầu thành công.

Theo mặc định, chiến lược này sẽ lưu các phản hồi có mã trạng thái 200 vào bộ nhớ đệm dưới dạng cũng như các phản hồi không rõ ràng. Phản hồi mờ là các yêu cầu trên nhiều nguồn gốc, trong đó phản hồi không làm như vậy hỗ trợ CORS.

Nếu yêu cầu mạng không thành công và không có kết quả nào khớp với bộ nhớ đệm, thì lệnh này sẽ gửi ngoại lệ WorkboxError.

Thuộc tính

  • hàm khởi tạo

    void

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

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

  • cacheName

    string

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise&lt;Response&gt;

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • returns

      Lời hứa<vô hiệu>

  • _getResponse

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • handle

    void

    Thực hiện chiến lược yêu cầu và trả về 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 được tự động được gọi khi tuyến đường này khớp.

    Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một FetchEvent độc lập trình nghe bằng cách truyền tham số đó đế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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      Promise&lt;Response&gt;

  • 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, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó (response) tương đương với kết quả trả về của handle() và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tất event.waitUntil() trong quá trình thực hiện chiến lược.

    Bạn có thể chờ đợi lời hứa done để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) 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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      [Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]

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

Strategy

Một lớp cơ sở trừu tượng mà mọi lớp chiến lược khác phải mở rộng:

Thuộc tính

  • hàm khởi tạo

    void

    Tạo một phiên bản mới của chiến lược và đặt tất cả các tùy chọn được ghi lại trong tài liệu làm thuộc tính của đối tượng công khai.

    Lưu ý: nếu lớp chiến lược tuỳ chỉnh mở rộng lớp Chiến lược cơ bản và không cần nhiều hơn những thuộc tính này, nên không cần xác định hàm khởi tạo.

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

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

  • cacheName

    string

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

    WorkboxPlugin[]

  • _awaitComplete

    void

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

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

    • responseDone

      Promise&lt;Response&gt;

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • returns

      Lời hứa<vô hiệu>

  • _getResponse

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • _handle

    void

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

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

    • returns

      Promise&lt;Response&gt;

  • handle

    void

    Thực hiện chiến lược yêu cầu và trả về 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 được tự động được gọi khi tuyến đường này khớp.

    Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một FetchEvent độc lập trình nghe bằng cách truyền tham số đó đế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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      Promise&lt;Response&gt;

  • 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, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa [response, done], trong đó (response) tương đương với kết quả trả về của handle() và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tất event.waitUntil() trong quá trình thực hiện chiến lược.

    Bạn có thể chờ đợi lời hứa done để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) 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ó phần tử các thuộc tính được liệt kê bên dưới.

    • returns

      [Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]

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

StrategyHandler

Một lớp được tạo mỗi khi một thực thể của Chiến lược gọi workbox-strategies.Strategy~handle hoặc workbox-strategies.Strategy~handleAll gói tất cả phương thức tìm nạp và các hành động lưu vào bộ nhớ đệm xung quanh lệnh gọi lại trình bổ trợ và theo dõi thời điểm chiến lược là "hoàn tất" (tức là mọi hứa hẹn event.waitUntil() được thêm vào đã được giải quyết).

Thuộc tính

  • hàm khởi tạo

    void

    Tạo một thực thể mới liên kết với chiến lược và sự kiện đã truyền đang xử lý yêu cầu.

    Hàm khởi tạo cũng khởi tạo trạng thái sẽ được truyền cho mỗi các trình bổ trợ xử lý yêu cầu này.

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

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • event

    ExtendableEvent

  • tham số

    bất kỳ không bắt buộc

  • request

    Yêu cầu

  • url

    URL không bắt buộc

  • cacheMatch

    void

    So khớp một yêu cầu từ bộ nhớ đệm (và gọi bất kỳ trình bổ trợ nào thích hợp phương thức gọi lại) bằng cách sử dụng cacheName, matchOptions và plugins được xác định trên đối tượng chiến lược.

    Các phương thức trong vòng đời của trình bổ trợ sau đây sẽ được gọi khi sử dụng phương thức này:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

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

    (key: RequestInfo) => {...}

    • phím

      RequestInfo

      Yêu cầu hoặc URL để sử dụng làm khoá bộ nhớ đệm.

    • returns

      Promise&lt;Response&gt;

      Phản hồi trùng khớp, nếu tìm thấy.

  • cachePut

    void

    Đặt một cặp yêu cầu/phản hồi vào bộ nhớ đệm (và gọi bất kỳ cặp yêu cầu/phản hồi nào có thể áp dụng) phương thức gọi lại trình bổ trợ) bằng cách sử dụng cacheName và plugins được xác định trên làm đối tượng chiến lược.

    Các phương thức trong vòng đời của trình bổ trợ sau đây sẽ được gọi khi sử dụng phương thức này:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

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

    (key: RequestInfo, response: Response) => {...}

    • phím

      RequestInfo

      Yêu cầu hoặc URL để sử dụng làm khoá bộ nhớ đệm.

    • phản hồi

      Phản hồi

      Phản hồi cho bộ nhớ đệm.

    • returns

      Promise&lt;boolean&gt;

      false nếu cacheWillUpdate gây ra phản hồi không được lưu vào bộ nhớ đệm và nếu không thì true.

  • hủy bỏ

    void

    Ngừng chạy chiến lược và ngay lập tức giải quyết mọi vấn đề đang chờ xử lý waitUntil() hứa hẹn.

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

    () => {...}

  • doneWaiting

    void

    Trả về lời hứa sẽ giải quyết sau khi tất cả lời hứa được chuyển đến workbox-strategies.StrategyHandler~waitUntil đã giải quyết.

    Lưu ý: mọi công việc được thực hiện sau khi doneWaiting() thanh toán đều phải được thực hiện theo cách thủ công được chuyển đến phương thức waitUntil() của một sự kiện (không phải phương thức của trình xử lý này waitUntil()), nếu không thì luồng trình chạy dịch vụ sẽ bị giết trước khi hoàn tất công việc.

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

    () => {...}

    • returns

      Lời hứa<vô hiệu>

  • tìm nạp

    void

    Tìm nạp một yêu cầu nhất định (và gọi mọi lệnh gọi lại trình bổ trợ thích hợp phương thức) bằng cách sử dụng fetchOptions (đối với các yêu cầu không phải điều hướng) và plugins được xác định trên đối tượng Strategy.

    Các phương thức trong vòng đời của trình bổ trợ sau đây sẽ được gọi khi sử dụng phương thức này:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

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

    (input: RequestInfo) => {...}

    • input

      RequestInfo

      URL hoặc yêu cầu tìm nạp.

    • returns

      Promise&lt;Response&gt;

  • fetchAndCachePut

    void

    Gọi this.fetch() và (trong nền) chạy this.cachePut() trên phản hồi được tạo bởi this.fetch().

    Cuộc gọi đến this.cachePut() sẽ tự động gọi this.waitUntil(), nên bạn không phải gọi waitUntil() trên sự kiện theo cách thủ công.

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

    (input: RequestInfo) => {...}

    • input

      RequestInfo

      Yêu cầu hoặc URL cần tìm nạp và lưu vào bộ nhớ đệm.

    • returns

      Promise&lt;Response&gt;

  • getCacheKey

    void

    Kiểm tra danh sách trình bổ trợ cho lệnh gọi lại cacheKeyWillBeUsed và thực thi bất kỳ lệnh gọi lại nào trong số đó theo trình tự. Vòng chung kết Request đối tượng do trình bổ trợ gần đây nhất trả về được coi là khoá bộ nhớ đệm cho bộ nhớ đệm đọc và/hoặc ghi. Nếu không có lệnh gọi lại trình bổ trợ cacheKeyWillBeUsed nào có được đăng ký, yêu cầu đã chuyển được trả về ở dạng chưa sửa đổi

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

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • request

      Yêu cầu

    • chế độ

      "đọc"
       | "viết"

    • returns

      Promise&lt;Request&gt;

  • hasCallback

    void

    Trả về true nếu chiến lược có ít nhất một trình bổ trợ với giá trị .

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

    (name: C) => {...}

    • tên

      C

      Tên của lệnh gọi lại cần kiểm tra.

    • returns

      boolean

  • iterateCallbacks

    void

    Chấp nhận một lệnh gọi lại và trả về một lệnh gọi lại có thể lặp lại của các lệnh gọi lại trình bổ trợ phù hợp, trong đó mỗi lệnh gọi lại được gói bằng trạng thái trình xử lý hiện tại (tức là khi bạn gọi mỗi lệnh gọi lại, bất kỳ tham số đối tượng nào bạn truyền nó sẽ được hợp nhất với trạng thái hiện tại của trình bổ trợ).

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

    (name: C) => {...}

    • tên

      C

      Tên cho lệnh gọi lại sẽ chạy

    • returns

      Trình tạo<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    Chạy tất cả các lệnh gọi lại trình bổ trợ khớp với tên đã cho theo thứ tự, truyền giá trị đối tượng tham số nhất định (hợp nhất trạng thái trình bổ trợ hiện tại) làm đối tượng duy nhất đối số.

    Lưu ý: vì phương thức này chạy tất cả các trình bổ trợ nên nó không phù hợp với các trường hợp trong đó giá trị trả về của lệnh gọi lại cần được áp dụng trước khi gọi lệnh gọi lại tiếp theo. Xem workbox-strategies.StrategyHandler#iterateCallbacks bên dưới để biết cách xử lý trường hợp đó.

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

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • tên

      C

      Tên của lệnh gọi lại để chạy trong mỗi trình bổ trợ.

    • tham số

      Bỏ qua <indexedAccess"state"
      >

      Đối tượng cần truyền dưới dạng tham số đầu tiên (và duy nhất) khi thực thi từng lệnh gọi lại. Đối tượng này sẽ được hợp nhất với trạng thái hiện tại của trình bổ trợ trước khi thực thi lệnh gọi lại.

    • returns

      Lời hứa<vô hiệu>

  • waitUntil

    void

    Thêm lời hứa vào [mở rộng hứa hẹn trọn đời]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises của sự kiện sự kiện liên quan đến yêu cầu được xử lý (thường là FetchEvent).

    Lưu ý: bạn có thể chờ workbox-strategies.StrategyHandler~doneWaiting biết thời điểm tất cả các lời hứa đã thêm đã được thanh toán.

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

    (promise: Promise<T>) => {...}

    • lời hứa

      Cam kết<T>

      Lời hứa bổ sung vào thời gian dài hơn cam kết trọn đời của sự kiện đã kích hoạt yêu cầu.

    • returns

      Cam kết<T>

StrategyOptions

Thuộc tính

  • cacheName

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

  • fetchOptions

    RequestInit không bắt buộc

  • matchOptions

    CacheQueryOptions không bắt buộc

  • trình bổ trợ

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