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

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

Martin Schierle

Scott Friesen

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

הוספת קובץ שירות (service worker)

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

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

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

כאן אחת התכונות העוצמתיות ביותר באינטרנט וצלה לשם: service worker.

קובץ השירות (service worker) יכול ליירט את הבקשות השונות שנשלחות על ידי הנגן, עם הנתונים מ-IndexedDB. הפעולה הזו מוסיפה בשקיפות את הנתונים אופליין יכולות ללא צורך בשינוי שורה אחת בקוד השחקן.

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

הוספה של בקשת התקנה בהתאמה אישית

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

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

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

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

דף אופליין שמציג את כל התוכן שזמין לצפייה במצב אופליין.

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

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

תוצאות

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

מה השלב הבא?

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