Trong một số trường hợp nhất định, bạn có thể muốn lưu phản hồi dự phòng vào bộ nhớ đệm phòng trường hợp người dùng không có kết nối mạng. Triển khai tính năng dự phòng là một giải pháp thay thế cho các hành vi lưu vào bộ nhớ đệm mà các chiến lược như ưu tiên mạng hoặc lỗi thời trong khi xác thực lại cung cấp.
Dự phòng là phản hồi chung, phù hợp với tất cả. Đây là phần giữ chỗ hiệu quả hơn so với phản hồi mà trình duyệt sẽ cung cấp theo mặc định khi yêu cầu không thành công. Dưới đây là một số ví dụ:
- Giải pháp thay thế cho "hình ảnh bị thiếu" phần giữ chỗ.
- Giải pháp HTML thay thế cho tiêu chuẩn "không có kết nối mạng nào" .
Chỉ trang ngoại tuyến
Nếu bạn chỉ cần cung cấp trang HTML ngoại tuyến tuỳ chỉnh mà không cần làm gì khác, thì sau đây là công thức cơ bản mà bạn có thể làm theo:
import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
setDefaultHandler(new NetworkOnly());
offlineFallback();
Mã ở trên sử dụng setDefaultHandler để sử dụng chiến lược chỉ dành cho mạng làm chiến lược mặc định cho tất cả các tuyến. Sau đó, hàm này sẽ chạy công thức offlineFallback để phân phát bản dự phòng ngoại tuyến trong trường hợp xảy ra lỗi. Công thức này giả định tệp HTML dự phòng ngoại tuyến của bạn sẽ có tên là offline.html và được phân phát từ gốc của máy chủ web.
Dự phòng toàn diện
Bất cứ khi nào xảy ra lỗi mạng hoặc thiếu bộ nhớ đệm, các chiến lược lưu vào bộ nhớ đệm do workbox-strategies cung cấp sẽ từ chối một cách nhất quán. Điều này quảng bá mẫu cài đặt "catch" chung để xử lý mọi lỗi trong một hàm của trình xử lý, cho phép bạn cung cấp các bản dự phòng khác nhau cho các giá trị request.destination khác nhau.
Ví dụ sau đây sử dụng công thức warmStrategyCache từ workbox-recipes và thiết lập một trình xử lý bắt để phân phát các mục đã lưu vào bộ nhớ đệm trước trong bộ nhớ đệm của thời gian chạy. Tuy nhiên, việc lưu vào bộ nhớ đệm các tính năng dự phòng có thể phù hợp hơn với ứng dụng của bạn:
import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';
// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();
// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
strategy: FALLBACK_STRATEGY,
});
// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());
// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
// The warmStrategyCache recipe is used to add the fallback assets ahead of
// time to the runtime cache, and are served in the event of an error below.
// Use `event`, `request`, and `url` to figure out how to respond, or
// use request.destination to match requests for specific resource types.
switch (request.destination) {
case 'document':
return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});
case 'image':
return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});
default:
// If we don't have a fallback, return an error response.
return Response.error();
}
});
Trong lần tiếp theo, các phản hồi dự phòng được lưu trước vào bộ nhớ đệm bằng injectManifest với các công cụ xây dựng của Workbox và được phân phát dưới dạng dự phòng trong trường hợp xảy ra lỗi với phương thức matchPrecache.
import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);
// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());
// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
// Fallback assets are precached when the service worker is installed, and are
// served in the event of an error below. Use `event`, `request`, and `url` to
// figure out how to respond, or use request.destination to match requests for
// specific resource types.
switch (request.destination) {
case 'document':
// FALLBACK_HTML_URL must be defined as a precached URL for this to work:
return matchPrecache(FALLBACK_HTML_URL);
case 'image':
// FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
return matchPrecache(FALLBACK_IMAGE_URL);
default:
// If we don't have a fallback, return an error response.
return Response.error();
}
});
Một ví dụ về trường hợp sử dụng cho thiết lập dự phòng thứ hai là khi một trang được lưu vào bộ nhớ đệm trước, nhưng hình ảnh (hoặc các nội dung khác) mà trang yêu cầu thì không. Trang vẫn có thể đọc được từ bộ nhớ đệm khi người dùng không kết nối mạng. Tuy nhiên, hệ thống có thể cung cấp phần giữ chỗ dự phòng hoặc chức năng thay thế nếu xảy ra lỗi mạng.
Đang khởi động bộ nhớ đệm trong thời gian chạy
Workbox duy trì các bộ nhớ đệm riêng biệt để lưu vào bộ nhớ đệm trước và bộ nhớ đệm trong thời gian chạy. Có thể có những trường hợp bạn muốn lưu nội dung nào đó vào bộ nhớ đệm trước mà không cần dựa vào việc lưu vào bộ nhớ đệm, vì các bản cập nhật cho tệp kê khai trước trong bộ nhớ đệm sẽ yêu cầu bạn triển khai một trình chạy dịch vụ đã cập nhật.
Để thêm các thành phần vào bộ nhớ đệm trong thời gian chạy trước, bạn có thể sử dụng theo công thức warmStrategyCache trong workbox-recipes. Trong trường hợp này, chiến lược này sẽ gọi Cache.addAll trong sự kiện install của trình chạy dịch vụ.
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});
Kết luận
Việc quản lý phản hồi dự phòng cho các yêu cầu không thực hiện được sẽ mất một chút công sức, nhưng nếu lập kế hoạch trước một chút, bạn có thể thiết lập ứng dụng web của mình để cung cấp nội dung và chức năng ở mức độ nào đó khi người dùng không có kết nối mạng.