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ụ 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 trình chạy dịch vụ.

Chúng tôi sẽ không đi sâu vào nhiều 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 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 của Workbox với workbox-routing. Có một số tuỳ chọn bạn có thể xác định cho từng chiến lược 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ẽ đề cập đến 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.

Cũ – Trong khi xác thực lại

Biểu đồ cũ trong khi xác thực lại

Mẫu 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 một phản hồi đã lưu vào bộ nhớ đệm (nếu có), quay lại yêu cầu mạng nếu yêu cầu đó không được lưu vào bộ nhớ đệm. Sau đó, yêu cầu mạng sẽ được dùng để cập nhật bộ nhớ đệm. Khác với một số phương thức triển khai lỗi thời trong khi xác thực lại, chiến lược này sẽ luôn thực hiện 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 cập nhật 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ơ đồ lưu vào bộ nhớ đệm đầu tiên

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

Nếu có một 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à hệ thống sẽ không sử dụng mạng. Nếu không có phản hồi được lưu vào bộ nhớ đệm, Yêu cầu sẽ được một yêu cầu mạng thực hiện 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 (Mạng quay lại bộ nhớ đệm)

Sơ đồ mạng thứ nhất

Đối với các yêu cầu cập nhật thường xuyên, chiến lược mạng ưu tiên là giải pháp lý tưởng. Theo mặc định, trình phân tích cú pháp sẽ cố 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, phản hồi sẽ được đưa vào 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

Biểu đồ chỉ mạng

Nếu bạn cần thực hiện các yêu cầu cụ thể qua mạng, thì chiến lược bạn nên sử dụng là 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

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

Chiến lược chỉ bộ nhớ đệm đảm bảo rằng các phản hồi lấy từ bộ nhớ đệm. Phương thức 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 lưu trước vào 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

Bạn có thể thiết lập tất cả các chiến lược sau:

  • Tên của bộ nhớ đệm để sử dụng trong chiến lược.
  • Giới hạn thời gian hết hạn bộ nhớ đệm để sử dụng trong chiến lược.
  • Một mảng các trình bổ trợ sẽ được gọi các phương thức vòng đờ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à một 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. Việc này rất 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 tập hợp các plugin có thể được 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 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 các chiến lược, Workbox còn 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ể. Bạn có thể sử dụng 2 chiến lược yêu cầu:

  • handle(): Thực hiện chiến lược yêu cầu và trả về một Promise mà sẽ phân giải bằng Response, gọi tất cả lệnh gọi lại của trình bổ trợ liên quan.
  • handleAll(): Tương tự như handle() nhưng trả về 2 đối tượng Promise. Mục đầu tiên tương đương với kết quả mà handle() trả về và mục 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 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 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 dùng bất cứ khi nào handle() hoặc handleAll() được sử dụng:

  • 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 rồi 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 trong 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() trong nền trên phản hồi do fetch() tạo.
  • hasCallback: Nhận 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ợ với 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 đã cho, theo thứ tự, truyền một đối tượng tham số nhất định (đượ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ủa 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 đi đều 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 hứa hẹn vào các lời hứa kéo dài trong vòng đời của sự kiện được liên kết với yêu cầu đượ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ả các lời hứa được chuyển cho 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 đua mạng bộ nhớ đệm tuỳ chỉnh

Ví dụ sau đây dựa trên cache-network-race trong Offline Cookbook (mà Workbox không cung cấp), nhưng tiến thêm 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 một 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ể 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 có sẵn trong tài liệu tham khảo về chiến lược hộp công việ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 ưu tiên lưu vào bộ nhớ đệm rất hữu ích cho các tài sản đã được sửa đổi, chẳng hạn như các URL như /styles/example.a8f5f1.css, vì các tài sản này có thể được lưu vào bộ nhớ đệm trong một 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ì 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 dưới dạng thuộc tính của 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 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 sẽ 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[]

  • _Hoàn tất chờ

    void

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

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

    • responseDone

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

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • giá trị trả về

      Promise<void>

  • _getResponse

    void

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

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

    • giá trị trả về

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

  • handle

    void

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

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

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

  • handleAll

    void

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

      [Promise<Response>,Promise<void>]

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

CacheOnly

Triển khai chiến lược yêu cầu 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ợ nào của Hộp công việc.

Nếu không có kết quả nào 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 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 dưới dạng thuộc tính của 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 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 sẽ 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[]

  • _Hoàn tất chờ

    void

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

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

    • responseDone

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

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • giá trị trả về

      Promise<void>

  • _getResponse

    void

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

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

    • giá trị trả về

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

  • handle

    void

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

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

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

  • handleAll

    void

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

      [Promise<Response>,Promise<void>]

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

NetworkFirst

Cách triển khai chiến lược yêu cầu trước tiên là 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à yêu cầu nhiều nguồn gốc mà trong đó 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ả nào 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

    Hàm constructor sẽ 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[]

  • _Hoàn tất chờ

    void

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

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

    • responseDone

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

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • giá trị trả về

      Promise<void>

  • _getResponse

    void

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

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

    • giá trị trả về

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

  • handle

    void

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

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

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

  • handleAll

    void

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

      [Promise<Response>,Promise<void>]

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

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

Triển khai chiến lược yêu cầu chỉ dành cho 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ợ nào của Hộp công việc.

Nếu yêu cầu mạng không thành công, 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 sẽ 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[]

  • _Hoàn tất chờ

    void

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

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

    • responseDone

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

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • giá trị trả về

      Promise<void>

  • _getResponse

    void

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

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

    • giá trị trả về

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

  • handle

    void

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

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

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

  • handleAll

    void

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

      [Promise<Response>,Promise<void>]

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

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

Cách triển khai chiến lược yêu cầu lỗi thời trong khi xác thực lại.

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 thì sẽ chờ phản hồi của mạng. Bộ nhớ đệm được cập nhật theo phản hồi mạng mỗi khi có 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à yêu cầu nhiều nguồn gốc mà trong đó 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ả nào 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

    Hàm constructor sẽ 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[]

  • _Hoàn tất chờ

    void

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

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

    • responseDone

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

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • giá trị trả về

      Promise<void>

  • _getResponse

    void

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

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

    • giá trị trả về

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

  • handle

    void

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

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

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

  • handleAll

    void

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

      [Promise<Response>,Promise<void>]

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

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 dưới dạng thuộc tính của 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 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 sẽ 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[]

  • _Hoàn tất chờ

    void

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

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

    • responseDone

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

    • trình xử lý

      StrategyHandler

    • request

      Yêu cầu

    • event

      ExtendableEvent

    • giá trị trả về

      Promise<void>

  • _getResponse

    void

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

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

    • giá trị trả về

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

  • _tên người dùng

    void

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

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

    • giá trị trả về

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

  • handle

    void

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

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

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

  • handleAll

    void

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

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

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

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

    • tùy chọn

      FetchEvent|HandlerCallbackOptions

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

    • giá trị trả về

      [Promise<Response>,Promise<void>]

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

StrategyHandler

Một lớp được tạo mỗi khi thực thể thực thể Chiến lược gọi phương thức workbox-strategies.Strategy~handle hoặc workbox-strategies.Strategy~handleAll, bao gồm tất cả hành động tìm nạp và lưu vào bộ nhớ đệm xoay quanh các lệnh gọi lại trình bổ trợ, đồng thời theo dõi thời điểm chiến lược được "hoàn tất" (tức là tất cả lời hứa event.waitUntil() được thêm vào đều đã đượ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 chuyển đến mỗi trình bổ trợ xử lý yêu cầu này.

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

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

  • event

    ExtendableEvent

  • params

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

  • 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ợ thích hợp) 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 sau đây trong vòng đời của trình bổ trợ được gọi khi sử dụng phương thức này:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    Hàm cacheMatch sẽ 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.

    • giá trị trả về

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

      Một câu trả lờ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 trong 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 sau đây trong vòng đời của trình bổ trợ được gọi khi sử dụng phương thức này:

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

    Hàm cachePut sẽ 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 cho bộ nhớ đệm.

    • giá trị trả về

      Promise<boolean>

      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.

  • destroy

    void

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

    Hàm destroy sẽ 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ả các lời hứa được chuyển cho workbox-strategies.StrategyHandler~waitUntil đã được giải quyết.

    Lưu ý: mọi công việc được thực hiện sau khi giải quyết doneWaiting() phải được chuyển theo cách thủ công đến phương thức waitUntil() của 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 worker sẽ bị huỷ trước khi công việc hoàn thành.

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

    ()=> {...}

    • giá trị trả về

      Promise<void>

  • fetch

    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ợ á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 sau đây trong vòng đời của trình bổ trợ được gọi khi sử dụng phương thức này:

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

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

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

    • input

      RequestInfo

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

    • giá trị trả về

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

  • 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 phải gọi waitUntil() theo cách thủ công trên sự kiện.

    Hàm fetchAndCachePut sẽ 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.

    • giá trị trả về

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

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

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

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

    • request

      Yêu cầu

    • chế độ

    • giá trị trả về

      Hứa hẹn<Yêu cầu>

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

    • giá trị trả về

      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ủa 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 đi đều 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 sẽ có dạng như sau: 

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

    • tên

      C

      Tên mà hàm gọi lại sẽ chạy

    • giá trị trả về

      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 đố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 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 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 dưới đây để biết cách xử lý trường hợp đó.

    Hàm runCallbacks sẽ 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 mỗi 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.

    • giá trị trả về

      Promise<void>

  • waitUntil

    void

    Thêm một lời hứa vào phần [extend lifecyclehiện]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 được thêm vào đã được giải quyết.

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

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

    • hứa

      Promise<T>

      Một lời hứa sẽ thêm vào số lời hứa hẹn kéo dài vòng đời của sự kiện đã kích hoạt yêu cầu.

    • giá trị trả về

      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