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

Một số mẫu phổ biến, đặc biệt là xoay quanh việc định tuyến và lưu vào bộ nhớ đệm, đủ phổ biến để có thể chuẩn hoá thành công thức nấu ăn có thể tái sử dụng. 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 thiết lập và vận hành nhanh chóng bằng trình chạy dịch vụ có chức năng cao.

Recipe

Mỗi công thức kết hợp một số mô-đun Workbox với nhau, nhóm các mô-đun này 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ô hình tương đương mà mô-đun đang sử dụng, nếu bạn muốn tự viết.

Dự phòng ngoại tuyến

Công thức dự phòng ngoại tuyến 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 một trong ba thuộc tính này, chẳng hạn như nếu người dùng ngoại tuyến và không có lượt truy cập nào vào bộ nhớ đệm. Trong phiên bản 6.1.0 của WorkboxRecipe, yêu cầu lưu các mục này vào bộ nhớ đệm bằng cách sử dụng tính năng tạo bộ nhớ đệm đã bị loại bỏ; để có khả năng tương thích ngược, tính năng này sẽ tìm các mục trong bộ nhớ đệm trước trước khi thử bộ nhớ đệm của riêng mình.

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 nào. 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 án dự phòng ngoại tuyến sẽ chỉ được áp dụng nếu có một lộ trình 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ẽ cần phải tự tạo các tuyến đường. Cách đơn giản nhất để thực hiện 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ư thể hiện dưới đây. Các công thức khác, như bộ nhớ đệm của trang, bộ nhớ đệm cho tài nguyên tĩnh hoặc bộ nhớ đệm của hình ảnh, thiết lập tuyến cho các 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ả tính năng 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 khởi động

Công thức của bộ nhớ đệm của 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 chúng vào bộ nhớ đệm bằng các lựa chọn của chiến lược đã cung cấp. Có thể sử dụng phương pháp này thay cho việc lưu trước nếu bạn 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 những nơi 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 bộ nhớ đệm của trang cho phép trình chạy dịch vụ phản hồi yêu cầu về trang HTML (thông qua tính năng điều hướng URL) với chiến lược lưu vào bộ nhớ đệm mạng trước, được tối ưu hoá để lý tưởng nhất là cho phép bản dự phòng bộ nhớ đệm đến đủ nhanh với điểm số hiển thị nội dung lớn nhất dưới 4,0 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ợ tính năng làm nóng bộ nhớ đệm thông qua tuỳ chọn warmCache. Xem các tuỳ chọn về 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 bộ nhớ đệm của tài nguyên tĩnh cho phép trình chạy dịch vụ phản hồi yêu cầu về các 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 để những nội dung đó có thể được phân phát nhanh chóng từ bộ nhớ đệm và được cập nhật trong nền

Công thức này hỗ trợ làm nóng bộ nhớ đệm thông qua tuỳ chọn warmCache. Xem các tuỳ chọn bộ nhớ đệm cho 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 vào bộ nhớ đệm cho phép worker của bạn phản hồi một yêu cầu về hình ảnh bằng chiến lược lưu hình ảnh vào bộ nhớ đệm ưu tiên vào bộ nhớ đệm để khi hình ảnh đã có trong bộ nhớ đệm, người dùng không cần gửi yêu cầu khác.

Công thức này, theo mặc định, lưu tối đa 60 hình ảnh vào bộ nhớ đệm, mỗi hình ảnh trong 30 ngày và hỗ trợ tính năng làm nóng bộ nhớ đệm thông qua tuỳ chọn warmCache. Xem các tuỳ chọn bộ nhớ đệm của 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 của Google Fonts

Công thức Google Fonts sẽ lưu vào bộ nhớ đệm hai phần của yêu cầu Google Fonts:

• Biểu định kiểu có 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ì biểu định kiểu có thể thay đổi thường xuyên, nên chiến lược lưu vào bộ nhớ đệm đã lỗi thời trong khi xác thực lại sẽ được sử dụng. Mặt khác, bản thân tệp phông chữ không thay đổi và có thể tận dụng chiến lược ưu tiên bộ nhớ đệm.

Công thức này, theo mặc định, lưu tối đa 30 tệp phông chữ vào bộ nhớ đệm, mỗi tệp cho 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 lựa 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ông thức với nhau sẽ tạo ra một trình chạy 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 trước tiên là mạng, phản hồi các yêu cầu của CSS, JavaScript và Web Worker bằng chiến lược cũ 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 lưu vào bộ nhớ đệm, lưu Google Fonts vào bộ nhớ đệm đúng cách và cung cấp dự phòng ngoại tuyến cho các yêu cầu về trang. Bạn có thể làm được tất cả những việc sau:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)