منتشر شده: ۵ ژوئیه ۲۰۲۱
برنامههای وب پیشرونده (PWA) بسیاری از ویژگیهایی را که قبلاً برای برنامههای بومی در نظر گرفته شده بود، به وب میآورند. یکی از برجستهترین ویژگیهای مرتبط با PWAها، تجربه آفلاین است.
حتی بهتر از آن، یک تجربه پخش آنلاین رسانه است که میتوانید به روشهای مختلف به کاربران خود ارائه دهید. با این حال، این یک مشکل واقعاً منحصر به فرد ایجاد میکند - فایلهای رسانهای میتوانند بسیار بزرگ باشند. بنابراین ممکن است بپرسید:
- چگونه یک فایل ویدیویی حجیم را دانلود و ذخیره کنم؟
- و چطور باید اون رو به کاربر نشون بدم؟
در این مقاله، ضمن اشاره به PWA آزمایشی Kino که ساختهایم، به پاسخ این سؤالات خواهیم پرداخت. این PWA مثالهای عملی از چگونگی پیادهسازی یک تجربه پخش رسانهای آفلاین بدون استفاده از هیچ چارچوب عملکردی یا نمایشی را در اختیار شما قرار میدهد. مثالهای زیر عمدتاً برای اهداف آموزشی هستند، زیرا در بیشتر موارد، احتمالاً باید از یکی از چارچوبهای رسانهای موجود برای ارائه این ویژگیها استفاده کنید.
مگر اینکه طرح توجیهی خوبی برای توسعهی PWA خود داشته باشید، ساخت یک PWA با پخش آفلاین چالشهای خودش را دارد. در این مقاله با APIها و تکنیکهایی که برای ارائه یک تجربه رسانهای آفلاین با کیفیت بالا به کاربران استفاده میشوند، آشنا خواهید شد.
دانلود و ذخیره یک فایل رسانهای حجیم
برنامههای وب پیشرونده معمولاً از رابط برنامهنویسی کاربردی (API) Cache برای دانلود و ذخیره داراییهای مورد نیاز برای ارائه تجربه آفلاین استفاده میکنند: اسناد، شیوهنامهها، تصاویر و موارد دیگر.
در اینجا یک مثال ساده از استفاده از Cache API در یک Service Worker آورده شده است:
const cacheStorageName = 'v1';
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheStorageName).then(function(cache) {
return cache.addAll([
'index.html',
'style.css',
'scripts.js',
// Don't do this.
'very-large-video.mp4',
]);
})
);
});
اگرچه مثال بالا از نظر فنی کار میکند، اما استفاده از Cache API محدودیتهایی دارد که استفاده از آن را با فایلهای بزرگ غیرعملی میکند.
برای مثال، API مربوط به حافظه پنهان (Cache API) موارد زیر را انجام نمیدهد:
- به شما امکان میدهد دانلودها را به راحتی متوقف کرده و از سر بگیرید
- به شما امکان میدهد پیشرفت دانلودها را پیگیری کنید
- ارائه روشی برای پاسخ صحیح به درخواستهای محدوده HTTP
همه این مشکلات، محدودیتهای جدی برای هر برنامه ویدیویی هستند. بیایید چند گزینه دیگر را که ممکن است مناسبتر باشند، بررسی کنیم.
امروزه، Fetch API یک روش چند مرورگری برای دسترسی غیرهمزمان به فایلهای راه دور است. در مورد استفاده ما، این API به شما امکان میدهد به فایلهای ویدیویی بزرگ به صورت یک جریان دسترسی پیدا کنید و آنها را به صورت تدریجی و به صورت تکههایی با استفاده از یک درخواست محدوده HTTP ذخیره کنید.
حالا که میتوانید تکههای داده را با Fetch API بخوانید، باید آنها را ذخیره کنید. احتمالاً مجموعهای از فرادادهها (metadata) با فایل رسانه شما مرتبط هستند، مانند: نام، توضیحات، مدت زمان اجرا، دسته و غیره.
شما فقط یک فایل رسانهای را ذخیره نمیکنید، بلکه یک شیء ساختاریافته را ذخیره میکنید و فایل رسانهای فقط یکی از ویژگیهای آن است.
در این مورد، API مربوط به IndexedDB یک راهحل عالی برای ذخیره دادههای رسانهای و فرادادهها ارائه میدهد. این API میتواند حجم عظیمی از دادههای دودویی را به راحتی در خود نگه دارد و همچنین ایندکسهایی را ارائه میدهد که به شما امکان میدهد جستجوی دادهها را بسیار سریع انجام دهید.
دانلود فایلهای رسانهای با استفاده از Fetch API
ما در PWA نسخه آزمایشی خود، که آن را Kino نامگذاری کردیم، چند ویژگی جالب در مورد Fetch API ایجاد کردیم -