איך ZDF יצר סרטון PWA במצב אופליין ובמצב כהה

איך ZDF יצרה Progressive Web App (PWA) עם תכונות מודרניות כמו תמיכה אופליין, אפשרות התקנה ומצב כהה.

Martin Schierle

Scott Friesen

כשחברת השידור ZDF שקלה לעצב מחדש את סטאק הטכנולוגיה של הקצה הקדמי, היא החליטה לבדוק לעומק את השימוש באפליקציות Progressive Web באתר הסטרימינג שלה, ZDFmediathek. סוכנות הפיתוח Cellular לקחה על עצמה את האתגר של בניית חוויית שימוש מבוססת-אינטרנט ברמה זהה לאפליקציות של ZDF ל-iOS ול-Android. אפליקציית ה-PWA מאפשרת התקנה, הפעלת סרטונים אופליין, אנימציות של מעברים ומצב כהה.

הוספת שירות עבודה

אחת התכונות העיקריות של PWA היא תמיכה אופליין. ב-ZDF, רוב העבודה הקשה מתבצעת על ידי Workbox, קבוצה של ספריות ומודולים של Node שמאפשרים לתמוך בקלות בשיטות שונות של אחסון במטמון. אפליקציית ה-PWA של ZDF נוצרה באמצעות TypeScript ו-React, ולכן היא משתמשת בספריית Workbox שכבר מובנית ב-create-react-app כדי לאחסן מראש נכסים סטטיים. כך האפליקציה יכולה להתמקד ביצירת תוכן דינמי שזמין במצב אופליין, במקרה הזה הסרטונים והמטא-נתונים שלהם.

הרעיון הבסיסי די פשוט: לאחזר את הסרטון ולאחסן אותו כ-blob ב-IndexedDB. לאחר מכן, במהלך ההפעלה, תוכלו להאזין לאירועים אונליין ואופליין, ולעבור לגרסה שהורדתם כשהמכשיר עובר למצב אופליין.

לצערנו, הדברים התבררו כקצת יותר מורכבים. אחת מדרישות הפרויקט הייתה להשתמש בנגן האינטרנט הרשמי של ZDF, שלא מספק תמיכה אופליין. הנגן לוקח את מזהה התוכן כקלט, מדבר אל ZDF API ומפעיל את הסרטון המשויך.

כאן נכנסת לתמונה אחת מהתכונות החזקות ביותר באינטרנט: קובצי שירות (service workers).

ה-Service Worker יכול ליירט את הבקשות השונות שהנגן מבצע ולהשיב עם הנתונים מ-IndexedDB. כך מוסיפים בצורה שקופה יכולות אופליין בלי לשנות שורה אחת בקוד השחקן.

סרטונים אופליין נוטים להיות גדולים למדי, ולכן השאלה הגדולה היא כמה מהם אפשר לאחסן בפועל במכשיר. בעזרת StorageManager API, האפליקציה יכולה להעריך את נפח האחסון הזמין ולהודיע למשתמש אם אין מספיק מקום עוד לפני שההורדה מתחילה. לצערנו, דפדפן Safari לא נכלל ברשימת הדפדפנים שמטמיעים את ה-API הזה, ובזמן כתיבת המאמר לא היה הרבה מידע עדכני על האופן שבו דפדפנים אחרים מחילים מכסות. לכן, הצוות כתב תוכנה קטנה כדי לבדוק את ההתנהגות במכשירים שונים. כבר יש מאמר מקיף שמסכם את כל הפרטים.

הוספת הודעת התקנה מותאמת אישית

ב-PWA של ZDF יש תהליך התקנה מותאם אישית באפליקציה, והמשתמשים מתבקשים להתקין את האפליקציה ברגע שהם רוצים להוריד את הסרטון הראשון. זהו זמן טוב לבקש מהמשתמשים להתקין את האפליקציה, כי הם הביעו כוונה ברורה להשתמש בה אופליין.

יצירת דף אופליין כדי לגשת להורדות

כשהמכשיר לא מחובר לאינטרנט והמשתמש מנווט לדף שלא זמין במצב אופליין, מוצג במקום זאת דף מיוחד עם כל הסרטונים שהורדו בעבר, או הסבר קצר על התכונה אופליין.

שימוש בקצב טעינת הפריימים לתכונות דינמיות

כדי לספק חוויית משתמש עשירה, אפליקציית ה-PWA של ZDF כוללת כמה מעברים עדינים שמתרחשים כשהמשתמש גולל או מנווט. במכשירים ברמה נמוכה, אנימציות כאלה בדרך כלל גורמות לאפליקציה להרגיש איטית פחות תגובה, אם הן לא פועלות במהירות של 60 פריימים לשנייה. כדי להביא זאת בחשבון, האפליקציה מודדת את קצב הפריימים בפועל באמצעות 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();
});

גם אם המדידה הזו מספקת רק אינדיקציה גסה לגבי ביצועי המכשיר ומשתנה בכל טעינה, היא עדיין הייתה בסיס טוב לקבלת החלטות. חשוב לציין שבהתאם לתרחיש לדוגמה, יש טכניקות נוספות לטעינה דינמית שהמפתחים יכולים להטמיע. אחד היתרונות החשובים של הגישה הזו הוא שהיא זמינה בכל הפלטפורמות.

מצב כהה

מצב כהה הוא תכונה פופולרית בחוויית השימוש המודרנית בנייד. הרבה אנשים מעדיפים ממשק משתמש כהה, במיוחד כשהם צופים בסרטונים בתאורה חלשה. אפליקציית ה-PWA של ZDF לא רק מספקת מתג שמאפשר למשתמשים לעבור בין עיצוב בהיר לעיצוב כהה, אלא גם מגיבה לשינויים בהעדפות הצבע ברמת מערכת ההפעלה. כך המראה של האפליקציה ישתנה באופן אוטומטי במכשירים שבהם הגדרתם תזמון לשינוי העיצוב בהתאם לשעה ביום.

תוצאות

ה-Progressive Web App החדשה הושקה באופן שקט כגרסת בטא ציבורית במרץ 2020, ומאז קיבלה הרבה משוב חיובי. כל עוד שלב הבטא נמשך, ה-PWA עדיין פועלת בדומיין הזמני שלה. למרות שהאפליקציה לא קידמה את עצמה באופן ציבורי, מספר המשתמשים בה הולך וגדל. הרבה מהמוצרים האלה מגיעים מחנות Microsoft, שמאפשרת למשתמשי Windows 10 למצוא אפליקציות PWA ולהתקין אותן כמו אפליקציות ספציפיות לפלטפורמה.

מה השלב הבא?

ב-ZDF מתכננים להמשיך להוסיף תכונות לאפליקציית ה-PWA שלהם, כולל כניסה לחשבון לצורך התאמה אישית, צפייה במכשירים ובפלטפורמות שונים והתראות דחיפה.