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
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)
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)
Đố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
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
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.
- workbox-background-sync
- workbox-broadcast-update
- workbox-cacheable-response (phản hồi có thể lưu trong bộ nhớ đệm)
- hết-hạn
- các-yêu cầu-phạm vi-hộp-công-tác
Để 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ộtPromise
mà sẽ phân giải bằngResponse
, 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ượngPromise
. 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àoevent.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ọifetch()
và chạycachePut()
trong nền trên phản hồi dofetch()
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 chowaitUntil()
đã đượ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ứawaitUntil()
đ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) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
giá trị trả về
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
giá trị trả về
Promise<void>
-
-
_getResponse
void
Hàm
_getResponse
sẽ có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
request
Yêu cầu
-
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ằngResponse
, 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àoevent.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ộtPromise
phân giải thànhResponse
, 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àoevent.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) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
giá trị trả về
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
giá trị trả về
Promise<void>
-
-
_getResponse
void
Hàm
_getResponse
sẽ có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
request
Yêu cầu
-
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ằngResponse
, 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àoevent.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ộtPromise
phân giải thànhResponse
, 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àoevent.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) => {...}
-
tùy chọn
NetworkFirstOptions không bắt buộc
-
giá trị trả về
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
giá trị trả về
Promise<void>
-
-
_getResponse
void
Hàm
_getResponse
sẽ có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
request
Yêu cầu
-
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ằngResponse
, 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àoevent.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ộtPromise
phân giải thànhResponse
, 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àoevent.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) => {...}
-
tùy chọn
NetworkOnlyOptions không bắt buộc
-
giá trị trả về
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
giá trị trả về
Promise<void>
-
-
_getResponse
void
Hàm
_getResponse
sẽ có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
request
Yêu cầu
-
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ằngResponse
, 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àoevent.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ộtPromise
phân giải thànhResponse
, 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àoevent.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) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
giá trị trả về
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
giá trị trả về
Promise<void>
-
-
_getResponse
void
Hàm
_getResponse
sẽ có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
request
Yêu cầu
-
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ằngResponse
, 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àoevent.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ộtPromise
phân giải thànhResponse
, 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àoevent.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) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
giá trị trả về
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
giá trị trả về
Promise<void>
-
-
_getResponse
void
Hàm
_getResponse
sẽ có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
request
Yêu cầu
-
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) => {...}
-
request
Yêu cầu
-
trình xử lý
-
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ằngResponse
, 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àoevent.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ộtPromise
phân giải thànhResponse
, 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àoevent.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) => {...}
-
chiến thuật
-
tùy chọn
-
giá trị trả về
-
-
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ứcwaitUntil()
của sự kiện (không phải phương thứcwaitUntil()
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ượngStrategy
.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ạythis.cachePut()
trên phản hồi dothis.fetch()
tạo.Lệnh gọi đến
this.cachePut()
sẽ tự động gọithis.waitUntil()
, vì vậy, bạn không phải gọiwaitUntil()
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ượngRequest
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 đổiHà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