معرفی Background Fetch

Jake Archibald

در سال 2015 همگام‌سازی پس‌زمینه را معرفی کردیم که به کارمند خدمات اجازه می‌دهد تا زمانی که کاربر اتصال برقرار کند، کار را به تعویق بیاندازد. این به این معنی است که کاربر می تواند پیامی را تایپ کند، ارسال را فشار دهد و سایت را ترک کند و بداند که پیام در حال حاضر یا زمانی که اتصال دارد ارسال خواهد شد.

این یک ویژگی مفید است، اما مستلزم آن است که کارگر خدمات در طول مدت واکشی زنده باشد. این مشکلی برای کارهای کوتاه مانند ارسال پیام نیست، اما اگر این کار بیش از حد طول بکشد، مرورگر کارمند سرویس را می کشد، در غیر این صورت خطری برای حریم خصوصی و باتری کاربر است.

بنابراین، اگر نیاز به دانلود چیزی داشته باشید که ممکن است زمان زیادی طول بکشد، مانند یک فیلم، پادکست یا سطوح یک بازی، چه می‌کنید. Background Fetch برای همین است.

واکشی پس‌زمینه به‌طور پیش‌فرض از Chrome 74 در دسترس است.

در اینجا یک نسخه ی نمایشی سریع دو دقیقه ای وجود دارد که وضعیت سنتی چیزها را در مقایسه با استفاده از Background Fetch نشان می دهد:

خودتان نسخه ی نمایشی را امتحان کنید و کد را مرور کنید .

چگونه کار می کند

واکشی پس‌زمینه به این صورت عمل می‌کند:

1. شما به مرورگر می‌گویید که گروهی از واکشی‌ها را در پس‌زمینه انجام دهد.
2. مرورگر آن چیزها را واکشی می کند و پیشرفت را به کاربر نشان می دهد.
3. هنگامی که واکشی کامل شد یا ناموفق بود، مرورگر سرویس‌کار شما را باز می‌کند و رویدادی را فعال می‌کند تا به شما بگوید چه اتفاقی افتاده است. این جایی است که شما تصمیم می گیرید که در صورت وجود پاسخ ها چه کاری انجام دهید.

اگر کاربر پس از مرحله 1 صفحات سایت شما را ببندد، اشکالی ندارد، دانلود ادامه خواهد یافت. از آنجایی که واکشی بسیار قابل مشاهده است و به راحتی قابل سقط است، نگرانی حفظ حریم خصوصی از یک کار همگام سازی پس زمینه بسیار طولانی وجود ندارد. از آنجایی که سرویس‌کار دائماً در حال اجرا نیست، این نگرانی وجود ندارد که بتواند از سیستم سوء استفاده کند، مانند استخراج بیت‌کوین در پس‌زمینه.

در برخی از پلتفرم‌ها (مانند Android) این امکان وجود دارد که مرورگر پس از مرحله 1 بسته شود، زیرا مرورگر می‌تواند واکشی را به سیستم عامل بسپارد.

اگر کاربر دانلود را در حالت آفلاین شروع کند، یا در حین دانلود آفلاین شود، واکشی پس‌زمینه متوقف می‌شود و بعداً از سر گرفته می‌شود.

API

تشخیص ویژگی

مانند هر ویژگی جدید، می‌خواهید تشخیص دهید که آیا مرورگر از آن پشتیبانی می‌کند یا خیر. برای Background Fetch، به همین سادگی است:

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

شروع واکشی پس‌زمینه

API اصلی یک سرویس‌کار ثبت نام را متوقف می‌کند، بنابراین مطمئن شوید که ابتدا یک سرویس‌کار را ثبت کرده‌اید. سپس:

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 حل می شود. من جزئیات آن را بعداً پوشش خواهم داد. اگر کاربر از دانلود انصراف داده باشد، یا یکی از پارامترهای ارائه شده نامعتبر باشد، قول رد می شود.

ارائه بسیاری از درخواست‌ها برای یک واکشی پس‌زمینه به شما امکان می‌دهد چیزهایی را که به طور منطقی برای کاربر یک چیز واحد هستند ترکیب کنید. برای مثال، یک فیلم ممکن است به 1000 منبع تقسیم شود (معمولاً با MPEG-DASH )، و با منابع اضافی مانند تصاویر همراه باشد. سطحی از یک بازی می تواند در بسیاری از منابع جاوا اسکریپت، تصویر و صدا پخش شود. اما برای کاربر، این فقط «فیلم» یا «سطح» است.

دریافت واکشی پس‌زمینه موجود

می‌توانید یک واکشی پس‌زمینه موجود مانند این دریافت کنید:

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

…با پاس دادن شناسه واکشی پس‌زمینه مورد نظرتان. در صورتی که هیچ واکشی پس‌زمینه فعالی با آن شناسه وجود نداشته باشد، بازدهی 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 ثبت‌نام واکشی پس‌زمینه خواهد بود.

پس از این رویداد، درخواست‌ها و پاسخ‌های واکشی شده دیگر قابل دسترسی نیستند، بنابراین اگر می‌خواهید آنها را نگه دارید، آنها را به جایی مانند API حافظه پنهان منتقل کنید.

مانند بسیاری از رویدادهای Service Worker، از 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 به عنوان «استاندارد وب» اشاره کرده است. API در حال حاضر در مسیر استاندارد نیست، مشخصات را می توان در WICG به عنوان پیش نویس گزارش گروه جامعه یافت.