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

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

Recipes

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

احتياطي بلا إنترنت

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

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

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

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

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

تحتفظ هذه الوصفة تلقائيًا بـ 30 ملف خط كحد أقصى، لمدة عام واحد. راجِع خيارات ذاكرة التخزين المؤقت لتطبيق Google Fonts للحصول على قائمة بجميع خيارات الضبط.

وصفة طعام

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 Fonts في ذاكرة التخزين المؤقت بشكل سليم، ويوفّر طلبات الصفحات الاحتياطية بلا إنترنت. يمكن إجراء كل ذلك باستخدام ما يلي:

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