Zarządzanie miejscem na dane wideo w przeglądarce

Zarządzanie filmami jest trudne. Streaming wymaga dużej przepustowości, a buforowanie nie jest proste. Problemy te nasilają się, gdy filmy są odtwarzane w pętli, np. na wyświetlaczu kiosku. Jeśli na przykład firma ma setki urządzeń odtwarzających 30 filmów w pętli przez cały dzień, każdego dnia, może to szybko przeciążyć jej sieć. Wyświetlając filmy z pamięci podręcznej zamiast przesyłać je strumieniowo, ponosisz koszt pobierania tylko raz, przyspieszasz kolejne odtwarzania i umożliwiasz odtwarzanie offline. W tym celu możesz skorzystać z możliwości przechowywania danych w przeglądarce, z których interfejs Cache Storage API i IndexedDB najlepiej nadają się do przechowywania plików wideo. Obie opcje są dobre, ale skupimy się na interfejsie Cache Storage API ze względu na jego integrację z popularną biblioteką service worker Workbox.

Buforowanie filmów z użyciem service workera

Pobieranie i buforowanie dużych zasobów, takich jak filmy, może być czasochłonne i wymagać dużej mocy obliczeniowej, dlatego należy to robić w tle poza wątkiem głównym. Service worker jest szczególnie przydatny do przenoszenia zadań związanych z pamięcią podręczną. Pełnią one rolę serwera proxy między stroną a siecią, umożliwiając przechwytywanie żądań i stosowanie dodatkowej logiki do odpowiedzi sieci, np. strategii buforowania.

Istnieje wiele różnych strategii buforowania, a każda z nich jest przeznaczona do różnych zastosowań. Aby na przykład wyświetlić plik z pamięci podręcznej, jeśli jest dostępny, lub wrócić do sieci, jeśli nie jest, możesz napisać ten kod:

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

Zarządzanie tymi ustawieniami w przypadku różnych typów zasobów lub adresów URL, które wymagają różnych strategii buforowania, może być powtarzalnym i podatnym na błędy procesem. Workbox udostępnia zestaw narzędzi, w tym pomocników routingu i strategie buforowania, które umożliwiają pisanie kodu service worker w bardziej deklaratywny i wielokrotnego użytku sposób.

Poprzednia strategia to najpierw pamięć podręczna. Aby napisać to samo za pomocą Workbox, musisz dodać te elementy:

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

Workbox udostępnia podobne przepisy dotyczące innych strategii buforowania i typowych zadań instancji roboczej, w tym integracji z narzędziami do kompilacji, takimi jak Webpack i Rollup.

Po skonfigurowaniu Workboxa musisz wybrać, kiedy chcesz zapisywać filmy w pamięci podręcznej. Możesz to zrobić na 2 sposoby: od razu po wczytaniu strony lub dopiero wtedy, gdy użytkownik poprosi o wyświetlenie filmu.

Podejście zachłanne

Wstępne buforowanie to technika, w której pliki są zapisywane w pamięci podręcznej podczas instalacji instancji roboczej usługi, dzięki czemu są dostępne od razu po jej uruchomieniu. Workbox może automatycznie skonfigurować wstępne buforowanie plików, do których ma dostęp podczas procesu kompilacji.

W usłudze Service Worker możesz użyć tego kodu Workbox, aby wstępnie pobrać pliki do pamięci podręcznej:

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

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

• import(s) – wczytuje wymagane powiązania z odpowiednich modułów Workbox. Ponieważ moduły ESModules nie są jeszcze powszechnie obsługiwane przez procesy robocze usługi, proces roboczy usługi oparty na Workbox musi zostać przekazany przez narzędzie do łączenia, aby działał w środowisku produkcyjnym.
• RangeRequestsPlugin – umożliwia zrealizowanie żądania z nagłówkiem Range za pomocą odpowiedzi z pamięci podręcznej. Jest to konieczne, ponieważ przeglądarki zwykle używają nagłówka Range w przypadku treści multimedialnych.
• addPlugins – umożliwia dodawanie wtyczek Workbox do każdego żądania Workbox.
• precacheAndRoute – dodaje wpisy do listy wstępnego buforowania i tworzy trasę do obsługi odpowiednich żądań pobierania.
• __WB_MANIFEST – obiekt zastępczy, który interfejs wiersza poleceń Workbox (lub wtyczki narzędzia do kompilacji) zastępuje manifestem wstępnego buforowania.

Przekaż plik service worker do interfejsu wiersza poleceń Workbox lub wybranego narzędzia do kompilacji i skonfiguruj sposób generowania pamięci podręcznej. Plik workbox-config.js, taki jak ten poniżej, poinformuje interfejs wiersza poleceń, jak ma renderować plik service worker:

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

• globDirectory – folder główny, w którym rozpoczyna się wyszukiwanie plików wstępnie zapisanych w pamięci podręcznej.
• globPatterns – wzorce plików („globy”), które mają być wstępnie buforowane.
• maximumFileSizeToCacheInBytes – górny limit rozmiaru pliku, który może być wstępnie buforowany (w bajtach).
• swSrc – lokalizacja pliku, który będzie używany do generowania instancji roboczej usługi.
• swDest – miejsce docelowe wygenerowanego procesu roboczego usługi (może być takie samo jak plik źródłowy, ale upewnij się, że w każdym przebiegu występuje self.__WB_MANIFEST).

Podczas procesu kompilacji generowana jest nowa wersja skryptu service worker, a self.__WB_MANIFEST jest zastępowany listą plików, z których każdy ma hash oznaczający jego wersję:

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

Za każdym razem, gdy uruchamiany jest proces kompilacji, ta lista jest przepisywana z aktualnym zestawem pasujących plików i ich bieżącymi skrótami wersji. Dzięki temu za każdym razem, gdy plik zostanie dodany, usunięty lub zmieniony, service worker zaktualizuje pamięć podręczną podczas następnej instalacji.

Podejście leniwe

Jeśli nie masz wszystkich filmów dostępnych w momencie tworzenia lub chcesz buforować filmy tylko wtedy, gdy są potrzebne, zastosuj podejście leniwe. Takie podejście wymaga rozdzielenia buforowania i wyświetlania, ponieważ podczas odtwarzania wideo z sieci pobierana jest tylko część treści, więc buforowanie plików podczas strumieniowania nie będzie działać.

buforowanie plików,

Pamięci podręczne można tworzyć za pomocą metody Cache.open(), a następnie dodawać do nich pliki za pomocą metod Cache.add() lub Cache.addAll(). Jeśli aplikacja otrzyma listę filmów w formacie JSON, które mają zostać zapisane w pamięci podręcznej, można je dodać do pamięci podręcznej wideo w ten sposób:

// 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);

Zaletą tego podejścia jest to, że możesz kontrolować etap buforowania niezależnie od cyklu życia skryptu service worker, nawet z innych skryptów web worker. Wadą jest to, że zarządzanie pamięcią jest po stronie dewelopera: musisz napisać własny algorytm śledzenia zmian w plikach, śledzić aktualnie buforowane pliki w przeglądarce i zarządzać aktualizacjami plików, aby mieć pewność, że aktualizowane są tylko zmienione pliki.

Uwaga: odtwarzanie powinno być zablokowane do momentu, gdy wymagany film zostanie w całości zapisany w pamięci podręcznej, ponieważ użytkownicy mogą nie mieć wystarczającej przepustowości, aby pobrać film do pamięci podręcznej i przesłać go strumieniowo.

Wyświetlanie plików wideo z pamięci podręcznej

Możesz wtedy użyć strategii buforowania w czasie działania, takiej jak najpierw pamięć podręczna, aby wyświetlać wcześniej zapisane w pamięci podręcznej pliki wideo:

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) – wczytuje wymagane powiązania z odpowiednich modułów Workbox.
• registerRoute – kieruje żądania do funkcji (strategie buforowania i wtyczki), które dostarczają odpowiedzi.
• CacheFirst – strategia buforowania, która spełnia żądanie z pamięci podręcznej, jeśli jest dostępne, w przeciwnym razie pobiera je z sieci i aktualizuje pamięć podręczną.
• CacheableResponsePlugin – służy do wskazywania, jakie nagłówki muszą być obecne, aby odpowiedź mogła być przechowywana w pamięci podręcznej. Aby uniknąć buforowania częściowych odpowiedzi dotyczących treści (206) podczas przesyłania strumieniowego filmów, uwzględniaj tylko 200 stanów w przypadku tras buforujących filmy.
• RangeRequestsPlugin – wtyczka, która umożliwia realizację żądania z nagłówkiem Range za pomocą odpowiedzi z pamięci podręcznej. Jest to konieczne, ponieważ przeglądarki zwykle używają nagłówka Range w przypadku treści multimedialnych.

Optymalizacja ładowania filmów jest ważnym zadaniem w przypadku aplikacji, które intensywnie strumieniują treści. Korzystając z interfejsu Cache Storage API przeglądarki i Workbox, możesz ułatwić sobie to trudne zadanie, oszczędzając przepustowość użytkowników, zmniejszając obciążenie serwera, przyspieszając odtwarzanie filmów i umożliwiając ich odtwarzanie nawet w trybie offline.