تخزين الموارد في ذاكرة التخزين المؤقت أثناء وقت التشغيل

قد لا تُستخدَم بعض مواد العرض في تطبيق الويب بشكلٍ متكرّر أو كبيرة جدًا أو تختلف حسب جهاز المستخدِم (مثل الصور المتجاوبة مع مختلف الأجهزة) أو لغته. في هذه الحالات، قد يكون التخزين المؤقت غير مكتمل، وبالتالي عليك الاعتماد على التخزين المؤقت في وقت التشغيل بدلاً من ذلك.

في Workbox، يمكنك التعامل مع التخزين المؤقت لمواد العرض في وقت التشغيل باستخدام وحدة workbox-routing لمطابقة المسارات، والتعامل مع استراتيجيات التخزين المؤقت لها من خلال وحدة workbox-strategies.

استراتيجيات التخزين المؤقت

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

  • تستخدم الدالة الإصدار القديم أثناء إعادة التحقّق استجابة مخزَّنة مؤقتًا لأحد الطلبات إذا كان متاحًا، وتعدِّل ذاكرة التخزين المؤقت في الخلفية باستجابة من الشبكة. وبالتالي، إذا لم تكن مادة العرض مخزّنة مؤقتًا، ستنتظر استجابة الشبكة وتستخدمها. وهي استراتيجية آمنة إلى حدّ ما، لأنّها تُحدِّث بشكل منتظم إدخالات ذاكرة التخزين المؤقت التي تعتمد عليها. والجانب السلبي لهذا الخيار هو أنّه يطلب دائمًا مادة عرض من الشبكة في الخلفية.
  • يحاول فريق الشبكة أولاً الحصول على استجابة من الشبكة أولاً. في حال تلقي استجابة، يتم تمرير هذه الاستجابة إلى المتصفح وحفظها في ذاكرة تخزين مؤقت. إذا تعذّر طلب الشبكة، سيتم استخدام آخر استجابة مخزّنة مؤقتًا، ما يتيح الوصول بلا اتصال بالإنترنت إلى مادة العرض.
  • تفحص ميزة ذاكرة التخزين المؤقت أولاً ذاكرة التخزين المؤقت بحثًا عن الردّ أولاً وتستخدمه إذا كان متاحًا. إذا لم يكُن الطلب في ذاكرة التخزين المؤقت، يتم استخدام الشبكة وإضافة أي استجابة صالحة إلى ذاكرة التخزين المؤقت قبل تمريرها إلى المتصفّح.
  • الشبكة فقط تفرض الرد من الشبكة.
  • تفرض ذاكرة التخزين المؤقت فقط الرد من ذاكرة التخزين المؤقت.

يمكنك تطبيق هذه الاستراتيجيات على طلبات محدّدة باستخدام الطرق المتاحة في "workbox-routing".

تطبيق استراتيجيات التخزين المؤقت باستخدام مطابقة المسارات

يعرض workbox-routing طريقة registerRoute لمطابقة المسارات والتعامل معها باستخدام استراتيجية التخزين المؤقت. تقبل registerRoute كائن Route الذي يقبل بدوره وسيطتين:

  1. سلسلة أو تعبير عادي أو استدعاء مطابقة لتحديد معايير مطابقة المسار
  2. معالج للمسار، وهو عادةً استراتيجية يوفّرها workbox-strategies.

يُفضَّل أن تتطابق استدعاءات معاودة الاتصال مع المسارات، لأنّها توفِّر كائن سياق يتضمّن كائن Request وسلسلة عنوان URL للطلب وحدث الجلب وقيمة منطقية لتحديد ما إذا كان الطلب من المصدر نفسه.

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

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
  return sameOrigin && request.destination === 'image'
}, new CacheFirst());

// Register the new route
registerRoute(imageRoute);

استخدام ذاكرات تخزين مؤقتة متعددة

يسمح لك Workbox بتجميع الردود المخزّنة مؤقتًا في حالات Cache منفصلة باستخدام الخيار cacheName المتاح في الاستراتيجيات المجمّعة.

في المثال التالي، تستخدم الصور استراتيجية قديمة أثناء إعادة التحقّق، في حين تستخدم مواد عرض CSS وJavaScript وضع ذاكرة التخزين المؤقت أولاً ثم العودة إلى استراتيجية الشبكة. يضع المسار لكل مادة عرض الردود في ذاكرات تخزين منفصلة منفصلة، من خلال إضافة السمة cacheName.

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

// Handle images:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image'
}, new StaleWhileRevalidate({
  cacheName: 'images'
}));

// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts'
}));

// Handle styles:
const stylesRoute = new Route(({ request }) => {
  return request.destination === 'style';
}, new CacheFirst({
  cacheName: 'styles'
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);
لقطة شاشة لقائمة بمثيلات ذاكرة التخزين المؤقت في علامة التبويب التطبيق ضمن "أدوات مطوري البرامج" في Chrome هناك ثلاث ذاكرات تخزين مؤقتة مختلفة معروضة: إحداهما باسم "النصوص البرمجية" والأخرى تحت اسم "الأنماط" والأخرى باسم "الصور".
عارض مساحة تخزين ذاكرة التخزين المؤقت في لوحة التطبيق في "أدوات مطوري البرامج في Chrome" يتم تخزين الردود على أنواع مختلفة من مواد العرض في ذاكرات تخزين مؤقتة منفصلة.

تحديد تاريخ انتهاء صلاحية لإدخالات ذاكرة التخزين المؤقت

انتبِه إلى حصص مساحة التخزين عند إدارة ذاكرة التخزين المؤقت الخاصة بمشغّل الخدمات. يبسّط ExpirationPlugin صيانة ذاكرة التخزين المؤقت ويتم عرضه في workbox-expiration. ولاستخدامه، عليك تحديده في إعدادات استراتيجية التخزين المؤقت:

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Evict image cache entries older thirty days:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image';
}, new CacheFirst({
  cacheName: 'images',
  plugins: [
    new ExpirationPlugin({
      maxAgeSeconds: 60 * 60 * 24 * 30,
    })
  ]
}));

// Evict the least-used script cache entries when
// the cache has more than 50 entries:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50,
    })
  ]
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
.

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

اعتبارات مشتركة المصدر

إنّ التفاعل بين مشغّل الخدمات ومواد العرض من مصادر متعددة يختلف بشكل كبير عن التفاعل مع مواد العرض ذات المصدر نفسه. تُعد مشاركة الموارد المتعددة المصادر (CORS) عملية معقدة، ويمتد هذا التعقيد ليشمل كيفية التعامل مع الموارد متعددة المصادر في مشغّل الخدمات.

استجابات معتمة

عند تقديم طلب من مصادر متعددة في وضع no-cors، يمكن تخزين الردّ في ذاكرة التخزين المؤقت لمشغِّل الخدمات، وحتى استخدامه مباشرةً من خلال المتصفّح. ومع ذلك، تتعذر قراءة نص الاستجابة نفسه باستخدام JavaScript. يُعرف ذلك باسم الاستجابة المبهمة.

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

لا تنسَ تفعيل وضع سياسة مشاركة الموارد المتعددة المصادر (CORS)

حتى في حال تحميل مواد عرض من مصادر متعددة تضبط عناوين CORS الأذونات التي تتيح لك قراءة الردود، قد يظل نص الاستجابة من مصادر متعددة معتمًا. على سبيل المثال، سيؤدي ترميز HTML التالي إلى إرسال طلبات no-cors التي ستؤدي إلى استجابات مبهمة بغض النظر عن عناوين CORS التي تم ضبطها:

<link rel="stylesheet" href="https://example.com/path/to/style.css">
<img src="https://example.com/path/to/image.png">

لتشغيل طلب cors بشكل واضح يسفر عن استجابة غير مبهمة، يجب الموافقة بشكل صريح على وضع CORS عن طريق إضافة سمة crossorigin إلى HTML:

<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">

من المهم تذكُّر ذلك عندما يتم تحميل الموارد الفرعية في مشغّل الخدمات في وقت التشغيل.

لا يجوز أن يخزّن مربع العمل ردودًا مبهمة في ذاكرة التخزين المؤقت

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

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

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

فرض التخزين المؤقت للردود غير الواضحة

إذا كنت متأكّدًا تمامًا من أنّك تريد تخزين استجابة مبهمة مؤقتًا باستخدام استراتيجية التخزين المؤقت أولاً أو ذاكرة التخزين المؤقت فقط، يمكنك أن تفرض على Workbox تنفيذ ذلك باستخدام وحدة workbox-cacheable-response:

import {Route, registerRoute} from 'workbox-routing';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cdnRoute = new Route(({url}) => {
  return url === 'https://cdn.google.com/example-script.min.js';
}, new CacheFirst({
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200]
    })
  ]
}))

registerRoute(cdnRoute);

استجابات غير مفهومة وواجهة برمجة التطبيقات navigator.storage

لتجنُّب تسرُّب المعلومات على مستوى النطاقات، تتم إضافة مساحة متروكة كبيرة إلى حجم الاستجابة غير الواضحة المستخدَمة لاحتساب حدود مساحة التخزين المتوفّرة. يؤثر ذلك في كيفية إبلاغ navigator.storage API عن حصص التخزين.

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