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

Jake Archibald

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

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

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

تتوفّر ميزة الجلب في الخلفية بشكل تلقائي منذ الإصدار Chrome 74.

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

جرِّب العرض التوضيحي بنفسك وتصفّح الرمز.

آلية العمل

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

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), وتوفّر موارد إضافية مثل الصور يمكن أن ينتشر مستوى من اللعبة عبر العديد موارد جافا سكريبت والصور والصوت. ولكن بالنسبة إلى المستخدم، يتعلق الأمر فقط "بالفيلم" أو "المستوى".

الحصول على أداة استرجاع حالية للخلفية

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

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

...عن طريق ضبط id (المعرّف) لعملية استرجاع البيانات في الخلفية التي تريدها. يتم إرجاع undefined من قِبل "get" في حال عدم توفّر جلب نشط في الخلفية باستخدام هذا المعرّف.

يعتبر الجلب في الخلفية "نشطًا" منذ لحظة تسجيلها، إلى أن يتم ذلك بنجاح، أو فشله أو إلغائه.

يمكنك الحصول على قائمة بجميع عمليات الجلب النشطة في الخلفية باستخدام 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

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