Video, yönetilmesi zor bir öğedir. Yayın yapmak çok fazla bant genişliği gerektirir ve önbelleğe alma işlemi kolay değildir. Bu sorunlar, videoların kiosk ekranı gibi yerlerde döngü halinde oynatılmasıyla daha da kötüleşir. Örneğin, bir şirketin her gün, gün boyunca 30 videoyu tekrarlı olarak oynatan yüzlerce cihazı varsa bu durum ağın hızlıca aşırı yüklenmesine neden olabilir. Videoları yayınlamak yerine önbellekten sunarak indirme maliyetini yalnızca bir kez ödersiniz, sonraki oynatmaları hızlandırır ve videoları çevrimdışı oynatılabilir hale getirirsiniz. Bunu yapmak için tarayıcının depolama özelliklerinden yararlanabilirsiniz. Cache Storage API ve IndexedDB, video dosyalarını depolamak için en uygun olanlardır. Her ikisi de iyi seçenekler olsa da popüler service worker kitaplığı Workbox ile entegrasyonu nedeniyle Cache Storage API'ye odaklanacağız.
Bir hizmet çalışanından video önbelleğe alma
Videolar gibi büyük öğelerin indirilmesi ve önbelleğe alınması özellikle zaman ve işlemci açısından yoğun bir görev olabileceğinden bu işlemi ana iş parçacığının dışında arka planda yapmanız gerekir. Service worker'lar, özellikle önbelleğe alma görevlerini boşaltmak için yararlıdır. Sayfa ile ağ arasında proxy görevi görürler. Bu sayede istekleri yakalayabilir ve ağ yanıtına ek mantık (ör. önbelleğe alma stratejisi) uygulayabilirler.
Birçok farklı önbelleğe alma stratejisi vardır ve bunların her biri farklı kullanım alanlarında yardımcı olmak için tasarlanmıştır. Örneğin, varsa dosyayı önbellekten sunmak, yoksa ağa geri dönmek için aşağıdaki kodu yazabilirsiniz.
self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request).then(function (response) { return response || fetch(event.request); }), ); });
Farklı önbelleğe alma stratejileri gerektiren farklı öğe türleri veya URL'ler için bunu yönetmek tekrarlayan ve hataya açık bir süreç olabilir. Workbox, yönlendirme yardımcıları ve önbelleğe alma stratejileri gibi bir dizi araç sunarak hizmet çalışanı kodunu daha bildirimsel ve yeniden kullanılabilir bir şekilde yazmanıza olanak tanır.
Önceki stratejiye önce önbellek adı verilir. Workbox'ı kullanarak aynı şeyi yazmak için aşağıdakileri eklemeniz gerekir:
registerRoute( ({ request }) => request.destination === 'video', new CacheFirst() );
Workbox, diğer önbelleğe alma stratejileri ve Webpack ile Rollup gibi derleme araçlarıyla entegrasyon da dahil olmak üzere yaygın hizmet çalışanı görevleri için benzer tarifler sunar.
Workbox'ı kurduktan sonra videolarınızı ne zaman önbelleğe alacağınızı seçmeniz gerekir. Bu durumda iki yaklaşım vardır: Sayfa yüklenirken istekli bir şekilde veya video istendiğinde geç bir şekilde.
Eager yaklaşımı
Önceden önbelleğe alma, dosyaların hizmet çalışanı yüklemesi sırasında önbelleğe kaydedildiği ve hizmet çalışanı çalışır çalışmaz kullanılabilir hale geldiği bir tekniktir. Workbox, derleme süreciniz sırasında erişebildiği dosyalar için önceden önbelleğe almayı otomatik olarak ayarlayabilir.
Aşağıdaki Workbox kodu, dosyaları önbelleğe almak için service worker'ınızda kullanılabilir:
import { addPlugins, precacheAndRoute } from 'workbox-precaching'; import { RangeRequestsPlugin } from 'workbox-range-requests'; addPlugins([new RangeRequestsPlugin()]); precacheAndRoute(self.__WB_MANIFEST);
import(s) - İlgili Workbox modüllerinden gerekli bağlamaları yükleyin. Service worker'lar henüz ESModules'ü evrensel olarak desteklemediğinden, Workbox destekli service worker'ınızın üretimde çalışması için bir paketleyici aracılığıyla iletilmesi gerekir.RangeRequestsPlugin-Rangeüstbilgisine sahip bir isteğin, önbelleğe alınmış bir yanıtla karşılanmasını sağlar. Tarayıcılar genellikle medya içeriği içinRangeüstbilgisini kullandığından bu gereklidir.addPlugins- Her Workbox isteğine Workbox eklentileri eklemenize olanak tanır.precacheAndRoute: Önceden önbelleğe alma listesine girişler ekler ve ilgili getirme isteklerini işlemek için bir rota oluşturur.__WB_MANIFEST: Workbox CLI'nın (veya derleme aracı eklentilerinin) önbelleğe alma öncesi manifest ile değiştirdiği bir yer tutucu.
Service worker'ınızı Workbox CLI'ye veya tercih ettiğiniz derleme aracına iletin ve önbelleğinizin nasıl oluşturulacağını yapılandırın. Aşağıdaki gibi bir workbox-config.js dosyası, CLI'ye service worker'ınızın nasıl oluşturulacağını bildirir:
module.exports = { globDirectory: '.', globPatterns: ['**/*.{html,mp4}'], maximumFileSizeToCacheInBytes: 5000000, swSrc: 'sw.js', swDest: 'sw.js', };
globDirectory- Önceden önbelleğe alınmış dosyaların aranmaya başlanacağı kök klasörglobPatterns: Önceden önbelleğe alınması gereken dosya kalıpları ("glob").maximumFileSizeToCacheInBytes: Bir dosyanın önceden önbelleğe alınabilmesi için bayt cinsinden maksimum boyutu.swSrc- Hizmet çalışanınızı oluşturmak için kullanılacak dosyanın konumu.swDest- Oluşturulan hizmet çalışanı için hedef (kaynak dosyayla aynı olabilir ancak her çalıştırma içinself.__WB_MANIFESTöğesinin mevcut olduğundan emin olun).
Derleme işlemi çalıştırıldığında, hizmet çalışanının yeni bir sürümü oluşturulur ve self.__WB_MANIFEST, her biri revizyonunu belirtmek için karma değerine sahip olan bir dosya listesiyle değiştirilir:
precacheAndRoute([ { revision: '524ac4b453c83f76eb9caeec11854ca5', url: 'ny.mp4', }, ]);
Derleme işlemi her çalıştığında bu liste, eşleşen dosyaların mevcut grubu ve bunların mevcut düzeltme karmalarıyla yeniden yazılır. Bu sayede, bir dosya eklendiğinde, kaldırıldığında veya değiştirildiğinde hizmet çalışanı, bir sonraki yüklemede önbelleği günceller.
Tembel yaklaşım
Oluşturma sırasında tüm videolar mevcut olmadığında veya yalnızca gerektiğinde videoları önbelleğe almak istediğinizde geç yükleme yaklaşımını kullanmanız gerekir. Bu yaklaşımda, önbelleğe alma ve yayınlama işlemlerinin ayrılması gerekir. Video oynatma sırasında ağdan yalnızca kısmi içerik getirildiğinden, dosyaların yayınlanırken önbelleğe alınması işe yaramaz.
Dosyaları önbelleğe alma
Önbellekler Cache.open() kullanılarak oluşturulabilir. Ardından, dosyalar Cache.add() veya Cache.addAll() kullanılarak önbelleğe eklenebilir. Uygulamanız önbelleğe alınacak videoların JSON listesini alırsa bu videolar aşağıdaki şekilde video önbelleğine eklenebilir:
// 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);
Bu yaklaşımın avantajı, hizmet çalışanı yaşam döngüsünden bağımsız olarak, hatta diğer web çalışanlarından bile önbelleğe alma adımını kontrol edebilmenizdir. Dezavantajı ise depolama yönetimi kısmının geliştiriciye ait olmasıdır: Dosya değişikliklerini izlemek, tarayıcıda şu anda önbelleğe alınmış dosyaları izlemek ve yalnızca değiştirilen dosyaların güncellenmesini sağlamak için dosya güncellemelerini yönetmek üzere kendi algoritmanızı yazmanız gerekir.
Önbelleğe alınmış video dosyalarını yayınlama
Daha önce önbelleğe alınan video dosyalarını sunmak için önce önbellek gibi bir hizmet çalışanı çalışma zamanı önbelleğe alma stratejisi kullanılabilir:
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) - İlgili Workbox modüllerinden gerekli bağlamaları yükler.registerRoute- Yanıt sağlayan işlevlere (önbelleğe alma stratejileri ve eklentiler) istekleri yönlendirir.CacheFirst- Varsa isteği önbellekten karşılayan, yoksa ağdan getirip önbelleği güncelleyen önbelleğe alma stratejisi.CacheableResponsePlugin- Yanıtın önbelleğe alınabilmesi için hangi üstbilgilerin bulunması gerektiğini belirtmek için kullanılır. Video önbelleğe alma rotaları için yalnızca 200 durum kodu eklediğinizden emin olun. Böylece, videolar yayınlanırken kısmi içerik yanıtlarının (206) önbelleğe alınmasını önleyebilirsiniz.RangeRequestsPlugin-Rangebaşlığı içeren bir isteğin önbelleğe alınmış bir yanıtla karşılanmasını sağlayan eklenti. Tarayıcılar genellikle medya içeriği içinRangeüstbilgisini kullandığından bu gereklidir.
Video yüklemeyi optimize etmek, yoğun akış yapan uygulamalar için önemli bir görevdir. Tarayıcının Cache Storage API'sini ve Workbox'ı kullanarak bu zorlu görevi yönetilebilir hale getirebilir, kullanıcılarınızın bant genişliğinden tasarruf edebilir, sunucu yükünü azaltabilir, daha hızlı video oynatma sağlayabilir ve videolarınızın çevrimdışı olduğunuzda bile çalışmasına olanak tanıyabilirsiniz.