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 bộ 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 một worker dịch vụ tạo phản hồi sau khi nhận được một 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 dễ dàng áp dụng các chiến lược đó trong worker dịch vụ.

Chúng tôi sẽ không đi sâu vào các chiến lược ngoài những chiến lược mà Workbox hỗ trợ, nhưng bạn có thể tìm hiểu thêm trong Sách công thức về chế độ ngoại tuyến.

Sử dụng 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 các chiến lược lưu vào bộ nhớ đệm Workbox bằng workbox-routing. Có một số tuỳ chọn mà bạn có thể xác định cho mỗi chiến lược được đề cập trong phần Định cấu hình chiến lược của tài liệu này.

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

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

Lỗi cũ trong khi xác thực lại biểu đồ

Mẫu stale-while-revalidate (lỗi thời 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ó, quay lại yêu cầu mạng nếu không đượ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 lỗi thời trong khi xác thực lại, chiến lược này sẽ luôn tạo một yêu cầu xác thực lại, bất kể thời gian 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ó 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 (Bộ nhớ đệm quay lại mạng)

Sơ đồ Cache First

Ứng dụng web ngoại tuyến sẽ phụ thuộc nhiều vào bộ nhớ đệm, nhưng đối với các thành phần không quan trọng và có thể được lưu vào bộ nhớ đệm dần dần, thì ưu tiên bộ nhớ đệm 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à mạng sẽ không được sử dụng. Nếu không có phản hồi được lưu vào bộ nhớ đệm, 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());

Ưu tiên mạng (Mạng quay lại bộ nhớ đệm)

Sơ đồ Network First

Đối với các yêu cầu thường xuyên cập nhật, chiến lược ưu tiên mạng là giải pháp lý tưởng. Theo mặc định, lớp này sẽ cố gắng tìm nạp phản hồi mới nhất từ mạng. Nếu yêu cầu thành công, yêu cầu đó sẽ đặt phản hồi vào bộ nhớ đệm. Nếu mạng không trả về phản hồi, thì phản hồi được 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, thì bạn nên sử dụng chiến lược chỉ mạng.

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

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

Chỉ bộ nhớ đệm

Biểu đồ chỉ bộ nhớ đệm

Chiến lược chỉ bộ nhớ đệm đảm bảo rằng các phản hồi được lấy từ bộ nhớ đệm. Điều này ít phổ biến trong hộp công việc, nhưng có thể hữu ích nếu bạn có bước lưu vào bộ nhớ đệm trước 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ả chiến lược đều cho phép bạn định cấu hình:

  • Tên của bộ nhớ đệm để sử dụng trong chiến lược.
  • Các hạn chế về thời gian hết hạn của bộ nhớ đệm để sử dụng trong chiến lược.
  • Một mảng các trình bổ trợ sẽ có các phương thức vòng đời được gọi khi tìm nạp và lưu một 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 bộ nhớ đệm mà chiến lược sử dụng bằng cách cung cấp tên bộ nhớ đệm. Điều này rất hữu ích nếu bạn muốn tách các thành phần để giúp 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ể dùng được 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 truyền các 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 còn cho phép bạn tạo 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ó 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ề hai đối tượng Promise. Lệnh gọi đầu tiên tương đương với kết quả trả về của handle() và lệnh gọi thứ hai sẽ phân giải khi các lời 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 hai 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 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 handler.fetch() được gọi thay vì phương thức fetch gốc. Lớp StrategyHandler cung cấp một số thao tác tìm nạp và lưu vào bộ nhớ đệm có thể được sử dụng bất cứ khi nào sử dụng handle() hoặc handleAll():

  • fetch: Tìm nạp một yêu cầu nhất định và gọi các phương thức vòng đời của trình bổ trợ requestWillFetch(), fetchDidSucceed() và fetchDidFail()
  • cacheMatch: So khớp một yêu cầu từ bộ nhớ đệm và gọi các phương thức vòng đời của trình bổ trợ cacheKeyWillBeUsed() và cachedResponseWillBeUsed()
  • cachePut: Đặt một cặp yêu cầu/phản hồi vào bộ nhớ đệm và gọi các phương thức vòng đời của trình bổ trợ cacheKeyWillBeUsed(), 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ợ có lệnh gọi lại đã cho.
  • runCallbacks: Chạy tất cả lệnh gọi lại trình bổ trợ khớp với một tên nhất định, theo thứ tự, truyền một đối tượng tham số nhất định (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 tập hợp có thể lặp lại 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 từng lệnh gọi lại, bất kỳ tham số đối tượng nào bạn truyền vào 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 một lời hứa vào các lời hứa kéo dài thời gian của sự kiện liên kết với yêu cầu đang được xử lý (thường là FetchEvent).
  • doneWaiting: Trả về một lời hứa sẽ giải quyết sau khi tất cả lời hứa được chuyển đến waitUntil() đã được 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 chạy đua mạng bộ nhớ đệm tuỳ chỉnh

Ví dụ sau đây dựa trên cache-network-race trong Sách dạy nấu ăn ngoại tuyến (mà Workbox không cung cấp), nhưng đi xa hơn một bước và luôn cập nhật 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 hành động.

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 trong logic sự kiện tìm nạp 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 lỗi thời trong khi xác thực lại, bạn có thể làm như 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ể tìm thấy danh sách các lớp hiện có trong tài liệu tham khảo về chiến lược hộp công cụ.

Loại

CacheFirst

Triển khai chiến lược yêu cầu ưu tiên bộ nhớ đệm.

Chiến lược bộ nhớ đệm trước sẽ hữu ích cho các thành phần đã được sửa đổi, chẳng hạn như các URL như /styles/example.a8f5f1.css, vì các thành phần này 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ả khớp trong bộ nhớ đệm, thì lỗi này sẽ gửi ngoại lệ WorkboxError.

Thuộc tính

  • hàm khởi tạo

    void

    Tạo một thực thể mới của chiến lược và đặt tất cả các thuộc tính tuỳ chọn được ghi lại làm thuộc tính thực thể công khai.

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

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

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

  • cacheName

    chuỗi

  • 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<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) => {...}

    • 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.

CacheOnly

Triển khai chiến lược yêu cầu chỉ lưu vào bộ nhớ đệm.

Lớp này sẽ hữu ích nếu bạn muốn tận dụng bất kỳ trình bổ trợ Workbox nào.

Nếu không có kết quả phù hợp trong 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 thực thể mới của chiến lược và đặt tất cả các thuộc tính tuỳ chọn được ghi lại làm thuộc tính thực thể công khai.

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

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

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

  • cacheName

    chuỗi

  • 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<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) => {...}

    • 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 tất cả công việc.

NetworkFirst

Cách triển khai chiến lược yêu cầu ưu tiên mạ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 cũng như phản hồi mờ vào bộ nhớ đệm. Phản hồi mờ là các yêu cầu nhiều nguồn gốc mà phản hồi không hỗ trợ CORS.

Nếu yêu cầu mạng không thành công và không có kết quả khớp trong bộ nhớ đệm, thì lỗi 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

    chuỗi

  • 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<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) => {...}

    • 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.

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

Cách triển khai chiến lược yêu cầu chỉ dành cho mạng.

Lớp này sẽ hữu ích nếu bạn muốn tận dụng bất kỳ trình bổ trợ Workbox nào.

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

    chuỗi

  • 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<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) => {...}

    • 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.

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

Triển khai chiến lược yêu cầu stale-while-revalidate (lỗi thời 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 này 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, hãy đợi phản hồi của 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 cũng như phản hồi mờ vào bộ nhớ đệm. Phản hồi mờ là các yêu cầu nhiều nguồn gốc mà phản hồi không hỗ trợ CORS.

Nếu yêu cầu mạng không thành công và không có kết quả khớp trong bộ nhớ đệm, thì lỗi 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

    chuỗi

  • 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<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) => {...}

    • 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 tất cả công việc.

Strategy

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

Thuộc tính

  • hàm khởi tạo

    void

    Tạo một thực thể mới của chiến lược và đặt tất cả các thuộc tính tuỳ chọn được ghi lại làm thuộc tính thực thể công khai.

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

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

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

  • cacheName

    chuỗi

  • 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<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) => {...}

    • returns

      Promise<Response>

  • _handle

    void

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

    (request: Request, handler: 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 tất cả công việc.

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. Lớp này gói tất cả các thao tác tìm nạp và lưu vào bộ nhớ đệm xung quanh các lệnh gọi lại trình bổ trợ và theo dõi thời điểm chiến lược "hoàn tất" (tức là tất cả các lời hứa event.waitUntil() đã thêm đã được phân giải).

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 chạy trạng thái sẽ được truyền đến từng 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 nào

  • 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 mọi phương thức gọi lại trình bổ trợ có thể áp dụng) 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 vòng đời trình bổ trợ sau đây được gọi khi sử dụng phương thức này:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

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

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

    • phím

      RequestInfo

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

    • returns

      Promise<Response>

      Một phản hồi trùng khớp, nếu có.

  • cachePut

    void

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

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

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

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

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

    • phím

      RequestInfo

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

    • phản hồi

      Phản hồi

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

    • returns

      Promise&lt;boolean&gt;

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

  • hủy bỏ

    void

    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ý.

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

    () => {...}

  • doneWaiting

    void

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

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

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

    () => {...}

    • returns

      Promise<void>

  • tìm nạp

    void

    Tìm nạp một yêu cầu nhất định (và gọi mọi phương thức gọi lại trình bổ trợ có thể áp dụng) 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 vòng đời trình bổ trợ sau đây đượ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<Response>

  • fetchAndCachePut

    void

    Gọi this.fetch() và (ở chế độ nền) chạy this.cachePut() trên phản hồi do this.fetch() tạo.

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

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

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

    • input

      RequestInfo

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

    • returns

      Promise<Response>

  • 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ự. Đối tượng Request cuối cùng do trình bổ trợ cuối cùng trả về được coi là khoá bộ nhớ đệm để đọc và/hoặc ghi bộ nhớ đệm. Nếu không có lệnh gọi lại trình bổ trợ cacheKeyWillBeUsed nào được đăng ký, thì yêu cầu đã truyền sẽ được trả về mà không sửa đổi

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

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

    • request

      Yêu cầu

    • chế độ

      "read"
       | "write"

    • returns

      Promise<Request>

  • hasCallback

    void

    Trả về true nếu chiến lược có ít nhất một trình bổ trợ có lệnh gọi lại đã cho.

    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 tập hợp có thể lặp lại 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 từng lệnh gọi lại, bất kỳ tham số đối tượng nào bạn truyền vào 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 của lệnh gọi lại để chạy

    • returns

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    void

    Chạy tất cả lệnh gọi lại trình bổ trợ khớp với tên đã cho, theo thứ tự, truyền đối tượng tham số đã cho (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.

    Lưu ý: vì phương thức này chạy tất cả các trình bổ trợ, nên phương thức này không phù hợp với các trường hợp cần áp dụng giá trị trả về của lệnh gọi lại trước khi gọi lệnh gọi lại tiếp theo. Hãy 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ợ.

    • param

      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 trình bổ trợ hiện tại trước khi thực thi lệnh gọi lại.

    • returns

      Promise<void>

  • waitUntil

    void

    Thêm một lời hứa vào [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises của sự kiện liên kết với yêu cầu đang đượ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 thực hiện.

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

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

    • lời hứa

      Promise<T>

      Lời hứa thêm vào các lời hứa kéo dài thời gian của sự kiện đã kích hoạt yêu cầu.

    • returns

      Promise<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