وصفات مكعبة العمل

هناك عدد من الأنماط الشائعة، لا سيما تلك المتعلقة بالتوجيه والتخزين المؤقت، وهي شائعة بما يكفي بحيث يمكن توحيدها في وصفات قابلة لإعادة الاستخدام. توفّر workbox-recipes هذه الوظائف في حزمة سهلة الاستخدام، ما يتيح لك البدء بسرعة باستخدام عامل خدمة فعّال للغاية.

وصفات طعام

تجمع كل وصفة بين عدد من وحدات Workbox معًا، ويتم تجميعها في أنماط شائعة الاستخدام. ستعرض الوصفات أدناه الوصفة التي تستخدمها عند استخدام هذه الوحدة، والنمط المكافئ الذي تستخدمه في الخلفية، إذا أردت كتابته بنفسك.

المحتوى الاحتياطي بلا إنترنت

تسمح وصفة المحتوى الاحتياطي بلا إنترنت لمشغّل الخدمة بعرض صفحة ويب أو صورة أو خطّ إذا حدث خطأ في التوجيه لأيّ من هذه العناصر الثلاثة، على سبيل المثال إذا كان المستخدم بلا إنترنت ولم يتمّ الوصول إلى ذاكرة التخزين المؤقت. في الإصدار 6.1.0 من وصفات Workbox، تمت إزالة شرط التخزين المؤقت لهذه العناصر باستخدام ميزة التخزين المؤقت. للتوافق مع الأنظمة القديمة، ستبحث عن العناصر في ذاكرة التخزين المؤقت أولاً قبل تجربة ذاكرة التخزين المؤقت الخاصة بها.

تفترض هذه الوصفة تلقائيًا أنّ الصفحة الاحتياطية هي 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 المحددة التي تريد تخزينها مؤقتًا، أو تريد الاحتفاظ بذاكرة التخزين المؤقت لمسار، أو الأماكن المشابهة التي تريد التخزين المؤقت لعناوين 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 وJavaScript وWeb Worker، باستخدام استراتيجية التخزين المؤقت stale-while-revalidate حتى يمكن عرض مواد العرض هذه بسرعة من ذاكرة التخزين المؤقت وتعديلها في الخلفية.

تتيح هذه الوصفة تدفئة ذاكرة التخزين المؤقت من خلال خيار 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],
      }),
    ],
  })
);

ذاكرة التخزين المؤقت للصور

تسمح وصفة ذاكرة التخزين المؤقت للصور لعامل الخدمة بالردّ على طلب الصور باستخدام استراتيجية التخزين المؤقت الاستناد إلى ذاكرة التخزين المؤقت أولاً، بحيث لا يحتاج المستخدم إلى تقديم طلب آخر للحصول على الصور بعد توفّرها في ذاكرة التخزين المؤقت.

تُخزِّن هذه الوصفة تلقائيًا 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,
      }),
    ],
  })
);

ذاكرة التخزين المؤقت لخطوط Google

تخزن وصفة Google Fonts جزأين من طلب Google Fonts مؤقتًا:

• ملف الأنماط الذي يتضمّن تعريفات @font-face التي ترتبط بملفات الخطوط
• ملفات الخطوط الثابتة والمنقحة.

وبما أنّه يمكن أن يتغيّر ملفّ الأنماط بشكل متكرّر، يتم استخدام استراتيجية التخزين المؤقت stale-while-revalidate. من ناحية أخرى، لا تتغير ملفات الخطوط نفسها ويمكنها الاستفادة من استراتيجية ذاكرة التخزين المؤقت أولاً.

تُخزِّن هذه الوصفة تلقائيًا ما يصل إلى 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 وJavaScript وWeb Worker من خلال استراتيجية إعادة التحقّق من البيانات القديمة أثناء إعادة التحقّق، والاستجابة لطلبات الصور باستخدام استراتيجية التخزين المؤقت أولاً، وتخزين خطوط Google مؤقتًا بشكل صحيح وتوفير عنصر احتياطي بلا اتصال بالإنترنت لطلبات الصفحات. يمكن تنفيذ كل ذلك من خلال ما يلي:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

الأنواع

GoogleFontCacheOptions

أماكن إقامة

• cachePrefix

  سلسلة اختيارية

• maxAgeSeconds

  الرقم اختياري

• maxEntries

  الرقم اختياري

ImageCacheOptions

أماكن إقامة

• cacheName

  سلسلة اختيارية

• matchCallback

  RouteMatchCallback اختياري

• maxAgeSeconds

  الرقم اختياري

• maxEntries

  رقم اختياري

• plugins

  WorkboxPlugin[] اختيارية

• warmCache

  سلسلة اختيارية

OfflineFallbackOptions

أماكن إقامة

• fontFallback

  سلسلة اختيارية

• imageFallback

  سلسلة اختيارية

• pageFallback

  سلسلة اختيارية

PageCacheOptions

أماكن إقامة

• cacheName

  سلسلة اختيارية

• matchCallback

  RouteMatchCallback اختياري

• networkTimeoutSeconds

  الرقم اختياري

• plugins

  WorkboxPlugin[] اختياري

• warmCache

  سلسلة اختيارية

StaticResourceOptions

أماكن إقامة

• cacheName

  سلسلة اختيارية

• matchCallback

  ‫RouteMatchCallback اختياري

• المكوّنات الإضافية

  WorkboxPlugin[] اختيارية

• warmCache

  سلسلة اختيارية

WarmStrategyCacheOptions

أماكن إقامة

• الإستراتيجية

  الاستراتيجية

• عناوين url

  string[]

الطُرق

googleFontsCache()

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

تنفيذ وصفة التخزين المؤقّت لـ [Google Fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts

المعلمات

• الخيارات

  ‫GoogleFontCacheOptions اختياري

imageCache()

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

تنفيذ [وصفة تخزين الصور مؤقتًا]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

المعلمات

• الخيارات

  ‫ImageCacheOptions اختيارية

offlineFallback()

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

تنفيذ [وصفة العناصر الاحتياطية الشاملة]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks احرص على تضمين العناصر الاحتياطية في عملية إدخال ذاكرة التخزين المؤقت بشكل مسبق.

المعلمات

• الخيارات

  OfflineFallbackOptions اختيارية

pageCache()

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

تنفيذ وصفة لتخزين الصفحات مؤقتًا مع مهلة للشبكة

المعلمات

• الخيارات

  PageCacheOptions اختيارية

staticResourceCache()

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

تنفيذ [وصفة ملفات CSS وJavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

المعلمات

• الخيارات

  StaticResourceOptions اختيارية

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

المعلمات

• الخيارات

  WarmStrategyCacheOptions