الإعداد المسبق باستخدام Workbox

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

لماذا عليك استخدام Workbox؟

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

بيانات التخزين المؤقت

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

[{
  url: 'app.abcd1234.js'
}, {
  url: 'offline.svg',
  revision: '7836745f'
}, {
  url: 'index.html',
  revision: '518747aa'
}]

عند تثبيت عامل الخدمة، يتم إنشاء ثلاثة إدخالات لذاكرة التخزين المؤقت في مساحة التخزين في ذاكرة التخزين المؤقت لكل عنوان من عناوين URL الثلاثة المدرَجة. تحتوي مادة العرض الأولى على معلومات حول الإصدارات تم تضمينها في عنوان URL الخاص بها (يمثّل app اسم الملف الفعلي، ويحتوي .abcd1234 على معلومات حول الإصدارات، قبل امتداد الملف مباشرةً .js). يمكن لأدوات إنشاء صندوق العمل رصد هذا الخطأ واستبعاد حقل مراجعة. لا تتضمّن مادتا العرض الأخريان أي معلومات حول الإصدار في عناوين URL الخاصة بهما، لذا تنشئ أدوات الإنشاء في Workbox حقل revision منفصلاً يحتوي على تجزئة لمحتويات الملف على الجهاز.

عرض الموارد المخزّنة مسبقًا

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

كفاءة في التحديثات

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

تعديلات على الموارد المخزّنة مسبقًا

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

إذا كان هناك عنوان URL حالي يحتوي على حقل مراجعة جديد أو إذا تمت إضافة أي عناوين URL أو حذفها من البيان، يشير ذلك إلى مشغّل الخدمة على أنّه يجب إجراء التعديلات كجزء من معالِجات أحداث install وactivate. على سبيل المثال، إذا أجريت بعض التغييرات على موقعك الإلكتروني وأعدت تصميمه، من الممكن أن يكون آخر بيان تخزين مؤقت قد خضع للتغييرات التالية:

[{
  url: 'app.ffaa4455.js'
}, {
  url: 'offline.svg',
  revision: '7836745f'
}, {
  url: 'index.html',
  revision: '518747aa'
}]

يخبر كل من هذه التغييرات عامل الخدمة أنه يجب إجراء طلبات جديدة لتحديث الإدخالات المخزنة مؤقتًا سابقًا ('offline.svg' و'index.html') وتخزين عناوين URL الجديدة مؤقتًا ('app.ffaa4455.js')، بالإضافة إلى عمليات الحذف لإزالة عناوين URL التي لم تعد مستخدمة ('app.abcd1234.js').

تجربة تثبيت حقيقية من "متجر التطبيقات"

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

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

أيّ من مواد العرض يجب تخزينها مؤقتًا بشكل مسبق؟

ويمكنك الرجوع إلى دليل تحديد المحتوى الذي يتم تحميله للحصول على صورة جيدة لعناوين URL التي من الأفضل استخدامها في ذاكرة التخزين المؤقت. والقاعدة العامة هي التخزين المؤقت لأي ملفات HTML أو JavaScript أو CSS يتم تحميلها في وقت مبكر وهي ضرورية لعرض البنية الأساسية لصفحة معينة.

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

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

تساعد أدوات إنشاء Workbox في إخبارك بعدد العناصر في بيان التخزين المؤقت بالإضافة إلى الحجم الإجمالي لحمولة التخزين المؤقت.

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