Khi trình chạy dịch vụ được giới thiệu lần đầu tiên, một tập hợp các chiến lược lưu vào bộ nhớ đệm phổ biến đã xuất hiện. Chiến lược lưu vào bộ nhớ đệm là một mẫu xác định cách trình chạy dịch vụ sẽ tạo phản hồi sau khi nhận được sự kiện tìm nạp.
workbox-strategies
cung cấp các chiến lược lưu vào bộ nhớ đệm phổ biến nhất để bạn có thể dễ dàng
hãy áp dụng chúng trong trình chạy dịch vụ của bạn.
Chúng tôi sẽ không đi vào chi tiết ngoài các chiến lược mà Workbox hỗ trợ, nhưng bạn có thể tìm hiểu thêm trong Sổ tay nấu ăn ngoại tuyến.
Sử dụng các chiến lược
Trong các ví dụ sau, chúng tôi sẽ hướng dẫn bạn cách sử dụng tính năng lưu vào bộ nhớ đệm của Hộp công việc
với workbox-routing
. Có một số lựa chọn
bạn có thể xác định bằng
mỗi chiến lược được đề cập trong
Định cấu hình phần Chiến lược trong tài liệu này.
Trong phần Sử dụng nâng cao, chúng tôi sẽ đề cập đến cách bạn có thể sử dụng
các chiến lược lưu vào bộ nhớ đệm trực tiếp mà không cần workbox-routing
.
Lỗi thời trong khi xác thực lại
Chế độ cũ trong khi xác thực lại cho phép bạn phản hồi yêu cầu nhanh nhất có thể bằng phản hồi được lưu vào bộ nhớ đệm nếu có, sẽ quay lại yêu cầu mạng nếu có chưa được lưu vào bộ nhớ đệm. Sau đó, yêu cầu mạng được dùng để cập nhật bộ nhớ đệm. Trái ngược với một số cách triển khai cũ trong khi xác thực lại, chiến lược này sẽ luôn đưa ra yêu cầu xác thực lại, bất kể tuổi của phản hồi được lưu vào bộ nhớ đệm.
Đây là một chiến lược khá phổ biến, trong đó việc có nguồn tài nguyên mới nhất không quan trọng đối với ứng dụng.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
Bộ nhớ đệm trước tiên (Bộ nhớ đệm quay lại mạng)
Các ứng dụng web ngoại tuyến sẽ phụ thuộc nhiều vào bộ nhớ đệm, nhưng các nội dung không quan trọng và có thể dần được lưu vào bộ nhớ đệm, lưu vào bộ nhớ đệm trước là lựa chọn tốt nhất.
Nếu có Phản hồi trong bộ nhớ đệm, thì Yêu cầu sẽ được thực hiện bằng cách sử dụng phản hồi đã lưu vào bộ nhớ đệm và sẽ không sử dụng mạng. Nếu không có tệp được lưu vào bộ nhớ đệm thì Yêu cầu sẽ được thực hiện bằng một yêu cầu mạng và phản hồi sẽ được lưu vào bộ nhớ đệm để yêu cầu tiếp theo được phân phát trực tiếp từ bộ nhớ đệm đó.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Mạng trước tiên (Mạng chuyển về bộ nhớ đệm)
Đối với các yêu cầu được cập nhật thường xuyên, mạng lưới trước tiên chính là giải pháp lý tưởng. Theo mặc định, Chrome sẽ cố gắng tìm nạp dữ liệu mới nhất phản hồi từ mạng. Nếu yêu cầu thành công, hệ thống sẽ đặt phản hồi trong bộ nhớ đệm. Nếu mạng không trả về phản hồi, thì phản hồi đã lưu vào bộ nhớ đệm sẽ được sử dụng.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
Chỉ mạng
Nếu bạn yêu cầu thực hiện các yêu cầu cụ thể từ mạng, chỉ mạng là chiến lược nên sử dụng.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Chỉ bộ nhớ đệm
Chỉ bộ nhớ đệm đảm bảo rằng phản hồi được lấy từ bộ nhớ đệm. Trường hợp này ít phổ biến hơn trong hộp công việc, nhưng có thể hữu ích nếu bạn có bước chuẩn bị bộ nhớ đệm của riêng mình.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Định cấu hình chiến lược
Tất cả các chiến lược cho phép bạn định cấu hình:
- Tên của bộ nhớ đệm sẽ sử dụng trong chiến lược.
- Các hạn chế khi hết hạn bộ nhớ đệm để sử dụng trong chiến lược.
- Một loạt trình bổ trợ sẽ có phương thức vòng đời được gọi khi tìm nạp và lưu yêu cầu vào bộ nhớ đệm.
Thay đổi bộ nhớ đệm mà chiến lược sử dụng
Bạn có thể thay đổi chiến lược cho bộ nhớ đệm bằng cách cung cấp tên bộ nhớ đệm. Đây là hữu ích nếu bạn muốn tách riêng các thành phần để hỗ trợ gỡ lỗi.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
Sử dụng trình bổ trợ
Workbox đi kèm với một bộ trình bổ trợ có thể sử dụng với các chiến lược này.
- 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 chuyển
thực thể vào tuỳ chọn plugins
.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
],
})
);
Chiến lược tuỳ chỉnh
Ngoài việc định cấu hình chiến lược, Workbox cho phép bạn tạo các chiến lược tuỳ chỉnh của riêng mình.
Bạn có thể thực hiện việc này bằng cách nhập và mở rộng lớp cơ sở Strategy
từ workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
Trong ví dụ này, handle()
được dùng làm chiến lược yêu cầu để xác định logic xử lý cụ thể. Có
là hai chiến lược yêu cầu mà bạn có thể sử dụng:
handle()
: Thực hiện chiến lược yêu cầu và trả vềPromise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ liên quan.handleAll()
: Tương tự nhưhandle()
nhưng trả về 2 đối tượngPromise
. Đầu tiên là tương đương với giá trịhandle()
trả về và lượt thứ hai sẽ phân giải khi đã hứa được thêm và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 một chiến lược mới
Sau đây là ví dụ về một chiến lược mới triển khai lại hành vi của NetworkOnly
:
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
Hãy lưu ý cách gọi handler.fetch()
thay vì phương thức fetch
gốc. StrategyHandler
lớp này sẽ cung cấp một số thao tác tìm nạp và lưu vào bộ nhớ đệm có thể được dùng bất cứ khi nào handle()
hoặc
handleAll()
được dùng:
fetch
: Tìm nạp một yêu cầu nhất định và gọirequestWillFetch()
,fetchDidSucceed()
và Phương thức vòng đời của trình bổ trợfetchDidFail()
cacheMatch
: So khớp một yêu cầu từ bộ nhớ đệm rồi gọicacheKeyWillBeUsed()
và Phương thức vòng đời của trình bổ trợcachedResponseWillBeUsed()
cachePut
: Đặt một cặp yêu cầu/phản hồi vào bộ nhớ đệm và gọicacheKeyWillBeUsed()
, Các phương thức vòng đời của trình bổ trợcacheWillUpdate()
vàcacheDidUpdate()
fetchAndCachePut
: Gọifetch()
và chạycachePut()
ở chế độ nền trên phản hồi dofetch()
tạo.hasCallback
: Lấy lệnh gọi lại làm dữ liệu đầu vào và trả về giá trị true nếu chiến lược có ít nhất một trình bổ trợ bằng lệnh gọi lại đã cho.runCallbacks
: Chạy tất cả các lệnh gọi lại trình bổ trợ khớp với một tên cụ thể theo thứ tự, truyền một thông số nhất định đối tượng (được hợp nhất với trạng thái trình bổ trợ hiện tại) làm đối số duy nhất.iterateCallbacks
: Chấp nhận một lệnh gọi lại và trả về một lệnh gọi lại có thể lặp lại của các lệnh gọi lại trình bổ trợ phù hợp, trong đó mỗi lệnh gọi lại được gói bằng trạng thái trình xử lý hiện tại (tức là khi bạn gọi mỗi lệnh gọi lại, bất kỳ thông số đối tượng nào bạn truyền, tham số đó sẽ được hợp nhất với trạng thái hiện tại của trình bổ trợ).waitUntil
: Thêm lời hứa vào thời gian dài hơn cam kết toàn thời gian của sự kiện liên kết với được xử lý (thường làFetchEvent
).doneWaiting
: Trả về lời hứa sẽ được giải quyết sau khi tất cả lời hứa được chuyển chowaitUntil()
đã được thực hiện đã giải quyết.destroy
: Ngừng chạy chiến lược và ngay lập tức giải quyết mọi lời hứawaitUntil()
đang chờ xử lý.
Chiến lược cạnh tranh mạng bộ nhớ đệm tuỳ chỉnh
Ví dụ sau đây dựa trên cache-network-race từ Sổ tay nấu ăn ngoại tuyến (mà Workbox không cung cấp), nhưng tiến một bước xa hơn và luôn cập nhật lưu vào bộ nhớ đệm sau khi yêu cầu mạng thành công. Đây là ví dụ về một chiến lược phức tạp hơn sử dụng nhiều thao tác.
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
_handle(request, handler) {
const fetchAndCachePutDone = handler.fetchAndCachePut(request);
const cacheMatchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchAndCachePutDone.then(resolve);
cacheMatchDone.then(response => response && resolve(response));
// Reject if both network and cache error or find no response.
Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
results => {
const [fetchAndCachePutResult, cacheMatchResult] = results;
if (
fetchAndCachePutResult.status === 'rejected' &&
!cacheMatchResult.value
) {
reject(fetchAndCachePutResult.reason);
}
}
);
});
}
}
Cách sử dụng nâng cao
Nếu muốn sử dụng các chiến lược này trong logic tìm nạp sự kiện của riêng mình, bạn có thể sử dụng các lớp chiến lược để chạy yêu cầu thông qua một chiến lược cụ thể.
Ví dụ: để sử dụng chiến lược cũ trong khi xác thực lại, bạn có thể thực hiện sau:
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if (url.origin === location.origin && url.pathname === '/') {
event.respondWith(new StaleWhileRevalidate().handle({event, request}));
}
});
Bạn có thể xem danh sách các lớp học hiện có trong tài liệu tham khảo về chiến lược của Workbox.
Loại
CacheFirst
Triển khai cơ chế ưu tiên bộ nhớ đệm .
Chiến lược ưu tiên sử dụng bộ nhớ đệm sẽ hữu ích cho những nội dung đã được sửa đổi,
chẳng hạn như URL như /styles/example.a8f5f1.css
vì chúng
có thể được lưu vào bộ nhớ đệm trong thời gian dài.
Nếu yêu cầu mạng không thành công và không có kết quả nào khớp với bộ nhớ đệm, thì lệnh này sẽ gửi
ngoại lệ WorkboxError
.
Thuộc tính
-
hàm khởi tạo
void
Tạo một phiên bản mới của chiến lược và đặt tất cả các tùy chọn được ghi lại trong tài liệu làm thuộc tính của đối tượng công khai.
Lưu ý: nếu lớp chiến lược tuỳ chỉnh mở rộng lớp Chiến lược cơ bản và không cần nhiều hơn những thuộc tính này, nên không cần xác định hàm khởi tạo.
Hàm
constructor
có dạng như sau:(options?: StrategyOptions) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
returns
Lời hứa<vô hiệu>
-
-
_getResponse
void
Hàm
_getResponse
có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
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ề
Promise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.Khi một thực thể chiến lược được đăng ký bằng Workbox
workbox-routing.Route
, phương thức này được tự động được gọi khi tuyến đường này khớp.Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một
FetchEvent
độc lập trình nghe bằng cách truyền tham số đó đếnevent.respondWith()
.Hàm
handle
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
Promise<Response>
-
-
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
, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa[response, done]
, trong đó (response
) tương đương với kết quả trả về củahandle()
và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tấtevent.waitUntil()
trong quá trình thực hiện chiến lược.Bạn có thể chờ đợi lời hứa
done
để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) hoàn tất thành công.Hàm
handleAll
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
[Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]
Một bộ dữ liệu [response, xong] những lời hứa có thể được dùng để xác định thời điểm câu trả lời được giải quyết cũng như khi trình xử lý đã hoàn thành tất cả công việc của mình.
-
CacheOnly
Việc triển khai chế độ chỉ dành cho bộ nhớ đệm .
Lớp này rất hữu ích nếu bạn muốn tận dụng bất kỳ Trình bổ trợ hộp làm việc.
Nếu không có kết quả trùng khớp với bộ nhớ đệm, thì thao tác này sẽ gửi một ngoại lệ WorkboxError
.
Thuộc tính
-
hàm khởi tạo
void
Tạo một phiên bản mới của chiến lược và đặt tất cả các tùy chọn được ghi lại trong tài liệu làm thuộc tính của đối tượng công khai.
Lưu ý: nếu lớp chiến lược tuỳ chỉnh mở rộng lớp Chiến lược cơ bản và không cần nhiều hơn những thuộc tính này, nên không cần xác định hàm khởi tạo.
Hàm
constructor
có dạng như sau:(options?: StrategyOptions) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
returns
Lời hứa<vô hiệu>
-
-
_getResponse
void
Hàm
_getResponse
có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
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ề
Promise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.Khi một thực thể chiến lược được đăng ký bằng Workbox
workbox-routing.Route
, phương thức này được tự động được gọi khi tuyến đường này khớp.Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một
FetchEvent
độc lập trình nghe bằng cách truyền tham số đó đếnevent.respondWith()
.Hàm
handle
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
Promise<Response>
-
-
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
, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa[response, done]
, trong đó (response
) tương đương với kết quả trả về củahandle()
và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tấtevent.waitUntil()
trong quá trình thực hiện chiến lược.Bạn có thể chờ đợi lời hứa
done
để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) hoàn tất thành công.Hàm
handleAll
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
[Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]
Một bộ dữ liệu [response, xong] những lời hứa có thể được dùng để xác định thời điểm câu trả lời được giải quyết cũng như khi trình xử lý đã hoàn thành tất cả công việc của mình.
-
NetworkFirst
Việc triển khai một mạng lưới trước tiên .
Theo mặc định, chiến lược này sẽ lưu các phản hồi có mã trạng thái 200 vào bộ nhớ đệm dưới dạng cũng như các phản hồi không rõ ràng. Phản hồi mờ là các yêu cầu trên nhiều nguồn gốc, trong đó phản hồi không làm như vậy hỗ trợ CORS.
Nếu yêu cầu mạng không thành công và không có kết quả nào khớp với bộ nhớ đệm, thì lệnh này sẽ gửi
ngoại lệ WorkboxError
.
Thuộc tính
-
hàm khởi tạo
void
Hàm
constructor
có dạng như sau:(options?: NetworkFirstOptions) => {...}
-
tùy chọn
NetworkFirstOptions không bắt buộc
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
returns
Lời hứa<vô hiệu>
-
-
_getResponse
void
Hàm
_getResponse
có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
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ề
Promise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.Khi một thực thể chiến lược được đăng ký bằng Workbox
workbox-routing.Route
, phương thức này được tự động được gọi khi tuyến đường này khớp.Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một
FetchEvent
độc lập trình nghe bằng cách truyền tham số đó đếnevent.respondWith()
.Hàm
handle
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
Promise<Response>
-
-
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
, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa[response, done]
, trong đó (response
) tương đương với kết quả trả về củahandle()
và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tấtevent.waitUntil()
trong quá trình thực hiện chiến lược.Bạn có thể chờ đợi lời hứa
done
để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) hoàn tất thành công.Hàm
handleAll
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
[Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]
Một bộ dữ liệu [response, xong] những lời hứa có thể được dùng để xác định thời điểm câu trả lời được giải quyết cũng như khi trình xử lý đã hoàn thành tất cả công việc của mình.
-
NetworkFirstOptions
Thuộc tính
-
cacheName
chuỗi không bắt buộc
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
networkTimeoutSeconds
số không bắt buộc
-
trình bổ trợ
WorkboxPlugin[] không bắt buộc
NetworkOnly
Việc triển khai một chỉ với mạng .
Lớp này rất hữu ích nếu bạn muốn tận dụng bất kỳ Trình bổ trợ hộp làm việc.
Nếu yêu cầu mạng không thành công, thì thao tác này sẽ gửi một ngoại lệ WorkboxError
.
Thuộc tính
-
hàm khởi tạo
void
Hàm
constructor
có dạng như sau:(options?: NetworkOnlyOptions) => {...}
-
tùy chọn
NetworkOnlyOptions không bắt buộc
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
returns
Lời hứa<vô hiệu>
-
-
_getResponse
void
Hàm
_getResponse
có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
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ề
Promise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.Khi một thực thể chiến lược được đăng ký bằng Workbox
workbox-routing.Route
, phương thức này được tự động được gọi khi tuyến đường này khớp.Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một
FetchEvent
độc lập trình nghe bằng cách truyền tham số đó đếnevent.respondWith()
.Hàm
handle
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
Promise<Response>
-
-
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
, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa[response, done]
, trong đó (response
) tương đương với kết quả trả về củahandle()
và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tấtevent.waitUntil()
trong quá trình thực hiện chiến lược.Bạn có thể chờ đợi lời hứa
done
để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) hoàn tất thành công.Hàm
handleAll
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
[Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]
Một bộ dữ liệu [response, xong] những lời hứa có thể được dùng để xác định thời điểm câu trả lời được giải quyết cũng như khi trình xử lý đã hoàn thành tất cả công việc của mình.
-
NetworkOnlyOptions
Thuộc tính
-
fetchOptions
RequestInit không bắt buộc
-
networkTimeoutSeconds
số không bắt buộc
-
trình bổ trợ
WorkboxPlugin[] không bắt buộc
StaleWhileRevalidate
Việc triển khai một cũ trong khi xác thực lại .
Các tài nguyên được yêu cầu song song từ cả bộ nhớ đệm và mạng. Chiến lược sẽ phản hồi bằng phiên bản đã lưu vào bộ nhớ đệm nếu có, nếu không đợi phản hồi mạng. Bộ nhớ đệm được cập nhật bằng phản hồi mạng với mỗi yêu cầu thành công.
Theo mặc định, chiến lược này sẽ lưu các phản hồi có mã trạng thái 200 vào bộ nhớ đệm dưới dạng cũng như các phản hồi không rõ ràng. Phản hồi mờ là các yêu cầu trên nhiều nguồn gốc, trong đó phản hồi không làm như vậy hỗ trợ CORS.
Nếu yêu cầu mạng không thành công và không có kết quả nào khớp với bộ nhớ đệm, thì lệnh này sẽ gửi
ngoại lệ WorkboxError
.
Thuộc tính
-
hàm khởi tạo
void
Hàm
constructor
có dạng như sau:(options?: StrategyOptions) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
returns
Lời hứa<vô hiệu>
-
-
_getResponse
void
Hàm
_getResponse
có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
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ề
Promise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.Khi một thực thể chiến lược được đăng ký bằng Workbox
workbox-routing.Route
, phương thức này được tự động được gọi khi tuyến đường này khớp.Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một
FetchEvent
độc lập trình nghe bằng cách truyền tham số đó đếnevent.respondWith()
.Hàm
handle
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
Promise<Response>
-
-
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
, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa[response, done]
, trong đó (response
) tương đương với kết quả trả về củahandle()
và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tấtevent.waitUntil()
trong quá trình thực hiện chiến lược.Bạn có thể chờ đợi lời hứa
done
để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) hoàn tất thành công.Hàm
handleAll
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
[Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]
Một bộ dữ liệu [response, xong] những lời hứa có thể được dùng để xác định thời điểm câu trả lời được giải quyết cũng như khi trình xử lý đã hoàn thành tất cả công việc của mình.
-
Strategy
Một lớp cơ sở trừu tượng mà mọi lớp chiến lược khác phải mở rộng:
Thuộc tính
-
hàm khởi tạo
void
Tạo một phiên bản mới của chiến lược và đặt tất cả các tùy chọn được ghi lại trong tài liệu làm thuộc tính của đối tượng công khai.
Lưu ý: nếu lớp chiến lược tuỳ chỉnh mở rộng lớp Chiến lược cơ bản và không cần nhiều hơn những thuộc tính này, nên không cần xác định hàm khởi tạo.
Hàm
constructor
có dạng như sau:(options?: StrategyOptions) => {...}
-
tùy chọn
StrategyOptions không bắt buộc
-
returns
-
-
cacheName
string
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
-
_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ý
-
request
Yêu cầu
-
event
ExtendableEvent
-
returns
Lời hứa<vô hiệu>
-
-
_getResponse
void
Hàm
_getResponse
có dạng như sau:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
trình xử lý
-
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ý
-
returns
Promise<Response>
-
-
handle
void
Thực hiện chiến lược yêu cầu và trả về
Promise
sẽ phân giải bằngResponse
, gọi tất cả lệnh gọi lại trình bổ trợ có liên quan.Khi một thực thể chiến lược được đăng ký bằng Workbox
workbox-routing.Route
, phương thức này được tự động được gọi khi tuyến đường này khớp.Ngoài ra, bạn cũng có thể sử dụng phương thức này trong một
FetchEvent
độc lập trình nghe bằng cách truyền tham số đó đếnevent.respondWith()
.Hàm
handle
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
Promise<Response>
-
-
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
, thì nó sẽ hàm này sẽ trả về một bộ dữ liệu gồm các lời hứa[response, done]
, trong đó (response
) tương đương với kết quả trả về củahandle()
và giá trị sau là một Cam kết sẽ thực hiện sau khi thêm bất kỳ lời hứa nào Đã hoàn tấtevent.waitUntil()
trong quá trình thực hiện chiến lược.Bạn có thể chờ đợi lời hứa
done
để đảm bảo thực hiện thêm bất kỳ công việc nào mà thì chiến lược (thường là lưu phản hồi vào bộ nhớ đệm) hoàn tất thành công.Hàm
handleAll
có dạng như sau:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
tùy chọn
FetchEvent | HandlerCallbackOptions
FetchEvent
hoặc một đối tượng có phần tử các thuộc tính được liệt kê bên dưới.
-
returns
[Lời hứa<Phản hồi>, Lời hứa<vô hiệu>]
Một bộ dữ liệu [response, xong] những lời hứa có thể được dùng để xác định thời điểm câu trả lời được giải quyết cũng như khi trình xử lý đã hoàn thành tất cả công việc của mình.
-
StrategyHandler
Một lớp được tạo mỗi khi một thực thể của Chiến lược gọi
workbox-strategies.Strategy~handle
hoặc
workbox-strategies.Strategy~handleAll
gói tất cả phương thức tìm nạp và
các hành động lưu vào bộ nhớ đệm xung quanh lệnh gọi lại trình bổ trợ và theo dõi thời điểm chiến lược
là "hoàn tất" (tức là mọi hứa hẹn event.waitUntil()
được thêm vào đã được giải quyết).
Thuộc tính
-
hàm khởi tạo
void
Tạo một thực thể mới liên kết với chiến lược và sự kiện đã truyền đang xử lý yêu cầu.
Hàm khởi tạo cũng khởi tạo trạng thái sẽ được truyền cho mỗi các trình bổ trợ xử lý yêu cầu này.
Hàm
constructor
có dạng như sau:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
chiến lược
-
tùy chọn
-
returns
-
-
event
ExtendableEvent
-
tham số
bất kỳ không bắt buộc
-
request
Yêu cầu
-
url
URL không bắt buộc
-
cacheMatch
void
So khớp một yêu cầu từ bộ nhớ đệm (và gọi bất kỳ trình bổ trợ nào thích hợp phương thức gọi lại) bằng cách sử dụng
cacheName
,matchOptions
vàplugins
được xác định trên đối tượng chiến lược.Các phương thức trong vòng đời của trình bổ trợ sau đây sẽ được gọi khi sử dụng phương thức này:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
Hàm
cacheMatch
có dạng như sau:(key: RequestInfo) => {...}
-
phím
RequestInfo
Yêu cầu hoặc URL để sử dụng làm khoá bộ nhớ đệm.
-
returns
Promise<Response>
Phản hồi trùng khớp, nếu tìm thấy.
-
cachePut
void
Đặt một cặp yêu cầu/phản hồi vào bộ nhớ đệm (và gọi bất kỳ cặp yêu cầu/phản hồi nào có thể áp dụng) phương thức gọi lại trình bổ trợ) bằng cách sử dụng
cacheName
vàplugins
được xác định trên làm đối tượng chiến lược.Các phương thức trong vòng đời của trình bổ trợ sau đây sẽ được gọi khi sử dụng phương thức này:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
Hàm
cachePut
có dạng như sau:(key: RequestInfo, response: Response) => {...}
-
phím
RequestInfo
Yêu cầu hoặc URL để sử dụng làm khoá bộ nhớ đệm.
-
phản hồi
Phản hồi
Phản hồi cho bộ nhớ đệm.
-
returns
Promise<boolean>
false
nếu cacheWillUpdate gây ra phản hồi không được lưu vào bộ nhớ đệm và nếu không thìtrue
.
-
hủy bỏ
void
Ngừng chạy chiến lược và ngay lập tức giải quyết mọi vấn đề đang chờ xử lý
waitUntil()
hứa hẹn.Hàm
destroy
có dạng như sau:() => {...}
-
doneWaiting
void
Trả về lời hứa sẽ giải quyết sau khi tất cả lời hứa được chuyển đến
workbox-strategies.StrategyHandler~waitUntil
đã giải quyết.Lưu ý: mọi công việc được thực hiện sau khi
doneWaiting()
thanh toán đều phải được thực hiện theo cách thủ công được chuyển đến phương thứcwaitUntil()
của một sự kiện (không phải phương thức của trình xử lý nàywaitUntil()
), nếu không thì luồng trình chạy dịch vụ sẽ bị giết trước khi hoàn tất công việc.Hàm
doneWaiting
có dạng như sau:() => {...}
-
returns
Lời hứa<vô hiệu>
-
-
tìm nạp
void
Tìm nạp một yêu cầu nhất định (và gọi mọi lệnh gọi lại trình bổ trợ thích hợp phương thức) bằng cách sử dụng
fetchOptions
(đối với các yêu cầu không phải điều hướng) vàplugins
được xác định trên đối tượngStrategy
.Các phương thức trong vòng đời của trình bổ trợ sau đây sẽ được gọi khi sử dụng phương thức này:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
Hàm
fetch
có dạng như sau:(input: RequestInfo) => {...}
-
input
RequestInfo
URL hoặc yêu cầu tìm nạp.
-
returns
Promise<Response>
-
fetchAndCachePut
void
Gọi
this.fetch()
và (trong nền) chạythis.cachePut()
trên phản hồi được tạo bởithis.fetch()
.Cuộc gọi đến
this.cachePut()
sẽ tự động gọithis.waitUntil()
, nên bạn không phải gọiwaitUntil()
trên sự kiện theo cách thủ công.Hàm
fetchAndCachePut
có dạng như sau:(input: RequestInfo) => {...}
-
input
RequestInfo
Yêu cầu hoặc URL cần tìm nạp và lưu vào bộ nhớ đệm.
-
returns
Promise<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ự. Vòng chung kếtRequest
đối tượng do trình bổ trợ gần đây nhất trả về được coi là khoá bộ nhớ đệm cho bộ nhớ đệm đọc và/hoặc ghi. Nếu không có lệnh gọi lại trình bổ trợcacheKeyWillBeUsed
nào có được đăng ký, yêu cầu đã chuyển được trả về ở dạng chưa sửa đổiHàm
getCacheKey
có dạng như sau:(request: Request, mode: "read"
| "write"
) => {...}-
request
Yêu cầu
-
chế độ
"đọc"
| "viết"
-
returns
Promise<Request>
-
-
hasCallback
void
Trả về true nếu chiến lược có ít nhất một trình bổ trợ với giá trị .
Hàm
hasCallback
có dạng như sau:(name: C) => {...}
-
tên
C
Tên của lệnh gọi lại cần kiểm tra.
-
returns
boolean
-
-
iterateCallbacks
void
Chấp nhận một lệnh gọi lại và trả về một lệnh gọi lại có thể lặp lại của các lệnh gọi lại trình bổ trợ phù hợp, trong đó mỗi lệnh gọi lại được gói bằng trạng thái trình xử lý hiện tại (tức là khi bạn gọi mỗi lệnh gọi lại, bất kỳ tham số đối tượng nào bạn truyền nó sẽ được hợp nhất với trạng thái hiện tại của trình bổ trợ).
Hàm
iterateCallbacks
có dạng như sau:(name: C) => {...}
-
tên
C
Tên cho lệnh gọi lại sẽ chạy
-
returns
Trình tạo<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
Chạy tất cả các lệnh gọi lại trình bổ trợ khớp với tên đã cho theo thứ tự, truyền giá trị đối tượng tham số nhất định (hợp nhất trạng thái trình bổ trợ hiện tại) làm đối tượng duy nhất đối số.
Lưu ý: vì phương thức này chạy tất cả các trình bổ trợ nên nó không phù hợp với các trường hợp trong đó giá trị trả về của lệnh gọi lại cần được áp dụng trước khi gọi lệnh gọi lại tiếp theo. Xem
workbox-strategies.StrategyHandler#iterateCallbacks
bên dưới để biết cách xử lý trường hợp đó.Hàm
runCallbacks
có dạng như sau:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
tên
C
Tên của lệnh gọi lại để chạy trong mỗi trình bổ trợ.
-
tham số
Bỏ qua <indexedAccess"state"
>Đối tượng cần truyền dưới dạng tham số đầu tiên (và duy nhất) khi thực thi từng lệnh gọi lại. Đối tượng này sẽ được hợp nhất với trạng thái hiện tại của trình bổ trợ trước khi thực thi lệnh gọi lại.
-
returns
Lời hứa<vô hiệu>
-
-
waitUntil
void
Thêm lời hứa vào [mở rộng hứa hẹn trọn đời]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
của sự kiện sự kiện liên quan đến yêu cầu được xử lý (thường làFetchEvent
).Lưu ý: bạn có thể chờ
workbox-strategies.StrategyHandler~doneWaiting
biết thời điểm tất cả các lời hứa đã thêm đã được thanh toán.Hàm
waitUntil
có dạng như sau:(promise: Promise<T>) => {...}
-
lời hứa
Cam kết<T>
Lời hứa bổ sung vào thời gian dài hơn cam kết trọn đời của sự kiện đã kích hoạt yêu cầu.
-
returns
Cam kết<T>
-
StrategyOptions
Thuộc tính
-
cacheName
chuỗi không bắt buộc
-
fetchOptions
RequestInit không bắt buộc
-
matchOptions
CacheQueryOptions không bắt buộc
-
trình bổ trợ
WorkboxPlugin[] không bắt buộc