Một số mẫu phổ biến, đặc biệt là về việc định tuyến và lưu vào bộ nhớ đệm, đủ phổ biến để có thể chuẩn hoá thành các công thức có thể sử dụng lại. workbox-recipes
cung cấp những dữ liệu này trong một gói dễ sử dụng, cho phép bạn nhanh chóng thiết lập và chạy dịch vụ cùng với một trình chạy dịch vụ có chức năng cao.
Công thức nấu ăn
Mỗi công thức kết hợp một số mô-đun Workbox với nhau, gộp các mô-đun đó thành các mẫu thường dùng. Các công thức dưới đây sẽ hiển thị công thức mà bạn sử dụng khi sử dụng mô-đun này và mẫu tương đương mà mô-đun đang sử dụng, nếu bạn muốn tự viết nó.
Dự phòng ngoại tuyến
Công thức dự phòng khi không có mạng cho phép trình chạy dịch vụ phân phát trang web, hình ảnh hoặc phông chữ nếu có lỗi định tuyến cho bất kỳ thành phần nào trong số ba thành phần này, ví dụ: nếu người dùng không có mạng và không có lượt truy cập vào bộ nhớ đệm. Trong phiên bản 6.1.0 của Công thức Workbox, yêu cầu lưu các mục này vào bộ nhớ đệm bằng cách lưu trước đã bị xoá; để tương thích ngược, trước tiên, công thức này sẽ tìm các mục trong bộ nhớ đệm trước khi thử bộ nhớ đệm của riêng công thức.
Theo mặc định, công thức này giả định trang dự phòng là offline.html
và không có hình ảnh hoặc phông chữ dự phòng. Xem các tuỳ chọn dự phòng ngoại tuyến để biết danh sách tất cả các tuỳ chọn cấu hình.
Phương thức dự phòng khi không có mạng sẽ chỉ được áp dụng nếu có tuyến phù hợp cho một yêu cầu nhất định. Nếu đang sử dụng công thức dự phòng ngoại tuyến, bạn sẽ phải tự tạo các tuyến. Cách đơn giản nhất là sử dụng phương thức setDefaultHandler()
để tạo một tuyến áp dụng chiến lược NetworkOnly
cho tất cả các yêu cầu, như minh hoạ dưới đây. Các công thức khác, chẳng hạn như bộ nhớ đệm trang, bộ nhớ đệm tài nguyên tĩnh hoặc bộ nhớ đệm hình ảnh, thiết lập các tuyến cho bộ nhớ đệm tương ứng. Bạn không bắt buộc phải sử dụng setDefaultHandler()
khi sử dụng cả phương thức dự phòng ngoại tuyến và một trong các công thức đó.
Công thức
import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
setDefaultHandler(new NetworkOnly());
offlineFallback();
Mẫu
import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;
setDefaultHandler(new NetworkOnly());
self.addEventListener('install', event => {
const files = [pageFallback];
if (imageFallback) {
files.push(imageFallback);
}
if (fontFallback) {
files.push(fontFallback);
}
event.waitUntil(
self.caches
.open('workbox-offline-fallbacks')
.then(cache => cache.addAll(files))
);
});
const handler = async options => {
const dest = options.request.destination;
const cache = await self.caches.open('workbox-offline-fallbacks');
if (dest === 'document') {
return (await cache.match(pageFallback)) || Response.error();
}
if (dest === 'image' && imageFallback !== false) {
return (await cache.match(imageFallback)) || Response.error();
}
if (dest === 'font' && fontFallback !== false) {
return (await cache.match(fontFallback)) || Response.error();
}
return Response.error();
};
setCatchHandler(handler);
Bộ nhớ đệm chiến lược ấm
Công thức lưu vào bộ nhớ đệm chiến lược ấm cho phép bạn tải các URL đã cung cấp vào bộ nhớ đệm trong giai đoạn install
của trình chạy dịch vụ, lưu các URL này vào bộ nhớ đệm bằng các tùy chọn của chiến lược được cung cấp. Bạn có thể sử dụng tính năng này thay cho tính năng lưu vào bộ nhớ đệm trước nếu biết các URL cụ thể mà bạn muốn lưu vào bộ nhớ đệm, muốn làm ấm bộ nhớ đệm của một tuyến đường hoặc các vị trí tương tự mà bạn muốn lưu URL vào bộ nhớ đệm trong quá trình cài đặt.
Xem các tuỳ chọn bộ nhớ đệm chiến lược ấm để biết danh sách tất cả các tuỳ chọn cấu hình.
Công thức
import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];
warmStrategyCache({urls, strategy});
Mẫu
import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];
self.addEventListener('install', event => {
// handleAll returns two promises, the second resolves after all items have been added to cache.
const done = urls.map(
path =>
strategy.handleAll({
event,
request: new Request(path),
})[1]
);
event.waitUntil(Promise.all(done));
});
Bộ nhớ đệm của trang
Công thức lưu trang lưu vào bộ nhớ đệm cho phép trình chạy dịch vụ của bạn phản hồi yêu cầu truy cập một trang HTML (thông qua điều hướng URL) bằng chiến lược lưu vào bộ nhớ đệm trên mạng, được tối ưu hoá, lý tưởng nhất là cho phép bản dự phòng bộ nhớ đệm xuất hiện đủ nhanh để đạt điểm nội dung lớn nhất hiển thị dưới 4 giây.
Theo mặc định, công thức này giả định thời gian chờ mạng là 3 giây và hỗ trợ làm ấm bộ nhớ đệm thông qua tuỳ chọn warmCache
. Xem tuỳ chọn bộ nhớ đệm của trang để biết danh sách tất cả các tuỳ chọn cấu hình.
Công thức
import {pageCache} from 'workbox-recipes';
pageCache();
Mẫu
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;
registerRoute(
matchCallback,
new NetworkFirst({
networkTimeoutSeconds,
cacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
Bộ nhớ đệm tài nguyên tĩnh
Công thức lưu bộ nhớ đệm tài nguyên tĩnh cho phép trình chạy dịch vụ của bạn phản hồi yêu cầu về tài nguyên tĩnh, cụ thể là yêu cầu CSS, JavaScript và Web Worker, bằng chiến lược lưu vào bộ nhớ đệm đã lỗi thời trong khi xác thực lại để các nội dung đó có thể nhanh chóng được phân phát từ bộ nhớ đệm và được cập nhật ở chế độ nền
Công thức này hỗ trợ làm ấm bộ nhớ đệm thông qua tuỳ chọn warmCache
. Hãy xem các tuỳ chọn về bộ nhớ đệm tài nguyên tĩnh để biết danh sách tất cả các tuỳ chọn cấu hình.
Công thức
import {staticResourceCache} from 'workbox-recipes';
staticResourceCache();
Mẫu
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
const cacheName = 'static-resources';
const matchCallback = ({request}) =>
// CSS
request.destination === 'style' ||
// JavaScript
request.destination === 'script' ||
// Web Workers
request.destination === 'worker';
registerRoute(
matchCallback,
new StaleWhileRevalidate({
cacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
Bộ nhớ đệm hình ảnh
Công thức lưu hình ảnh trong bộ nhớ đệm cho phép trình chạy dịch vụ của bạn phản hồi yêu cầu đối với hình ảnh bằng chiến lược lưu vào bộ nhớ đệm ưu tiên bộ nhớ đệm để sau khi hình ảnh có sẵn trong bộ nhớ đệm, người dùng không cần thực hiện yêu cầu khác nữa.
Theo mặc định, công thức này lưu tối đa 60 hình ảnh vào bộ nhớ đệm, mỗi hình ảnh lưu trong 30 ngày và hỗ trợ làm ấm bộ nhớ đệm thông qua tuỳ chọn warmCache
. Hãy xem các tuỳ chọn bộ nhớ đệm hình ảnh để biết danh sách tất cả các tuỳ chọn cấu hình.
Công thức
import {imageCache} from 'workbox-recipes';
imageCache();
Mẫu
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';
const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;
registerRoute(
matchCallback,
new CacheFirst({
cacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
new ExpirationPlugin({
maxEntries,
maxAgeSeconds,
}),
],
})
);
Bộ nhớ đệm Google Fonts
Công thức Google Fonts lưu hai phần của yêu cầu Google Fonts vào bộ nhớ đệm:
- Tệp kiểu chứa các định nghĩa
@font-face
liên kết đến các tệp phông chữ. - Các tệp phông chữ tĩnh, đã sửa đổi.
Vì tệp kiểu có thể thay đổi thường xuyên, nên chiến lược lưu vào bộ nhớ đệm stale-while-revalidate (lỗi thời trong khi xác thực lại) được sử dụng. Mặt khác, bản thân các tệp phông chữ không thay đổi và có thể tận dụng chiến lược bộ nhớ đệm trước tiên.
Theo mặc định, công thức này sẽ lưu vào bộ nhớ đệm tối đa 30 tệp phông chữ, mỗi tệp có thời hạn một năm. Xem các tuỳ chọn bộ nhớ đệm của Google Fonts để biết danh sách tất cả các tuỳ chọn cấu hình.
Công thức
import {googleFontsCache} from 'workbox-recipes';
googleFontsCache();
Mẫu
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';
const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;
registerRoute(
({url}) => url.origin === 'https://fonts.googleapis.com',
new StaleWhileRevalidate({
cacheName: sheetCacheName,
})
);
// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
({url}) => url.origin === 'https://fonts.gstatic.com',
new CacheFirst({
cacheName: fontCacheName,
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
new ExpirationPlugin({
maxAgeSeconds,
maxEntries,
}),
],
})
);
Sử dụng nhanh
Việc kết hợp tất cả các công thức này sẽ tạo ra một worker dịch vụ phản hồi các yêu cầu trang bằng chiến lược lưu vào bộ nhớ đệm ưu tiên mạng, phản hồi các yêu cầu CSS, JavaScript và Web Worker bằng chiến lược lỗi thời trong khi xác thực lại, phản hồi các yêu cầu hình ảnh bằng chiến lược ưu tiên bộ nhớ đệm, lưu phông chữ Google vào bộ nhớ đệm đúng cách và cung cấp phương án dự phòng khi không có mạng cho các yêu cầu trang. Bạn có thể thực hiện tất cả những điều sau:
import {
pageCache,
imageCache,
staticResourceCache,
googleFontsCache,
offlineFallback,
} from 'workbox-recipes';
pageCache();
googleFontsCache();
staticResourceCache();
imageCache();
offlineFallback();
Loại
GoogleFontCacheOptions
Thuộc tính
-
cachePrefix
chuỗi không bắt buộc
-
maxAgeSeconds
số không bắt buộc
-
maxEntries
số không bắt buộc
ImageCacheOptions
Thuộc tính
-
cacheName
chuỗi không bắt buộc
-
matchCallback
RouteMatchCallback không bắt buộc
-
maxAgeSeconds
số không bắt buộc
-
maxEntries
số không bắt buộc
-
trình bổ trợ
WorkboxPlugin[] không bắt buộc
-
warmCache
string[] không bắt buộc
OfflineFallbackOptions
Thuộc tính
-
fontFallback
chuỗi không bắt buộc
-
imageFallback
chuỗi không bắt buộc
-
pageFallback
chuỗi không bắt buộc
PageCacheOptions
Thuộc tính
-
cacheName
chuỗi không bắt buộc
-
matchCallback
RouteMatchCallback không bắt buộc
-
networkTimeoutSeconds
số không bắt buộc
-
plugins
WorkboxPlugin[] không bắt buộc
-
warmCache
string[] không bắt buộc
StaticResourceOptions
Thuộc tính
-
cacheName
chuỗi không bắt buộc
-
matchCallback
RouteMatchCallback không bắt buộc
-
trình bổ trợ
WorkboxPlugin[] không bắt buộc
-
warmCache
string[] không bắt buộc
WarmStrategyCacheOptions
Thuộc tính
-
chiến lược
-
url
string[]
Phương thức
googleFontsCache()
workbox-recipes.googleFontsCache(
options?: GoogleFontCacheOptions,
)
Triển khai công thức lưu vào bộ nhớ đệm [GoogleFonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
Thông số
-
tùy chọn
GoogleFontCacheOptions không bắt buộc
imageCache()
workbox-recipes.imageCache(
options?: ImageCacheOptions,
)
Cách triển khai [công thức lưu hình ảnh vào bộ nhớ đệm]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images
Thông số
-
tùy chọn
ImageCacheOptions không bắt buộc
offlineFallback()
workbox-recipes.offlineFallback(
options?: OfflineFallbackOptions,
)
Cách triển khai [công thức dự phòng toàn diện]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks
. Hãy nhớ bao gồm các phương án dự phòng khi chèn trước bộ nhớ đệm
Thông số
-
tùy chọn
OfflineFallbackOptions không bắt buộc
pageCache()
workbox-recipes.pageCache(
options?: PageCacheOptions,
)
Triển khai một công thức lưu trang vào bộ nhớ đệm có thời gian chờ mạng
Thông số
-
tùy chọn
PageCacheOptions không bắt buộc
staticResourceCache()
workbox-recipes.staticResourceCache(
options?: StaticResourceOptions,
)
Việc triển khai [công thức cho tệp CSS và JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files
Thông số
-
tùy chọn
StaticResourceOptions không bắt buộc
warmStrategyCache()
workbox-recipes.warmStrategyCache(
options: WarmStrategyCacheOptions,
)
Thông số
-
tùy chọn