چگونه ZDF یک PWA ویدیویی با حالت آفلاین و تاریک ایجاد کرد

بیاموزید که چگونه ZDF یک برنامه وب پیشرفته (PWA) با ویژگی‌های مدرن مانند پشتیبانی آفلاین، قابلیت نصب و حالت تاریک ایجاد کرد.

Martin Schierle

Scott Friesen

هنگامی که پخش کننده ZDF در حال بررسی طراحی مجدد پشته فناوری frontend خود بود، تصمیم گرفت نگاهی دقیق تر به برنامه های وب پیشرو برای سایت پخش خود ZDFmediathek داشته باشد. آژانس توسعه Cellular این چالش را برای ایجاد یک تجربه مبتنی بر وب که همتراز با برنامه‌های iOS و Android مخصوص پلتفرم ZDF است، پذیرفت. PWA قابلیت نصب، پخش ویدیوی آفلاین، انیمیشن های انتقالی و حالت تاریک را ارائه می دهد.

اضافه شدن یک کارگر خدماتی

یکی از ویژگی های کلیدی PWA پشتیبانی آفلاین است. برای ZDF بیشتر کارهای سنگین توسط Workbox انجام می شود، مجموعه ای از کتابخانه ها و ماژول های Node که پشتیبانی از استراتژی های مختلف کش را آسان می کند. ZDF PWA با TypeScript و React ساخته شده است، بنابراین از کتابخانه Workbox که قبلاً در برنامه create-react-app تعبیه شده است برای پیش کش کردن دارایی های ثابت استفاده می کند. این به برنامه اجازه می‌دهد تا محتوای پویا را به‌صورت آفلاین در دسترس قرار دهد، در این مورد ویدیوها و ابرداده‌های آن‌ها.

ایده اصلی بسیار ساده است: ویدیو را واکشی کنید و آن را به عنوان یک لکه در IndexedDB ذخیره کنید. سپس در حین پخش، به رویدادهای آنلاین/آفلاین گوش دهید و وقتی دستگاه آفلاین شد، به نسخه دانلود شده بروید.

متأسفانه همه چیز کمی پیچیده تر شد. یکی از الزامات پروژه استفاده از پخش کننده وب رسمی ZDF بود که هیچ پشتیبانی آفلاینی ارائه نمی دهد. پخش کننده یک شناسه محتوا را به عنوان ورودی می گیرد، با ZDF API صحبت می کند و ویدیوی مرتبط را پخش می کند.

اینجاست که یکی از قدرتمندترین ویژگی های وب به کمک می آید: کارگران خدمات .

کارگر سرویس می تواند درخواست های مختلف انجام شده توسط پخش کننده را رهگیری کند و با داده های IndexedDB پاسخ دهد. این به طور شفاف قابلیت های آفلاین را بدون نیاز به تغییر یک خط کد پخش کننده اضافه می کند.

از آنجایی که ویدیوهای آفلاین بسیار بزرگ هستند، یک سوال بزرگ این است که واقعاً چه تعداد از آنها را می توان در یک دستگاه ذخیره کرد. با کمک StorageManager API برنامه می‌تواند فضای موجود را تخمین بزند و حتی قبل از شروع دانلود، در صورت کمبود فضای کافی به کاربر اطلاع دهد. متأسفانه Safari در لیست مرورگرهایی که این API را پیاده‌سازی می‌کنند نیست و در زمان نگارش این مقاله اطلاعات به‌روز زیادی در مورد نحوه اعمال سهمیه مرورگرهای دیگر وجود نداشت. بنابراین، تیم یک ابزار کوچک برای آزمایش رفتار در دستگاه‌های مختلف نوشت. در حال حاضر یک مقاله جامع وجود دارد که تمام جزئیات را خلاصه می کند.

افزودن یک درخواست نصب سفارشی

ZDF PWA یک جریان نصب درون برنامه ای سفارشی ارائه می دهد و از کاربران می خواهد تا به محض اینکه می خواهند اولین ویدیوی خود را دانلود کنند، برنامه را نصب کنند. این زمان مناسبی برای درخواست نصب است زیرا کاربر قصد واضحی برای استفاده آفلاین از برنامه ابراز کرده است.

هنگام بارگیری یک ویدیو برای مصرف آفلاین، اعلان نصب سفارشی فعال می‌شود.

ساخت یک صفحه آفلاین برای دسترسی به دانلودها

هنگامی که دستگاه به اینترنت متصل نیست و کاربر به صفحه‌ای می‌رود که در حالت آفلاین در دسترس نیست، به جای آن صفحه خاصی نشان داده می‌شود که تمام ویدیوهایی را که قبلاً دانلود شده‌اند یا (در صورتی که هنوز محتوایی دانلود نشده است) را فهرست می‌کند. توضیح کوتاهی در مورد ویژگی آفلاین

صفحه آفلاین که تمام محتوای موجود برای تماشای آفلاین را نشان می دهد.

استفاده از نرخ بارگذاری فریم برای ویژگی های تطبیقی

برای ارائه یک تجربه کاربری غنی، ZDF PWA شامل برخی از انتقال‌های ظریف است که هنگام پیمایش یا پیمایش کاربر اتفاق می‌افتد. در دستگاه‌های ارزان‌قیمت، چنین انیمیشن‌هایی معمولاً اثر معکوس دارند و در صورتی که برنامه با سرعت ۶۰ فریم در ثانیه اجرا نشود، احساس کندی و واکنش کمتری می‌دهد. برای در نظر گرفتن این موضوع، برنامه نرخ فریم واقعی را از طریق requestAnimationFrame() اندازه‌گیری می‌کند، در حالی که برنامه همه انیمیشن‌ها را بارگیری و غیرفعال می‌کند، زمانی که مقدار به زیر یک آستانه خاص کاهش یابد.

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

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

حالت تاریک

یک ویژگی محبوب برای تجارب مدرن تلفن همراه حالت تاریک است. به خصوص هنگام تماشای ویدیو در نور محیطی کم، بسیاری از افراد رابط کاربری کم نور را ترجیح می دهند. ZDF PWA نه تنها سوئیچ‌هایی را ارائه می‌کند که به کاربران اجازه می‌دهد بین یک تم روشن و تاریک جابجا شوند، بلکه به تغییرات ترجیحات رنگ در سراسر سیستم عامل نیز واکنش نشان می‌دهد. به این ترتیب برنامه به طور خودکار ظاهر خود را در دستگاه‌هایی که برنامه‌ای را برای تغییر پایه تم در زمان روز تنظیم کرده‌اند تغییر می‌دهد.

نتایج

برنامه وب پیشرفته جدید بی سر و صدا به عنوان نسخه بتا عمومی در مارس 2020 راه اندازی شد و از آن زمان تاکنون بازخوردهای مثبت زیادی دریافت کرده است. در حالی که فاز بتا ادامه دارد، PWA همچنان تحت دامنه موقت خود اجرا می شود. حتی اگر PWA به صورت عمومی تبلیغ نشد، تعداد کاربران به طور پیوسته در حال افزایش است. بسیاری از این ها از فروشگاه مایکروسافت هستند که به کاربران ویندوز 10 اجازه می دهد تا PWA ها را کشف کرده و آنها را مانند برنامه های مخصوص پلتفرم نصب کنند.

بعدش چی؟

ZDF قصد دارد به افزودن ویژگی‌هایی به PWA خود ادامه دهد، از جمله ورود به سیستم برای شخصی‌سازی، مشاهده بین دستگاه‌ها و پلتفرم‌ها و اعلان‌های فشار.