Trang này được dịch bởi Cloud Translation API.

công-thức-tính-toán

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

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 chọ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 chọ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 chọ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 chọ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 chọn

StaticResourceOptions không bắt buộc

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Thông số

tùy chọn

WarmStrategyCacheOptions