Önbelleğe alınan ses ve video yayınlanıyor

Bazı tarayıcıların medya öğesi isteklerini işleme biçiminde (<video> ve <audio> öğelerinin src özelliğinde belirtilen URL) bazı sorunlar vardır. Bu durum, Workbox'ı yapılandırırken belirli adımları uygulamadığınız sürece yanlış yayınlama davranışına yol açabilir.

Sorun

Tarayıcıların ses ve video öğeleri sunmayla ilgili sorunları, bu GitHub sorunu tartışmasında ayrıntılı olarak açıklanmıştır. Resmin tamamı karmaşık olsa da temel noktalar şunlardır:

• Çalışma kutusu, workbox-range-requests modülünü kullanarak işleyici olarak kullanılan stratejiye Range istek başlıklarına uyum sağlaması gerektiği belirtilmelidir.
• <video> veya <audio> öğelerinde crossorigin özelliğiyle CORS modu etkinleştirilmelidir.
• Önbellekten medya sunmak isterseniz bunu önceden önbelleğe açıkça eklemeniz gerekir. Bunu, önbelleğe alma yoluyla, cache.add() ile veya çalışma kutusu tariflerinde hotStrategyCache yöntemini kullanarak yapabilirsiniz. Oynatma sırasında ağdan yalnızca kısmi içerik getirildiğinden, çalışma zamanında akış halindeyken medya öğesini önbelleğe almak işe yaramaz.

Bir medya öğesi için uygun işaretlemeden başlayarak bu gereksinimleri Workbox'ta nasıl yerine getirebileceğiniz aşağıda açıklanmıştır:

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

Ardından, hizmet çalışanınızda medya öğelerini uygun şekilde işlemek için workbox-range-request eklentisini kullanın:

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

Bu yaklaşımla, aralık isteklerini ve medya istekleriyle ilgili diğer olası tehlikeleri dikkate alırken web sitenizin medya öğelerinin hizmet çalışanınız tarafından düzgün bir şekilde getirilmesini ve önbelleğe alınmasını sağlayabilirsiniz.