Gecachte audio en video weergeven

Er zijn enkele tekortkomingen in de manier waarop sommige browsers omgaan met verzoeken om media-items (dat wil zeggen de URL die is opgegeven in het src attribuut van <video> en <audio> -elementen), wat kan leiden tot onjuist weergavegedrag, tenzij u specifieke stappen onderneemt bij het configureren van Workbox.

Het probleem

De fijne kneepjes van de problemen die browsers hebben bij het weergeven van audio- en video-items worden in detail uitgelegd in deze GitHub-probleembespreking . Het volledige plaatje is ingewikkeld, maar de belangrijkste punten zijn:

• Aan Workbox moet worden verteld dat hij Range request headers moet respecteren door de workbox-range-requests module te gebruiken voor de strategie die als handler wordt gebruikt.
• <video> of <audio> -elementen moeten zich aanmelden voor de CORS-modus met het crossorigin attribuut .
• Als u media uit de cache wilt aanbieden, moet u deze vooraf expliciet aan de cache toevoegen. U kunt dit doen door precaching, of met cache.add() , of door de warmStrategyCache-methode in workbox-recipes te gebruiken. Het cachen van het media-item terwijl het tijdens runtime wordt gestreamd, zal niet werken, omdat tijdens het afspelen slechts gedeeltelijke inhoud van het netwerk wordt opgehaald.

Hier leest u hoe u aan deze vereisten in Workbox kunt voldoen, te beginnen met de juiste opmaak voor een media-item:

<!-- 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>

Gebruik vervolgens in uw servicemedewerker de plug-in workbox-range-request om de media-items dienovereenkomstig te verwerken:

// 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(),
    ],
  }),
);

Met deze aanpak kunt u ervoor zorgen dat de media-items van uw website op de juiste manier worden opgehaald en in de cache worden opgeslagen door uw servicemedewerker, terwijl u rekening houdt met bereikverzoeken en andere potentiële valkuilen die verband houden met mediaverzoeken.