جعبه کار - دستور العمل ها

تعدادی از الگوهای رایج، به ویژه در مورد مسیریابی و ذخیره سازی ، به اندازه کافی رایج هستند که می توان آنها را در دستور العمل های قابل استفاده مجدد استاندارد کرد. workbox-recipes اینها را در بسته‌ای با مصرف آسان در دسترس قرار می‌دهد و به شما این امکان را می‌دهد تا با یک سرویس‌دهنده بسیار کاربردی سریعاً کار کنید.

دستور پخت

هر دستور غذا تعدادی از ماژول‌های Workbox را با هم ترکیب می‌کند و آن‌ها را در قالب‌های رایج استفاده می‌کند. دستور العمل های زیر دستور العملی را که هنگام استفاده از این ماژول استفاده می کنید و الگوی معادلی که در زیر کاپوت استفاده می کند نشان می دهد، اگر بخواهید خودتان آن را بنویسید.

بازگشتی آفلاین

دستور بازگشت آفلاین به کارمند خدمات شما اجازه می دهد تا در صورت وجود خطای مسیریابی برای هر یک از این سه صفحه، یک صفحه وب، تصویر یا فونت را ارائه دهد، به عنوان مثال اگر کاربر آفلاین است و ضربه ای به حافظه پنهان وجود ندارد. در نسخه 6.1.0 Workbox Recipes، نیاز به کش کردن این موارد با استفاده از پیش کش حذف شد. برای سازگاری با عقب، قبل از امتحان کردن حافظه پنهان خود، ابتدا به دنبال موارد در پیش کش می گردد.

این دستور، به طور پیش‌فرض، فرض می‌کند که صفحه بازگشتی offline.html است و هیچ تصویر یا فونت بازگشتی وجود ندارد. گزینه های بازگشتی آفلاین را برای لیستی از همه گزینه های پیکربندی ببینید.

بازگشت آفلاین فقط در صورتی اعمال می شود که مسیری منطبق برای یک درخواست معین وجود داشته باشد. اگر از دستور العمل بازگشتی آفلاین به تنهایی استفاده می کنید، باید خودتان مسیرها را ایجاد کنید. ساده ترین راه برای انجام این کار استفاده از متد setDefaultHandler() برای ایجاد مسیری است که استراتژی NetworkOnly را برای همه درخواست ها اعمال می کند، همانطور که در زیر نشان داده شده است. دستور العمل های دیگر، مانند حافظه پنهان صفحه ، حافظه پنهان منبع استاتیک ، یا حافظه پنهان تصویر ، مسیرهایی را برای کش مربوطه خود تنظیم می کنند. هنگام استفاده از نسخه آفلاین و یکی از آن دستورها setDefaultHandler() مورد نیاز نیست.

دستور آشپزی

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

الگو

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);

کش استراتژی گرم

دستور العمل کش استراتژی گرم به شما امکان می دهد URL های ارائه شده را در حافظه پنهان خود در طول مرحله install سرویس دهنده بارگیری کنید و آنها را با گزینه های استراتژی ارائه شده در حافظه پنهان ذخیره کنید. اگر آدرس‌های اینترنتی خاصی را می‌شناسید که می‌خواهید حافظه پنهان کنید، می‌خواهید حافظه پنهان یک مسیر یا مکان‌های مشابهی را که در حین نصب در آن‌ها URLهای کش را می‌خواهید، گرم کنید، می‌تواند به عنوان جایگزینی برای پیش کش استفاده شود.

برای فهرستی از تمام گزینه‌های پیکربندی ، گزینه‌های کش استراتژی گرم را ببینید.

دستور آشپزی

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});

الگو

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));
});

کش صفحه

دستور العمل کش صفحه به کارمند خدمات شما اجازه می دهد تا به درخواست یک صفحه HTML (از طریق پیمایش URL) با یک استراتژی ذخیره سازی اولیه در شبکه پاسخ دهد، بهینه شده است تا، در حالت ایده آل، اجازه دهد تا حافظه پنهان به اندازه کافی سریع به دست بیاید و برای کسب بیشترین امتیاز رنگ محتوا، به آن دسترسی پیدا کند. کمتر از 4.0 ثانیه

این دستور غذا به طور پیش‌فرض فرض می‌کند که زمان پایان شبکه باید 3 ثانیه باشد و از گرم کردن حافظه پنهان از طریق گزینه warmCache پشتیبانی می‌کند. برای لیستی از تمام گزینه های پیکربندی ، گزینه های کش صفحه را ببینید.

دستور آشپزی

import {pageCache} from 'workbox-recipes';

pageCache();

الگو

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],
      }),
    ],
  })
);

کش منابع استاتیک

دستور کش منابع استاتیک به کارمند خدمات شما اجازه می دهد تا به درخواست منابع استاتیک، به ویژه درخواست های CSS، جاوا اسکریپت، و وب ورکر، با یک استراتژی ذخیره سازی کهنه در حین اعتبارسنجی مجدد پاسخ دهد تا آن دارایی ها به سرعت از حافظه پنهان ارائه شوند و به روز شوند. در پس زمینه

این دستور پخت از گرم کردن کش از طریق گزینه warmCache پشتیبانی می کند. برای فهرستی از تمام گزینه‌های پیکربندی ، گزینه‌های کش منابع استاتیک را ببینید.

دستور آشپزی

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

الگو

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],
      }),
    ],
  })
);

حافظه پنهان تصویر

دستور العمل حافظه پنهان تصویر به کارمند خدمات شما اجازه می‌دهد تا به درخواستی برای تصاویر با استراتژی cache-first پاسخ دهد، به طوری که وقتی آنها در حافظه پنهان در دسترس هستند، کاربر نیازی به درخواست دیگری برای آنها نداشته باشد.

این دستور پخت، به طور پیش فرض، حداکثر 60 تصویر را در حافظه پنهان نگه می دارد، هر کدام به مدت 30 روز و از گرم شدن کش از طریق گزینه warmCache پشتیبانی می کند. گزینه های حافظه پنهان تصویر را برای لیستی از تمام گزینه های پیکربندی ببینید.

دستور آشپزی

import {imageCache} from 'workbox-recipes';

imageCache();

الگو

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,
      }),
    ],
  })
);

حافظه پنهان فونت های گوگل

دستور العمل فونت های گوگل دو بخش درخواست فونت گوگل را در حافظه پنهان ذخیره می کند:

• شیوه نامه با تعاریف @font-face که به فایل های فونت پیوند می خورد.
• فایل های فونت استاتیک و تجدید نظر شده

از آنجایی که شیوه نامه می تواند به طور مکرر تغییر کند، از یک استراتژی ذخیره سازی کهنه در حالی که اعتبار مجدد دارد استفاده می شود. از سوی دیگر، خود فایل‌های فونت تغییر نمی‌کنند و می‌توانند در ابتدا از یک استراتژی کش استفاده کنند.

این دستور، به طور پیش فرض، حداکثر 30 فایل فونت، هر کدام برای یک سال را در حافظه پنهان نگه می دارد. برای فهرستی از تمام گزینه‌های پیکربندی ، گزینه‌های کش فونت‌های Google را ببینید.

دستور آشپزی

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

الگو

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,
      }),
    ],
  })
);

استفاده سریع

ترکیب همه دستور العمل ها با هم باعث می شود که یک سرویس دهنده به درخواست های صفحه با یک استراتژی ذخیره سازی اولیه شبکه پاسخ دهد، به درخواست های CSS، جاوا اسکریپت و وب ورکر با استراتژی اعتبارسنجی مجدد پاسخ دهد، و ابتدا به درخواست های تصویر با یک کش پاسخ دهد. استراتژی، فونت های گوگل را به درستی کش کنید، و برای درخواست های صفحه یک نسخه بازگشتی آفلاین ارائه دهید. همه اینها با موارد زیر قابل انجام است:

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,
)