Mengelola penyimpanan video di web

Video adalah aset yang sulit dikelola; streaming memerlukan banyak bandwidth dan penyiapan cache tidaklah mudah. Masalah ini diperparah saat video diputar berulang, seperti pada tampilan kios. Misalnya, jika sebuah perusahaan memiliki ratusan perangkat yang memutar 30 video berulang-ulang sepanjang hari, setiap hari, hal ini dapat dengan cepat membebani jaringannya. Dengan menayangkan video dari cache, bukan melakukan streaming, Anda hanya dikenai biaya download satu kali, membuat pemutaran berikutnya lebih cepat, dan membuat video tersedia untuk diputar secara offline. Untuk melakukannya, Anda dapat memanfaatkan kemampuan penyimpanan browser, yang Cache Storage API dan IndexedDB adalah yang paling cocok untuk menyimpan file video. Meskipun keduanya merupakan opsi yang baik, kita akan berfokus pada Cache Storage API karena integrasinya dengan library service worker populer Workbox.

Meng-cache video dari pekerja layanan

Karena mendownload dan menyimpan aset besar seperti video dalam cache dapat menjadi tugas yang sangat intensif waktu dan pemrosesannya, Anda harus melakukannya di latar belakang di luar thread utama. Service worker sangat berguna untuk memindahkan tugas caching. Service worker bertindak sebagai proxy antara halaman dan jaringan, sehingga memungkinkan halaman mencegat permintaan dan menerapkan logika tambahan ke respons jaringan, misalnya, strategi caching.

Ada banyak strategi caching yang berbeda dan masing-masing dirancang untuk membantu dalam kasus penggunaan yang berbeda. Misalnya, untuk menyajikan file dari cache jika tersedia, atau melakukan penggantian ke jaringan jika tidak, Anda dapat menulis kode berikut.

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    }),
  );
});

Mengelola hal ini untuk berbagai jenis aset atau URL yang memerlukan strategi caching yang berbeda dapat menjadi proses yang berulang dan rentan terhadap error. Workbox menyediakan serangkaian alat, termasuk pembantu perutean dan strategi penyiapan cache, yang memungkinkan Anda menulis kode pekerja layanan dengan cara yang lebih deklaratif dan dapat digunakan kembali.

Strategi sebelumnya disebut cache first. Untuk menulis hal yang sama menggunakan Workbox, Anda akan menyertakan hal berikut:

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst()
);

Workbox menyediakan resep serupa untuk strategi caching lainnya dan tugas pekerja layanan umum, termasuk integrasi dengan alat build seperti Webpack dan Rollup.

Setelah Workbox disiapkan, Anda harus memilih kapan Anda akan menyimpan video dalam cache. Di sini, ada dua pendekatan: segera saat halaman dimuat, atau lambat saat video diminta.

Pendekatan yang antusias

Pra-penyimpanan dalam cache adalah teknik yang menyimpan file ke cache selama penginstalan pekerja layanan, sehingga file tersebut tersedia segera setelah pekerja layanan diaktifkan. Workbox dapat otomatis menyiapkan pra-penyimpanan dalam cache untuk file yang dapat diaksesnya selama proses build Anda.

Kode Workbox berikut dapat digunakan di service worker Anda untuk melakukan pra-cache file:

import { addPlugins, precacheAndRoute } from 'workbox-precaching';
import { RangeRequestsPlugin } from 'workbox-range-requests';

addPlugins([new RangeRequestsPlugin()]);
precacheAndRoute(self.__WB_MANIFEST);

• import(s) - Muat binding yang diperlukan dari modul Workbox yang sesuai. Karena service worker belum mendukung ESModule secara universal, service worker yang didukung Workbox harus diteruskan melalui bundler agar dapat berfungsi dalam produksi.
• RangeRequestsPlugin - Memungkinkan permintaan dengan header Range dipenuhi oleh respons yang di-cache. Hal ini diperlukan karena browser biasanya menggunakan header Range untuk konten media.
• addPlugins - Memungkinkan Anda menambahkan plugin Workbox ke setiap permintaan Workbox.
• precacheAndRoute - Menambahkan entri ke daftar pra-cache dan membuat rute untuk menangani permintaan pengambilan yang sesuai.
• __WB_MANIFEST - Placeholder yang diganti oleh Workbox CLI (atau plugin alat build) dengan manifes pra-cache.

Teruskan pekerja layanan Anda ke Workbox CLI atau alat build pilihan Anda dan konfigurasikan cara precache Anda harus dibuat; file workbox-config.js, seperti berikut,akan memberi tahu CLI cara merender pekerja layanan Anda:

module.exports = {
  globDirectory: '.',
  globPatterns: ['**/*.{html,mp4}'],
  maximumFileSizeToCacheInBytes: 5000000,
  swSrc: 'sw.js',
  swDest: 'sw.js',
};

• globDirectory - Folder root untuk mulai menelusuri file pra-cache
• globPatterns - Pola file (“glob”) yang harus di-precache.
• maximumFileSizeToCacheInBytes - Batas atas untuk ukuran file yang dapat di-pra-cache, dalam byte.
• swSrc - Lokasi file yang akan digunakan untuk membuat pekerja layanan Anda.
• swDest - Tujuan untuk pekerja layanan yang dihasilkan (dapat sama dengan file sumber, tetapi pastikan self.__WB_MANIFEST ada untuk setiap proses).

Saat proses build berjalan, versi baru pekerja layanan akan dibuat, dan self.__WB_MANIFEST diganti dengan daftar file, yang masing-masing memiliki hash untuk menunjukkan revisinya:

precacheAndRoute([
  {
    revision: '524ac4b453c83f76eb9caeec11854ca5',
    url: 'ny.mp4',
  },
]);

Setiap kali proses build berjalan, daftar ini akan ditulis ulang dengan kumpulan file yang cocok saat ini dan hash revisinya saat ini. Hal ini memastikan bahwa setiap kali file ditambahkan, dihapus, atau diubah, pekerja layanan akan mengupdate cache pada penginstalan berikutnya.

Pendekatan lambat

Jika Anda tidak memiliki semua video yang tersedia pada waktu build, atau hanya ingin menyimpan video dalam cache saat diperlukan, Anda harus menggunakan pendekatan lambat. Pendekatan ini mengharuskan caching dan penayangan dipisahkan; karena hanya sebagian konten yang diambil dari jaringan selama pemutaran video, file yang di-cache saat streaming tidak akan berfungsi.

Meng-cache file

Cache dapat dibuat menggunakan Cache.open(), lalu file dapat ditambahkan ke cache menggunakan Cache.add() atau Cache.addAll(). Jika aplikasi Anda menerima daftar video JSON untuk di-cache, video tersebut dapat ditambahkan ke cache video sebagai berikut:

// 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);

Keuntungan dari pendekatan ini adalah Anda dapat mengontrol langkah penyiapan cache secara terpisah dari siklus proses pekerja layanan, bahkan dari pekerja web lainnya. Kekurangannya adalah bagian pengelolaan penyimpanan diserahkan kepada developer: Anda perlu menulis algoritma sendiri untuk melacak perubahan file, melacak file yang saat ini di-cache di browser, dan mengelola update file untuk memastikan hanya file yang berubah yang diupdate.

Catatan: Anda harus melarang pemutaran hingga video yang diperlukan telah di-cache sepenuhnya karena pengguna Anda mungkin tidak memiliki bandwidth yang cukup untuk mendownload video ke cache dan melakukan streaming ke pengguna Anda.

Menayangkan file video yang di-cache

Strategi penyimpanan cache runtime pekerja layanan, seperti cache first, kemudian dapat digunakan untuk menayangkan file video yang sebelumnya di-cache:

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) - Memuat binding yang diperlukan dari modul workbox yang sesuai.
• registerRoute - Merutekan permintaan ke fungsi (strategi dan plugin caching) yang memberikan respons.
• CacheFirst - Strategi penyimpanan ke cache yang memenuhi permintaan dari cache, jika tersedia, atau mengambilnya dari jaringan dan memperbarui cache.
• CacheableResponsePlugin - Digunakan untuk menunjukkan header apa yang harus ada agar respons dapat di-cache. Pastikan untuk hanya menyertakan 200 status untuk merutekan video caching guna menghindari respons konten parsial (206) yang di-cache saat video di-streaming.
• RangeRequestsPlugin - Plugin yang memungkinkan permintaan dengan header Range dipenuhi oleh respons yang di-cache. Hal ini diperlukan karena browser biasanya menggunakan header Range untuk konten media.

Mengoptimalkan pemuatan video adalah tugas penting untuk aplikasi yang melakukan streaming intensif. Dengan memanfaatkan Cache Storage API dan Workbox browser, Anda dapat membuat tugas yang sulit ini menjadi mudah dikelola, menghemat bandwidth pengguna, mengurangi beban server, mencapai pemutaran video yang lebih cepat, dan memungkinkan video Anda diputar bahkan saat offline.