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

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

מרטין שיירל

סקוט פריסן

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

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

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

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

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

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

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

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

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

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

בניית דף אופליין לצורך גישה להורדות

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

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

כדי לספק חוויית משתמש עשירה, ה-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();
});

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

מצב כהה

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

תוצאות

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

מה השלב הבא?

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