لقد طُلب مني كتابة هذا المنشور عن تحديث بسيط إلى حدٍ ما لواجهة برمجة التطبيقات الخاصة بذاكرة التخزين المؤقت لمشغّل الخدمات. لم أعتقد أنّ هذا الموضوع يستحق مقالة خاصة به، ولكن بعد نقاش طويل انتهى بلعبة "الصخرة والورق والمقص"، خسرتُ، لذا إليك هذه المقالة.
هل أنت مستعد للاطّلاع على آخر المعلومات حول تحديثات Chrome لتنفيذ واجهة برمجة التطبيقات Service Worker Cache API؟
لا يمكنني سماعك. قلتُ، هل أنت مستعد للاطّلاع على آخر المعلومات حول تحديثات Chrome لتنفيذ واجهة برمجة التطبيقات لذاكرة التخزين المؤقت لعامل الخدمة؟
(يمكنك مواصلة القراءة فقط إذا قفزت على مقعدك وصرخت "ياي". يمكنك أيضًا تمثيل عملية رمي رسن، ولكن هذا اختياري).
ظهرت دالة cache.addAll في الإصدار 46 من Chrome.
نعم. إجابتك صحيحة. ذاكرة التخزين المؤقت إضافة الكل الإصدار 46 من Chrome
حسنًا، بعيدًا عن السخرية، هذه مشكلة كبيرة جدًا، لأنّ cache.addAll هو الجزء الأخير المتبقّي من العناصر الأساسية لإضافة ذاكرة التخزين المؤقت، ما يعني أنّه لم يعُد مطلوبًا.
في ما يلي طريقة عمل cache.addAll:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
تأخذ addAll صفيفًا من عناوين URL والطلبات وتسترجعها وتضيفها إلى ذاكرة التخزين المؤقت. هذه العملية مستندة إلى المعاملات، فإذا تعذّر أيّ من عمليات الجلب أو الكتابة، ستتعذّر العملية بأكملها، وستتم إعادة ذاكرة التخزين المؤقت إلى حالتها السابقة. ويُعدّ ذلك مفيدًا بشكل خاص لعمليات التثبيت، مثل ما سبق، حيث يؤدي أيّ خطأ واحد إلى حدوث خطأ عام.
يظهر المثال أعلاه ضمن مشغّل خدمات، ولكن يمكن الوصول إلى واجهة برمجة التطبيقات الخاصة بذاكرة التخزين المؤقت بالكامل من الصفحات أيضًا.
يتيح Firefox حاليًا استخدام واجهة برمجة التطبيقات هذه في إصدار المطوّرين، لذا ستظهر مع بقية عمليات تنفيذ مهام الخدمة.
ولكن هذا ليس كل شيء، فنحن نعمل على إجراء المزيد من التحسينات على ذاكرة التخزين المؤقت.
إتاحة دالة cache.matchAll في الإصدار 47 من Chrome
يتيح لك ذلك الحصول على نتائج مطابقة متعددة:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
سيؤدي ذلك إلى الحصول على كل العناصر في mysite-static-v1 التي تتطابق مع /. تتيح لك ذاكرة التخزين المؤقت إدخال بيانات متعددة لكل عنوان URL إذا كان بالإمكان تخزينها بشكل مستقل في ذاكرة التخزين المؤقت، مثلاً إذا كانت تحتوي على رؤوس Vary مختلفة.
يتيح Firefox هذا الإجراء في إصدار المطوّرين، لذا سيتم طرحه مع بقية عمليات تنفيذ مهام الخدمة.
خيارات طلبات البحث في ذاكرة التخزين المؤقت ستتوفّر قريبًا في Chrome
في ما يلي معالج جلب عادي جدًا:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
إذا كانت لدينا / في ذاكرة التخزين المؤقت، وتلقّينا طلبًا للحصول على /، سيتم عرضها من ذاكرة التخزين المؤقت. ومع ذلك، إذا تلقّينا طلبًا للحصول على /?utm_source=blahblahwhatever، لن يكون من ذاكرة التخزين المؤقت. يمكنك تجنُّب ذلك من خلال تجاهل سلسلة البحث عن عنوان URL أثناء المطابقة:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
سيتم الآن مطابقة /?utm_source=blahblahwhatever مع الإدخال /. في ما يلي الخيارات الكاملة:
-
ignoreSearch- تجاهل جزء البحث من عنوان URL في كلّ من مَعلمة الطلب والطلبات المخزّنة مؤقتًا -
ignoreMethod- تجاهل طريقة وسيطة الطلب، لكي يتطابق طلب POST مع إدخال GET في ذاكرة التخزين المؤقت -
ignoreVary- تجاهل العنوان vary في الردود المخزّنة مؤقتًا
يدعم Firefox هذا الإجراء في… حسنًا، أنت تعرف الإجراء الآن. نشكر بن كيلي على جهوده في توفير كل هذه الميزات في Firefox.
إذا كنت تريد متابعة عملية تنفيذ Chrome لخيارات طلب البيانات من ذاكرة التخزين المؤقت، يمكنك الاطّلاع على crbug.com/426309.
نتمنّى أن نراك في المرة القادمة في فصل آخر مشوّق من "ما نفّذناه في واجهة برمجة التطبيقات لذاكرة التخزين المؤقت".