ניהול אחסון סרטונים באינטרנט

קשה לנהל נכסי וידאו. סטרימינג צורך הרבה רוחב פס והטמנת נתונים במטמון היא לא פשוטה. הבעיות האלה מחמירות כשסרטונים מופעלים בלולאה, כמו בתצוגה של קיוסק. לדוגמה, אם לחברה יש מאות מכשירים שמנגנים 30 סרטונים בלופ כל היום, כל יום, זה עלול לגרום לעומס יתר ברשת שלה. הצגת הסרטונים מהמטמון במקום סטרימינג שלהם מאפשרת לכם לשלם על ההורדה רק פעם אחת, להפעיל אותם מהר יותר בפעמים הבאות ולהפוך אותם לזמינים להפעלה אופליין. כדי לעשות את זה, אפשר לנצל את יכולות האחסון של הדפדפן. ה-API של Cache storage ו-IndexedDB הם המתאימים ביותר לאחסון קובצי וידאו. שתי האפשרויות טובות, אבל אנחנו נתמקד ב-Cache storage API כי הוא משולב עם ספריית service worker הפופולרית Workbox.

שמירת סרטון במטמון מ-Service Worker

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

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

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    }),
  );
});

ניהול התהליך הזה עבור סוגים שונים של נכסים או כתובות URL שדורשים אסטרטגיות שונות של שמירת נתונים במטמון יכול להיות תהליך חוזר שמועד לשגיאות. ‫Workbox מספקת קבוצה של כלים, כולל routing helpers וcaching strategies, שמאפשרים לכם לכתוב קוד של service worker בצורה הצהרתית וניתנת לשימוש חוזר.

האסטרטגיה הקודמת נקראת cache first. כדי לכתוב את אותו הדבר באמצעות Workbox, צריך לכלול את הקוד הבא:

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst()
);

‫Workbox מספקת מתכונים דומים לאסטרטגיות אחרות של שמירת נתונים במטמון ולמשימות נפוצות של קובצי שירות (Service Workers), כולל שילוב עם כלי בנייה כמו Webpack ו-Rollup.

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

גישה חפוזה

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

אפשר להשתמש בקוד Workbox הבא ב-service worker כדי לבצע שמירה מראש במטמון של קבצים:

import { addPlugins, precacheAndRoute } from 'workbox-precaching';
import { RangeRequestsPlugin } from 'workbox-range-requests';

addPlugins([new RangeRequestsPlugin()]);
precacheAndRoute(self.__WB_MANIFEST);

• ‫import(s) – טעינת ההתאמות הנדרשות ממודולי Workbox המתאימים. מכיוון ש-ESModules עדיין לא נתמך באופן אוניברסלי על ידי service workers, צריך להעביר את ה-service worker שמבוסס על Workbox דרך bundler כדי שהוא יפעל בסביבת ייצור.
• ‫RangeRequestsPlugin – מאפשר לבקשה עם כותרת Range להתבצע על ידי תגובה ששמורה במטמון. הסיבה לכך היא שבדרך כלל הדפדפנים משתמשים בכותרת Range לתוכן מדיה.
• ‫addPlugins – מאפשר להוסיף Workbox plugins לכל בקשה של Workbox.
• ‫precacheAndRoute – מוסיף רשומות לרשימת השמירה במטמון ויוצר מסלול לטיפול בבקשות האחזור המתאימות.
• ‫__WB_MANIFEST – placeholder שמוחלף על ידי Workbox CLI (או על ידי תוספים לכלי בנייה) במניפסט של מטמון מראש.

מעבירים את ה-service worker אל Workbox CLI או אל כלי הבנייה שבחרתם, ומגדירים איך ליצור את המטמון מראש. קובץ workbox-config.js, כמו זה שמופיע בהמשך, יציין ל-CLI איך לעבד את ה-service worker:

module.exports = {
  globDirectory: '.',
  globPatterns: ['**/*.{html,mp4}'],
  maximumFileSizeToCacheInBytes: 5000000,
  swSrc: 'sw.js',
  swDest: 'sw.js',
};

• ‫globDirectory – תיקיית הבסיס שממנה יתחיל החיפוש של קבצים שמוגדרים לאחסון במטמון
• ‫globPatterns – דפוסי הקבצים (globs) שצריך להוסיף אותם למטמון מראש.
• ‫maximumFileSizeToCacheInBytes – הגבול העליון של גודל הקובץ בבייטים שניתן להוסיף למטמון מראש.
• ‫swSrc – המיקום של הקובץ שישמש ליצירת ה-Service Worker.
• ‫swDest - היעד של ה-service worker שנוצר (יכול להיות זהה לקובץ המקור, אבל צריך לוודא ש-self.__WB_MANIFEST מופיע בכל הפעלה).

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

precacheAndRoute([
  {
    revision: '524ac4b453c83f76eb9caeec11854ca5',
    url: 'ny.mp4',
  },
]);

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

גישה עצלה

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

שמירת הקבצים במטמון

אפשר ליצור מטמון באמצעות Cache.open(), ואז להוסיף קבצים למטמון באמצעות Cache.add() או Cache.addAll(). אם האפליקציה מקבלת רשימת JSON של סרטונים שצריך לשמור במטמון, אפשר להוסיף אותם למטמון של סרטונים באופן הבא:

// Open video cache
const cache = await caches.open('video-cache');
// Fetch list of videos
const videos = await (await fetch('/video-list.json')).json();
// Add videos to cache
await cache.addAll(videos);

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

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

הצגת קובצי וידאו שנשמרו במטמון

אפשר להשתמש בשיטת שמירה במטמון בזמן ריצה של service worker, כמו cache first, כדי להציג את קובצי הווידאו שנשמרו במטמון קודם לכן:

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { RangeRequestsPlugin } from 'workbox-range-requests';

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst({
    cacheName: 'video-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200],
      }),
      new RangeRequestsPlugin(),
    ],
  }),
);

• ‫import(s) – טוען את הקישורים הנדרשים ממודולי Workbox המתאימים.
• ‫registerRoute – מעביר בקשות לפונקציות (אסטרטגיות אחסון במטמון ותוספים) שמספקות תשובות.
• ‫CacheFirst – אסטרטגיית העברה למטמון שממלאת את הבקשה מהמטמון, אם היא זמינה, אחרת מאחזרת אותה מהרשת ומעדכנת את המטמון.
• ‫CacheableResponsePlugin – משמש לציון הכותרות שצריכות להיות נוכחות כדי שהתגובה תהיה ניתנת לשמירה במטמון. כדי למנוע שמטמון של סרטונים בסטרימינג יכלול תגובות של תוכן חלקי (206), חשוב לכלול רק 200 סטטוסים של מטמון של נתיבים.
• ‫RangeRequestsPlugin – תוסף שמאפשר לבקשה עם כותרת Range להתבצע באמצעות תגובה ששמורה במטמון. הסיבה לכך היא שבדרך כלל הדפדפנים משתמשים בכותרת Range לתוכן מדיה.

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