Pubblicazione di audio e video memorizzati nella cache

Alcuni browser gestiscono le richieste di asset multimediali (ovvero l'URL specificato nell'attributo src degli elementi <video> e <audio>) presentando alcune difficoltà nel modo in cui alcuni browser gestiscono le richieste, il che può portare a comportamenti di pubblicazione errati, a meno che non si seguano passaggi specifici durante la configurazione di Workbox.

Il problema

Le complessità dei problemi riscontrati dai browser relativamente alla pubblicazione di risorse audio e video sono spiegate in dettaglio in questa discussione su GitHub. Il quadro completo è complicato, ma i punti chiave sono:

• Devi indicare alla casella di lavoro di rispettare le intestazioni delle richieste Range utilizzando il modulo workbox-range-requests per la strategia utilizzata come gestore.
• Gli elementi <video> o <audio> devono attivare la modalità CORS con l'attributo crossorigin.
• Se vuoi pubblicare elementi multimediali dalla cache, devi aggiungerli esplicitamente in anticipo alla cache. A questo scopo, puoi premerlo nella cache, utilizzare cache.add() o utilizzare il metodo warmStrategyCache nelle workbox-recipes. La memorizzazione nella cache dell'asset multimediale durante la riproduzione in streaming durante l'esecuzione non funziona, poiché durante la riproduzione vengono recuperati solo i contenuti parziali dalla rete.

Ecco come soddisfare questi requisiti in Workbox, a partire dal markup corretto per un asset multimediale:

<!-- In your page: -->

<!-- You need to set `crossorigin`, even for same-origin URLs! -->
<video src="movie.mp4" crossorigin="anonymous"></video>
<audio src="song.mp3" crossorigin="anonymous"></audio>

Quindi, nel service worker, utilizza il plug-in workbox-range-request per gestire gli asset multimediali di conseguenza:

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

// In your service worker:
// It's up to you to either precache, use warmRuntimeCache, or
// explicitly call cache.add() to populate the cache with media assets.
// If you choose to cache media assets up front, do so with care,
// as they can be quite large and exceed storage quotas.
//
// This route will go to the network if there isn't a cache match,
// but it won't populate the cache at runtime because the response for
// the media asset will be a partial 206 response. If there is a cache
// match, then it will properly serve partial responses.
registerRoute(
  ({request}) => {
    const {destination} = request;

    return destination === 'video' || destination === 'audio'
  },
  new CacheFirst({
    cacheName: 'your-cache-name-here',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200]
      }),
      new RangeRequestsPlugin(),
    ],
  }),
);

Con questo approccio, puoi assicurarti che gli asset multimediali del tuo sito web vengano correttamente recuperati e memorizzati nella cache dal service worker, tenendo conto delle richieste di intervallo e di altri potenziali errori relativi alle richieste di contenuti multimediali.