لمحة عن ميزة "الجلب في الخلفية"

Jake Archibald

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

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

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

تتوفّر ميزة Background Fetch تلقائيًا منذ الإصدار 74 من Chrome.

إليك عرض توضيحي سريع مدته دقيقتان يعرض الحالة التقليدية للأشياء مقارنةً باستخدام Background Fetch:

آلية العمل

يعمل استرجاع البيانات في الخلفية على النحو التالي:

1. تطلب من المتصفّح تنفيذ مجموعة من عمليات الجلب في الخلفية.
2. ويجلب المتصفّح هذه العناصر ويعرض للمستخدم مدى تقدّمه.
3. بعد اكتمال عملية الجلب أو تعذّرها، يفتح المتصفّح عامل الخدمة ويُطلق حدثًا لإعلامك بما حدث. هذا هو المكان الذي يمكنك فيه تحديد ما يجب فعله بالردود، إن وُجدت.

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

في بعض الأنظمة الأساسية (مثل Android)، من المحتمل أن يتم إغلاق المتصفّح بعد الخطوة 1، لأنّه يمكن للمتصفّح أن يفوّض نظام التشغيل مهمة جلب البيانات.

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

واجهة برمجة التطبيقات

رصد الميزات

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

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

بدء عملية استرجاع البيانات في الخلفية

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

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

تتلقّى الدالة backgroundFetch.fetch ثلاث وسيطات:

تعرض الدالة backgroundFetch.fetch وعدًا يتم تنفيذه باستخدام BackgroundFetchRegistration. سأشرح التفاصيل لاحقًا. يتم رفض الوعد إذا أوقف المستخدم خيار التنزيل أو إذا كان أحد المَعلمات المقدَّمة غير صالح.

يتيح لك تقديم العديد من الطلبات لجلب البيانات في الخلفية دمج العناصر التي تبدو منطقيًا كعنصر واحد للمستخدم. على سبيل المثال، قد يتم تقسيم فيلم إلى آلاف الموارد (وهو أمر شائع مع MPEG-DASH)، وقد يتضمّن موارد إضافية، مثل الصور. يمكن أن ينتشر مستوى اللعبة على العديد من موارد JavaScript والصور والصوت. ولكن بالنسبة إلى المستخدم، يكون ذلك مجرد "الفيلم" أو "المستوى".

الحصول على عملية استرجاع بيانات في الخلفية حالية

يمكنك الحصول على عملية جلب بيانات في الخلفية حالية على النحو التالي:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…من خلال تمرير المعرّف لعملية الجلب في الخلفية التي تريدها. تعرض الدالة get القيمة undefined إذا لم يكن هناك عملية جلب نشطة في الخلفية باستخدام هذا المعرّف.

يُعدّ جلب البيانات في الخلفية "نشطًا" منذ لحظة تسجيله إلى أن ينجح أو يفشل أو يتم إيقافه.

يمكنك الحصول على قائمة بجميع عمليات الجلب النشطة في الخلفية باستخدام getIds:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

عمليات تسجيل استرجاع البيانات في الخلفية

يتضمّن BackgroundFetchRegistration (bgFetch في الأمثلة أعلاه) ما يلي:

تتبُّع مستوى التقدّم

يمكن إجراء ذلك من خلال الحدث progress. تذكَّر أنّ downloadTotal هي أي قيمة قدّمتها، أو 0 إذا لم تقدّم قيمة.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

الحصول على الطلبات والردود

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

‫record هو BackgroundFetchRecord، ويظهر بالشكل التالي:

أحداث مشغّل الخدمات

تحتوي عناصر الحدث على ما يلي:

الاستجابة للنجاح/الفشل

لقد رأينا الحدث progress من قبل، ولكنّه لا يكون مفيدًا إلا عندما يفتح المستخدم صفحة من موقعك الإلكتروني. تتمثّل الفائدة الرئيسية من ميزة "الجلب في الخلفية" في أنّ العمليات تستمر حتى بعد أن يغادر المستخدم الصفحة أو يغلق المتصفّح.

إذا اكتملت عملية الاسترجاع في الخلفية بنجاح، سيتلقّى عامل الخدمة الحدث backgroundfetchsuccess، وسيكون event.registration هو تسجيل عملية الاسترجاع في الخلفية.

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

كما هو الحال مع معظم أحداث عاملي الخدمة، استخدِم event.waitUntil لكي يعرف عامل الخدمة متى يكتمل الحدث.

على سبيل المثال، في عامل الخدمة:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

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

التفاعل مع النقر

يمكن النقر على واجهة المستخدم التي تعرض مستوى تقدّم التنزيل ونتيجته. يتيح لك الحدث backgroundfetchclick في عامل الخدمة التفاعل مع ذلك. كما هو موضّح أعلاه، سيكون event.registration هو تسجيل الجلب في الخلفية.

الإجراء الشائع الذي يتم تنفيذه عند وقوع هذا الحدث هو فتح نافذة:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

مراجع إضافية

• شرح
• المواصفات
• إدخال chromestatus.com

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