جارٍ العرض

من الجوانب الرئيسية لتطبيقات الويب التقدّمية أنّها موثوقة، إذ يمكنها تحميل مواد العرض بسرعة، ما يحافظ على تفاعل المستخدمين ويقدّم لهم ملاحظات فورية، حتى في ظروف الشبكة السيئة. كيف يمكن حدوث ذلك؟ بفضل حدث fetch في مشغّل الخدمات.

حدث الجلب

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

يتلقّى معالج fetch جميع الطلبات من أحد التطبيقات، بما في ذلك عناوين URL وعناوين HTTP، ويتيح لمطوّر التطبيق تحديد كيفية معالجتها.

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

self.addEventListener("fetch", event => {
    console.log(`URL requested: ${event.request.url}`);
});

الردّ على طلب

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

للردّ على طلب وارد، اتّصِل بالدالة event.respondWith() من داخل معالج حدث fetch، على النحو التالي:

// fetch event handler in your service worker file
self.addEventListener("fetch", event => {
    const response = .... // a response or a Promise of response
    event.respondWith(response);
});

يجب استدعاء respondWith() بشكل متزامن ويجب عرض عنصر Response. ولكن لا يمكنك استدعاء respondWith() بعد انتهاء معالج أحداث الجلب، مثلاً ضمن استدعاء غير متزامن. إذا كنت بحاجة إلى انتظار الرد الكامل، يمكنك تمرير Promise إلى respondWith() يتم حله باستخدام Response.

إنشاء الردود

بفضل Fetch API، يمكنك إنشاء استجابات HTTP في رمز JavaScript، ويمكن تخزين هذه الاستجابات مؤقتًا باستخدام Cache Storage API وعرضها كما لو كانت واردة من خادم ويب.

لإنشاء ردّ، أنشئ عنصر Response جديدًا، مع ضبط النص والخيارات، مثل الحالة والعناوين:

const simpleResponse = new Response("Body of the HTTP response");

const options = {
   status: 200,
   headers: {
    'Content-type': 'text/html'
   }
};
const htmlResponse = new Response("<b>HTML</b> content", options)

الردّ من ذاكرة التخزين المؤقت

بعد أن تعرّفت على كيفية عرض استجابات HTTP من عامل الخدمة، حان الوقت لاستخدام واجهة Caching Storage لتخزين مواد العرض على الجهاز.

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

تتلقّى الدالة match() طلب HTTP أو عنوان URL كمعلَمة، وتعرض وعدًا يتم تنفيذه باستخدام الردّ المرتبط بالمفتاح المقابل.

// Global search on all caches in the current origin
caches.match(urlOrRequest).then(response => {
   console.log(response ? response : "It's not in the cache");
});

// Cache-specific search
caches.open("pwa-assets").then(cache => {
  cache.match(urlOrRequest).then(response => {
    console.log(response ? response