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

Bazı tarayıcıların medya öğeleri (<video> ve <audio> öğelerinin src özelliğinde belirtilen URL) isteklerini işleme biçiminde bazı sorunlar vardır. Bu da, Çalışma Kutusu'nu yapılandırırken belirli adımlar uygulamadığınız sürece hatalı sunum davranışına neden olabilir.

Sorun

Tarayıcıların ses ve video öğelerini yayınlama konusunda yaşadığı sorunun incelikleri, bu GitHub sorunu tartışmasında ayrıntılı olarak açıklanmıştır. Resmin tamamı karmaşık olsa da kilit noktalar şunlardır:

• İş kutusuna, işleyici olarak kullanılan stratejide workbox-range-requests modülü kullanılarak Range istek başlıklarına uyulması gerektiği söylenmelidir.
• <video> veya <audio> öğelerinin CORS moduna crossorigin özelliğiyle kaydolması gerekir.
• Önbellekten medya yayınlamak istiyorsanız bunu önceden açıkça önbelleğe eklemeniz gerekir. Bunu ön belleğe alarak, cache.add() ile ya da çalışma kutusu tariflerinde hotStratejiCache yöntemini kullanarak yapabilirsiniz. Oynatma sırasında ağdan yalnızca kısmi içerik alındığından, medya öğesini çalışma zamanında yayınlandığı sırada önbelleğe almak işe yaramaz.

Bir medya öğesi için uygun işaretlemeden başlayarak Workbox'ta bu gereksinimleri nasıl karşılayacağınız 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şım sayesinde web sitenizin medya öğelerinin, hizmet çalışanınız tarafından düzgün bir şekilde getirilmesini ve önbelleğe alınmasını sağlayabilir, aralık isteklerini ve medya istekleriyle ilgili diğer olası tehlikeleri de hesaba katabilirsiniz.