تسلط بر Background Fetch در فرانت‌اند: ساخت دانلودهای مقاوم و قابل ادامه

در دنیای روزافزون ما که همه چیز به هم متصل است، وب دیگر تنها مکانی برای اسناد ثابت نیست. بلکه پلتفرمی برای برنامه‌های غنی و تعاملی است که همه چیز را از محتوای ویدیویی با کیفیت بالا گرفته تا نرم‌افزارهای پیچیده تجاری و بازی‌های فراگیر ارائه می‌دهد. این تحول یک چالش بزرگ را به همراه دارد که توسعه‌دهندگان در سراسر جهان باید با آن روبرو شوند: انتقال قابل اعتماد فایل‌های بزرگ از طریق شبکه‌هایی که اغلب هر چیزی هستند جز قابل اعتماد. فرقی نمی‌کند کاربر در قطار شهری در سئول باشد، یک دانشجو در منطقه‌ای روستایی در آمریکای جنوبی، یا یک متخصص با اتصال Wi-Fi ضعیف در هتلی در دبی؛ قطع شدن اتصال می‌تواند به معنای یک دانلود ناموفق، یک کاربر ناامید و یک تجربه کاربری ناقص باشد. اینجاست که Background Fetch API به عنوان یک راه‌حل تحول‌آفرین ظاهر می‌شود.

روش‌های سنتی مانند `fetch()` یا `XMLHttpRequest` قدرتمند هستند، اما ذاتاً به چرخه حیات یک صفحه وب گره خورده‌اند. اگر کاربر تب را ببندد یا به صفحه دیگری برود، دانلود متوقف می‌شود. هیچ مکانیزم داخلی برای زنده ماندن آن پس از بسته شدن صفحه وجود ندارد. Background Fetch API این پارادایم را اساساً تغییر می‌دهد. این API به یک برنامه وب اجازه می‌دهد تا وظایف بزرگ دانلود (و آپلود) را به خود مرورگر واگذار کند، که سپس انتقال را در پس‌زمینه، مستقل از هر تب مرورگر، مدیریت می‌کند. این بدان معناست که دانلودها می‌توانند حتی اگر کاربر صفحه را ببندد ادامه پیدا کنند، و مهم‌تر از آن، می‌توانند با تغییر اتصال شبکه به طور خودکار متوقف و از سر گرفته شوند. این کلید ساخت تجربه‌های دانلود واقعاً مقاوم و شبیه به برنامه‌های نیتیو در وب است.

Background Fetch API چیست؟ یک دیدگاه جهانی

در هسته خود، Background Fetch API یک استاندارد وب مدرن است که برای واگذاری درخواست‌های شبکه بزرگ به موتور مرورگر طراحی شده است. این API به توسعه‌دهندگان این قدرت را می‌دهد که دانلودها یا آپلودهایی را آغاز کنند که فراتر از طول عمر پنجره قابل مشاهده برنامه ادامه می‌یابند. این فقط یک راحتی جزئی نیست؛ بلکه یک فناوری بنیادی برای یک وب قوی‌تر و تواناتر است.

تأثیر آن را از دیدگاه جهانی در نظر بگیرید. در بسیاری از نقاط جهان، اینترنت پرسرعت و پایدار یک کالای لوکس است، نه یک امر بدیهی. داده‌های تلفن همراه می‌توانند گران و محدود باشند. برای اینکه یک برنامه واقعاً جهانی باشد، باید این شرایط متنوع شبکه را در نظر بگیرد. Background Fetch یک فناوری توانمندساز برابری است. این API به یک کاربر در منطقه‌ای با اتصال متناوب اجازه می‌دهد تا دانلود یک ویدیوی آموزشی یا یک به‌روزرسانی نرم‌افزاری حیاتی را شروع کند، اطمینان داشته باشد که در پس‌زمینه با توجه به اتصالش تکمیل خواهد شد و داده‌های گران‌بهای خود را برای دانلود مجدد فایل‌های ناموفق هدر ندهد.

مزایای کلیدی Background Fetch

• مقاومت و قابلیت ادامه: این ویژگی اصلی است. مدیر دانلود داخلی مرورگر با قطعی‌های شبکه به خوبی برخورد می‌کند. اگر اتصال قطع شود، دانلود متوقف می‌شود. وقتی اتصال دوباره برقرار شد، به طور خودکار از جایی که متوقف شده بود، ادامه می‌یابد. این کار بدون هیچ منطق پیچیده جاوا اسکریپتی برای مدیریت هدرهای HTTP `Range` انجام می‌شود.
• پایداری آفلاین: از آنجایی که دانلود توسط فرآیند مرورگر مدیریت شده و توسط یک سرویس ورکر کنترل می‌شود، به یک تب باز وابسته نیست. یک کاربر می‌تواند دانلود را شروع کند، لپ‌تاپ خود را ببندد، به خانه برود، دوباره آن را باز کند و ببیند که دانلود تکمیل شده یا پیشرفت کرده است.
• بهینگی منابع: مرورگر در بهترین موقعیت برای بهینه‌سازی استفاده از منابع قرار دارد. می‌تواند انتقال‌ها را طوری زمان‌بندی کند که از اتصالات Wi-Fi استفاده کنند تا داده‌های تلفن همراه حفظ شوند و فرآیندها را برای بهینه‌سازی عمر باتری مدیریت کند که یک نگرانی حیاتی برای کاربران تلفن همراه در همه جا است.
• تجربه کاربری یکپارچه: مرورگر می‌تواند یک رابط کاربری نیتیو و در سطح سیستم برای دانلودهای در حال انجام فراهم کند. کاربران این دانلودهای وب را در همان جایی می‌بینند و مدیریت می‌کنند که دانلودهای برنامه‌های نیتیو را مدیریت می‌کنند، که یک تجربه روان و آشنا ایجاد می‌کند. این شامل اعلان‌هایی برای پیشرفت، تکمیل و شکست است.

اجزای اصلی: سرویس ورکرها و BackgroundFetchManager

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

قهرمان گمنام: سرویس ورکر

یک سرویس ورکر نوعی Web Worker است، اساساً یک اسکریپت جاوا اسکریپت که مرورگر شما آن را در پس‌زمینه، کاملاً جدا از هر صفحه وب، اجرا می‌کند. این به عنوان یک پروکسی شبکه قابل برنامه‌ریزی عمل می‌کند، درخواست‌های شبکه را رهگیری و مدیریت می‌کند، کش را مدیریت می‌کند و اعلان‌های فشاری (push notifications) را فعال می‌سازد. از آنجایی که به طور مستقل اجرا می‌شود، می‌تواند وظایف را حتی زمانی که وب‌سایت شما در یک تب مرورگر باز نیست، انجام دهد. برای Background Fetch, سرویس ورکر محیط پایداری است که به موفقیت یا شکست نهایی دانلود گوش می‌دهد، فایل‌های حاصل را پردازش می‌کند و UI را به‌روزرسانی می‌کند یا دارایی‌ها را برای استفاده آفلاین کش می‌کند.

رهبر ارکستر: BackgroundFetchManager

`BackgroundFetchManager` رابطی است که از طریق جاوا اسکریپت صفحه وب اصلی شما قابل دسترسی است و برای شروع و پیکربندی یک fetch پس‌زمینه استفاده می‌شود. شما از طریق شیء ثبت سرویس ورکر به آن دسترسی پیدا می‌کنید: `navigator.serviceWorker.ready.then(swReg => swReg.backgroundFetch)`. متد اصلی آن `fetch()` است که یک شناسه، لیستی از فایل‌ها برای دانلود و مجموعه‌ای از گزینه‌ها را می‌گیرد. این متد مانند شلیک تپانچه شروع است؛ به محض اینکه آن را فراخوانی کنید، مرورگر کنترل را به دست می‌گیرد و سرویس ورکر شما در خط پایان منتظر می‌ماند.

راهنمای پیاده‌سازی گام به گام و عملی

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

مرحله ۱: بررسی پشتیبانی مرورگر

قبل از هر کاری، باید اطمینان حاصل کنید که مرورگر کاربر از Background Fetch API پشتیبانی می‌کند. این عمل که به عنوان بهبود تدریجی (progressive enhancement) شناخته می‌شود، یک تجربه کاربردی برای همه را تضمین می‌کند، حتی اگر پیشرفته‌ترین ویژگی‌ها را دریافت نکنند.

در اسکریپت اصلی برنامه خود، وجود `BackgroundFetchManager` را بررسی می‌کنید:

if ('BackgroundFetchManager' in self) { // API پشتیبانی می‌شود، می‌توانیم دکمه دانلود پیشرفته را نمایش دهیم } else { // API پشتیبانی نمی‌شود، یک جایگزین ارائه دهید (مثلاً یک لینک استاندارد) }

مرحله ۲: ثبت یک سرویس ورکر

Background Fetch اساساً به یک سرویس ورکر وابسته است. اگر قبلاً برای برنامه وب پیشرو (PWA) خود یکی ندارید، باید یکی ایجاد و ثبت کنید. یک فایل به نام `service-worker.js` در دایرکتوری ریشه پروژه خود ایجاد کنید. سپس، آن را از فایل جاوا اسکریپت اصلی خود ثبت کنید:

async function registerServiceWorker() { if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.register('/service-worker.js'); console.log('سرویس ورکر با موفقیت ثبت شد:', registration); } catch (error) { console.error('ثبت سرویس ورکر ناموفق بود:', error); } } } registerServiceWorker();

مرحله ۳: شروع یک Background Fetch از فرانت‌اند

حالا، بیایید تابعی را ایجاد کنیم که با کلیک کاربر روی یک دکمه، دانلود را شروع کند. این تابع ثبت فعال سرویس ورکر را دریافت کرده و سپس `backgroundFetch.fetch()` را فراخوانی می‌کند.

const downloadVideoButton = document.getElementById('download-video-btn'); downloadVideoButton.addEventListener('click', async () => { try { // دریافت ثبت سرویس ورکر const swReg = await navigator.serviceWorker.ready; // تعریف جزئیات دانلود const videoUrl = '/assets/large-course-video.mp4'; const videoFileSize = 250 * 1024 * 1024; // 250 MB // شروع background fetch const bgFetch = await swReg.backgroundFetch.fetch('course-video-download-01', [videoUrl], { title: 'بخش ۱: مقدمه‌ای بر توسعه وب', icons: [{ sizes: '192x192', src: '/images/icons/icon-192.png', type: 'image/png', }], downloadTotal: videoFileSize, } ); console.log('Background Fetch شروع شد:', bgFetch); } catch (error) { console.error('شروع Background Fetch ممکن نبود:', error); } });

بیایید پارامترهای `swReg.backgroundFetch.fetch()` را بررسی کنیم:

• شناسه (`'course-video-download-01'`): یک شناسه رشته‌ای منحصر به فرد برای این وظیفه دانلود خاص. شما از این شناسه برای ارجاع به این وظیفه در آینده استفاده خواهید کرد.
• درخواست‌ها (`[videoUrl]`): آرایه‌ای از URLها برای fetch کردن. شما می‌توانید چندین فایل را در یک وظیفه گروهی دانلود کنید.
• گزینه‌ها (`{...}`): یک شیء برای پیکربندی دانلود. `title` و `icons` توسط مرورگر برای ایجاد اعلان UI نیتیو استفاده می‌شوند. `downloadTotal` اندازه کل مورد انتظار همه فایل‌ها به بایت است؛ ارائه این مقدار برای نمایش نوار پیشرفت دقیق توسط مرورگر حیاتی است.

مرحله ۴: مدیریت رویدادها در سرویس ورکر

هنگامی که دانلود به مرورگر واگذار می‌شود، کار کد فرانت‌اند شما در حال حاضر تمام شده است. بقیه منطق در `service-worker.js` قرار دارد که توسط مرورگر هنگامی که وظیفه تکمیل یا ناموفق شود، بیدار خواهد شد.

شما باید به دو رویداد کلیدی گوش دهید: `backgroundfetchsuccess` و `backgroundfetchfail`.

// در service-worker.js self.addEventListener('backgroundfetchsuccess', (event) => { const bgFetch = event.registration; event.waitUntil(async function () { console.log(`Background fetch با شناسه '${bgFetch.id}' با موفقیت تکمیل شد.`); // باز کردن کشی که فایل‌های دانلود شده را در آن ذخیره خواهیم کرد const cache = await caches.open('downloaded-assets-v1'); // دریافت تمام رکوردهای فایل‌های دانلود شده const records = await bgFetch.matchAll(); // برای هر رکورد، پاسخ را در کش ذخیره کنید const promises = records.map(async (record) => { const response = record.response.clone(); await cache.put(record.request, response); }); await Promise.all(promises); // اختیاری: به‌روزرسانی عنوان UI در اعلان دانلود await event.updateUI({ title: 'دانلود کامل و آماده است!' }); }()); }); self.addEventListener('backgroundfetchfail', (event) => { const bgFetch = event.registration; console.error(`Background fetch با شناسه '${bgFetch.id}' ناموفق بود.`); // اختیاری: به‌روزرسانی UI برای نمایش شکست event.updateUI({ title: 'دانلود ناموفق بود. لطفاً دوباره تلاش کنید.' }); });

در کنترل‌کننده موفقیت، ما Cache Storage را باز می‌کنیم، تمام فایل‌های دانلود شده را با استفاده از `bgFetch.matchAll()` بازیابی می‌کنیم و سپس هر یک را در کش قرار می‌دهیم. این کار ویدیو را برای پخش آفلاین توسط برنامه وب شما در دسترس قرار می‌دهد.

مرحله ۵: نظارت بر پیشرفت و تعامل کاربر

یک تجربه کاربری عالی شامل ارائه بازخورد است. وقتی کاربر روی اعلان دانلود ارائه شده توسط مرورگر کلیک می‌کند، باید او را به صفحه مربوطه در برنامه خود هدایت کنیم. ما این کار را با رویداد `backgroundfetchclick` در سرویس ورکر مدیریت می‌کنیم.

// در service-worker.js self.addEventListener('backgroundfetchclick', (event) => { const bgFetch = event.registration; if (bgFetch.id === 'course-video-download-01') { event.waitUntil( clients.openWindow('/downloads') ); } });

این کد به مرورگر می‌گوید که صفحه `/downloads` وب‌سایت شما را هنگامی که کاربر روی اعلان این وظیفه دانلود خاص کلیک می‌کند، باز کند. در آن صفحه، می‌توانید پیشرفت دانلود یا لیستی از دانلودهای تکمیل شده را نمایش دهید.

جادوی ادامه دانلود: واقعاً چگونه کار می‌کند؟

قدرتمندترین و شاید کمتر درک شده‌ترین جنبه Background Fetch، قابلیت ادامه خودکار آن است. چگونه بدون اینکه شما هیچ کد خاصی برای آن بنویسید کار می‌کند؟

پاسخ این است که شما مسئولیت را به یک فرآیند بسیار بهینه‌سازی شده در سطح سیستم واگذار کرده‌اید: مدیر دانلود خود مرورگر. وقتی شما یک fetch پس‌زمینه را شروع می‌کنید، به طور مستقیم بایت‌ها را روی شبکه مدیریت نمی‌کنید. این مرورگر است که این کار را انجام می‌دهد.

در اینجا توالی رویدادها در طول یک قطعی شبکه آمده است:

1. کاربر در حال دانلود یک فایل است و دستگاهش اتصال شبکه را از دست می‌دهد (مثلاً وارد یک تونل می‌شود).
2. مدیر دانلود مرورگر شکست شبکه را تشخیص داده و انتقال را به آرامی متوقف می‌کند. این مدیر تعداد بایت‌هایی که با موفقیت دریافت شده‌اند را پیگیری می‌کند.
3. دستگاه کاربر بعداً دوباره به شبکه متصل می‌شود.
4. مرورگر به طور خودکار تلاش می‌کند دانلود را از سر بگیرد. یک درخواست HTTP جدید برای همان فایل به سرور ارسال می‌کند، اما این بار یک هدر `Range` را شامل می‌شود که به طور موثر به سرور می‌گوید: "من 'X' بایت اول را دارم، لطفاً بقیه را از بایت 'X+1' برای من ارسال کن."
5. یک سرور با پیکربندی صحیح با وضعیت `206 Partial Content` پاسخ می‌دهد و شروع به استریم کردن باقیمانده فایل می‌کند.
6. مرورگر این داده‌های جدید را به فایل دانلود شده ناقص اضافه می‌کند.

تمام این فرآیند برای کد جاوا اسکریپت شما شفاف است. سرویس ورکر شما تنها در انتها، زمانی که فایل به طور کامل دانلود و به هم چسبانده شده است، یا اگر فرآیند به طور نهایی شکست بخورد (مثلاً فایل دیگر روی سرور نباشد)، مطلع می‌شود. این انتزاع فوق‌العاده قدرتمند است و توسعه‌دهندگان را از ساخت منطق پیچیده و شکننده ادامه دانلود آزاد می‌کند.

مفاهیم پیشرفته و بهترین شیوه‌ها برای مخاطبان جهانی

ارائه یک `downloadTotal` دقیق

گزینه `downloadTotal` چیزی فراتر از یک ویژگی خوب است. بدون آن، مرورگر تنها می‌تواند یک نشانگر پیشرفت نامشخص (مانند یک آیکون چرخان) را نمایش دهد. با آن، می‌تواند یک نوار پیشرفت دقیق را نمایش دهد و زمان تخمینی باقی‌مانده را محاسبه کند. این به طور قابل توجهی تجربه کاربر را بهبود می‌بخشد. برای به دست آوردن این مقدار، ممکن است لازم باشد یک درخواست `HEAD` به URL فایل ارسال کنید تا هدر `Content-Length` را بررسی کنید، یا API شما می‌تواند اندازه‌های فایل را به عنوان بخشی از متادیتای خود ارائه دهد.

مدیریت چندین فایل در یک Fetch واحد

این API هنگام گروه‌بندی دارایی‌های مرتبط می‌درخشد. تصور کنید کاربری در حال دانلود یک گالری عکس، یک بسته نرم‌افزاری با مستندات آن، یا یک مرحله از یک بازی ویدیویی با تمام بافت‌ها و فایل‌های صوتی آن است. شما می‌توانید آرایه‌ای از URLها را به `backgroundFetch.fetch()` ارسال کنید. این به عنوان یک وظیفه اتمی واحد توسط مرورگر تلقی می‌شود، با یک اعلان و یک نوار پیشرفت برای کل بسته. در کنترل‌کننده `backgroundfetchsuccess` شما، `bgFetch.matchAll()` آرایه‌ای از رکوردها را برمی‌گرداند که می‌توانید آنها را به صورت جداگانه پردازش کنید.

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

یک دانلود می‌تواند به دلایل زیادی شکست بخورد: سرور خطای 404 برمی‌گرداند، فضای دیسک کاربر تمام می‌شود، یا کاربر به صورت دستی دانلود را از UI مرورگر لغو می‌کند. کنترل‌کننده رویداد `backgroundfetchfail` شما شبکه ایمنی شماست. می‌توانید از آن برای پاکسازی هرگونه داده ناقص، اطلاع‌رسانی به کاربر در برنامه خود و شاید ارائه یک دکمه تلاش مجدد استفاده کنید. درک اینکه شکست یک احتمال است، کلید ساخت یک سیستم قوی است.

ذخیره دارایی‌های دانلود شده با Cache API

متداول‌ترین و موثرترین مکان برای ذخیره دارایی‌های وب دانلود شده، Cache API است. این یک مکانیزم ذخیره‌سازی است که به طور خاص برای اشیاء `Request` و `Response` طراحی شده است. با قرار دادن فایل‌های دانلود شده خود در کش، می‌توانید بعداً آنها را مستقیماً از سرویس ورکر هنگام تلاش کاربر برای دسترسی به آنها ارائه دهید، که برنامه شما را واقعاً قادر به کار آفلاین می‌کند.

موارد استفاده در صنایع مختلف

کاربردهای Background Fetch گسترده است و صنایع جهانی متعددی را در بر می‌گیرد:

• رسانه و سرگرمی: سرویس‌های استریم مبتنی بر وب می‌توانند یک حالت آفلاین ارائه دهند که به کاربران در هر کشوری اجازه می‌دهد فیلم‌ها یا موسیقی را برای پروازها یا رفت‌وآمدهای روزانه دانلود کنند، درست مانند همتایان برنامه نیتیو خود.
• آموزش و یادگیری الکترونیکی: یک دانشگاه در آفریقا می‌تواند یک پورتال وب برای دانشجویان فراهم کند تا سخنرانی‌های ویدیویی بزرگ و مواد درسی تعاملی را دانلود کنند، و اطمینان حاصل کند که حتی کسانی که اینترنت خانگی ضعیفی دارند نیز می‌توانند به تحصیلات خود دسترسی داشته باشند.
• شرکتی و خدمات میدانی: یک شرکت تولیدی جهانی می‌تواند مهندسان میدانی خود را به یک PWA مجهز کند که به آنها اجازه می‌دهد شماتیک‌های سه بعدی عظیم و کتابچه‌های راهنمای فنی ماشین‌آلات را قبل از رفتن به یک سایت دورافتاده بدون دسترسی به اینترنت دانلود کنند.
• سفر و گردشگری: یک برنامه سفر می‌تواند به کاربران اجازه دهد نقشه‌های آفلاین، راهنماهای شهری و اطلاعات بلیط را برای مقصد خود دانلود کنند و آنها را از هزینه‌های گران رومینگ داده‌های بین‌المللی نجات دهد.

سازگاری مرورگر و چشم‌انداز آینده

در زمان نگارش این مطلب، Background Fetch API عمدتاً در مرورگرهای مبتنی بر کرومیوم مانند گوگل کروم و مایکروسافت اج پشتیبانی می‌شود. مهم است که منابعی مانند CanIUse.com یا MDN Web Docs را برای آخرین اطلاعات سازگاری بررسی کنید. اگرچه هنوز به طور جهانی پذیرفته نشده است، حضور آن در مرورگرهای اصلی گام مهمی به جلو است. همانطور که پلتفرم وب به تکامل خود ادامه می‌دهد، APIهایی مانند این، شکاف قابلیت بین برنامه‌های وب و نیتیو را پر می‌کنند و راه را برای نسل جدیدی از PWAهای قدرتمند، مقاوم و قابل دسترس در سطح جهانی هموار می‌سازند.

نتیجه‌گیری: ساختن یک وب مقاوم‌تر برای همه

Background Fetch API چیزی فراتر از یک ابزار برای دانلود فایل‌هاست. این بیانیه‌ای است درباره نوع وبی که می‌خواهیم بسازیم: وبی که مقاوم، کاربر-محور و برای همه کار می‌کند، صرف نظر از دستگاه یا کیفیت اتصال شبکه آنها. با واگذاری انتقال‌های بزرگ به مرورگر، ما کاربران خود را از اضطراب تماشای نوار پیشرفت رها می‌کنیم، داده‌ها و باتری آنها را ذخیره می‌کنیم و تجربه‌ای قوی و قابل اعتماد ارائه می‌دهیم.

هنگامی که پروژه وب بعدی خود را که شامل انتقال فایل‌های بزرگ است برنامه‌ریزی می‌کنید، فراتر از `fetch` سنتی نگاه کنید. زمینه جهانی کاربران خود را در نظر بگیرید و قدرت Background Fetch را برای ساختن یک برنامه واقعاً مدرن و آفلاین-اول در آغوش بگیرید. آینده وب پایدار و مقاوم است، و اکنون، دانلودهای شما نیز می‌توانند اینگونه باشند.