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

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)

Ứ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)

Đố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

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

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.

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

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

Lưu ý: Hãy tham khảo phương thức triển khai nguồn của StrategyHandler để xem tất cả các tham số mà mỗi thao tác chấp nhận

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

  • tùy chọn

    StrategyOptions không bắt buộc

  • returns

    CacheFirst

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

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

  • tùy chọn

    StrategyOptions không bắt buộc

  • returns

    CacheOnly

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

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

  • tùy chọn

    NetworkFirstOptions không bắt buộc

  • returns

    NetworkFirst

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

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

  • tùy chọn

    NetworkOnlyOptions không bắt buộc

  • returns

    NetworkOnly

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

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

  • tùy chọn

    StrategyOptions không bắt buộc

  • returns

    StaleWhileRevalidate

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

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

  • tùy chọn

    StrategyOptions không bắt buộc

  • returns

    Chiến lược

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

  • trình xử lý

    StrategyHandler

  • request

    Yêu cầu

  • event

    ExtendableEvent

  • returns

    Promise<Response>

• _handle

  void

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

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

  • request

    Yêu cầu

  • trình xử lý

    StrategyHandler

  • returns

    Promise<Response>

• handle

  void

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

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

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

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

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

  • tùy chọn

    FetchEvent | HandlerCallbackOptions

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

  • returns

    Promise<Response>

• handleAll

  void

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

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

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

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

  • tùy chọn

    FetchEvent | HandlerCallbackOptions

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

  • returns

    [Promise<Response>, Promise<void>]

    Một bộ dữ liệu gồm các lời hứa [response, done] có thể được dùng để xác định thời điểm phản hồi phân giải cũng như thời điểm trình xử lý hoàn tất 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) => {...}

  • chiến lược

    Chiến lược

  • tùy chọn

    HandlerCallbackOptions

  • returns

    StrategyHandler

• 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