Halaman ini diterjemahkan oleh Cloud Translation API.

PWA dengan streaming offline

Derek Herman

Jaroslav Polakovič

Progressive Web App menghadirkan banyak fitur yang sebelumnya disediakan untuk aplikasi native ke web. Salah satu fitur terpenting yang terkait dengan PWA adalah pengalaman offline.

Pengalaman yang lebih baik lagi adalah pengalaman media streaming offline, yang merupakan peningkatan yang dapat Anda tawarkan kepada pengguna dengan beberapa cara yang berbeda. Namun, hal ini menciptakan masalah yang benar-benar unik—file media bisa menjadi sangat besar. Jadi Anda mungkin bertanya:

Bagaimana cara mendownload dan menyimpan file video besar?
Dan bagaimana cara menyajikannya kepada pengguna?

Dalam artikel ini, kami akan membahas jawaban atas pertanyaan tersebut, sambil merujuk PWA demo Kino yang kami buat untuk memberikan contoh praktis tentang cara menerapkan pengalaman media streaming offline tanpa menggunakan framework fungsional atau presentasi apa pun. Contoh berikut terutama untuk tujuan pendidikan, karena pada umumnya, Anda mungkin harus menggunakan salah satu Framework Media yang ada untuk menyediakan fitur-fitur ini.

Kecuali Anda memiliki kasus bisnis yang bagus untuk mengembangkan aplikasi Anda sendiri, membuat PWA dengan streaming offline memiliki tantangannya. Dalam artikel ini, Anda akan mempelajari API dan teknik yang digunakan untuk memberikan pengalaman media offline berkualitas tinggi kepada pengguna.

Mengunduh dan menyimpan file media berukuran besar

Progressive Web App biasanya menggunakan Cache API yang mudah digunakan untuk mendownload dan menyimpan aset yang diperlukan untuk memberikan pengalaman offline: dokumen, spreadsheet gaya, gambar, dan lainnya.

Berikut adalah contoh dasar penggunaan Cache API dalam Service Worker:

const cacheStorageName = 'v1';

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheStorageName).then(function(cache) {
      return cache.addAll([
        'index.html',
        'style.css',
        'scripts.js',

        // Don't do this.
        'very-large-video.mp4',
      ]);
    })
  );
});

Meskipun contoh di atas secara teknis berfungsi, penggunaan Cache API memiliki beberapa batasan yang tidak praktis untuk digunakan dengan file besar.

Misalnya, Cache API tidak:

Memungkinkan Anda menjeda dan melanjutkan download dengan mudah
Memungkinkan Anda memantau progres download
Menawarkan cara untuk merespons permintaan rentang HTTP dengan benar

Semua masalah ini adalah batasan yang cukup serius untuk aplikasi video apa pun. Mari kita tinjau beberapa opsi lain yang mungkin lebih sesuai.

Saat ini, Fetch API adalah cara lintas browser untuk mengakses file jarak jauh secara asinkron. Dalam kasus penggunaan ini, Anda dapat mengakses file video besar sebagai streaming dan menyimpannya secara bertahap sebagai potongan menggunakan permintaan rentang HTTP.

Setelah dapat membaca potongan data dengan Fetch API, Anda juga harus menyimpannya. Kemungkinan ada banyak metadata yang terkait dengan file media Anda seperti: nama, deskripsi, panjang runtime, kategori, dll.

Anda tidak hanya menyimpan satu file media, Anda menyimpan objek terstruktur, dan file media hanyalah salah satu propertinya.

Dalam hal ini tensorflow API menyediakan solusi yang sangat baik untuk menyimpan data media maupun metadata. Dapat menyimpan data biner dalam jumlah besar dengan mudah, dan juga menawarkan indeks yang memungkinkan Anda melakukan pencarian data dengan sangat cepat.

Mendownload file media menggunakan Fetch API

Kami membuat beberapa fitur menarik seputar Fetch API dalam PWA demo kami, yang kami beri nama Kino. Kode sumber ini bersifat publik. Jadi, jangan ragu untuk meninjaunya.

Kemampuan untuk menjeda dan melanjutkan download yang belum selesai.
Buffer kustom untuk menyimpan potongan data dalam database.

Sebelum menunjukkan cara fitur tersebut diterapkan, pertama-tama kami akan melakukan ringkasan singkat tentang cara menggunakan Fetch API untuk mendownload file.

/**
 * Downloads a single file.
 *
 * @param {string} url URL of the file to be downloaded.
 */
async function downloadFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  do {
    const { done, dataChunk } = await reader.read();
    // Store the `dataChunk` to IndexedDB.
  } while (!done);
}

Perhatikan bahwa await reader.read() berada dalam loop? Begitulah cara Anda akan menerima potongan data dari aliran yang dapat dibaca saat tiba dari jaringan. Pertimbangkan seberapa berguna hal ini: Anda dapat mulai memproses data bahkan sebelum semuanya tiba dari jaringan.

Melanjutkan download

Saat download dijeda atau terganggu, potongan data yang telah masuk akan disimpan dengan aman di database IndexedDB. Kemudian, Anda dapat menampilkan tombol untuk melanjutkan download di aplikasi Anda. Karena server PWA demo Kino mendukung permintaan rentang HTTP, Anda dapat melanjutkan download dengan mudah:

async downloadFile() {
  // this.currentFileMeta contains data from IndexedDB.
  const { bytesDownloaded, url, downloadUrl } = this.currentFileMeta;
  const fetchOpts = {};

  // If we already have some data downloaded,
  // request everything from that position on.
  if (bytesDownloaded) {
    fetchOpts.headers = {
      Range: `bytes=${bytesDownloaded}-`,
    };
  }

  const response = await fetch(downloadUrl, fetchOpts);
  const reader = response.body.getReader();

  let dataChunk;
  do {
    dataChunk = await reader.read();
    if (!dataChunk.done) this.buffer.add(dataChunk.value);
  } while (!dataChunk.done && !this.paused);
}

Buffer tulis kustom untuk chromeos

Di atas kertas, proses penulisan nilai dataChunk ke dalam database IndexedDB adalah proses yang sederhana. Nilai tersebut sudah merupakan instance ArrayBuffer, yang dapat disimpan di IndexedDB secara langsung, sehingga kita cukup membuat objek dengan bentuk yang sesuai dan menyimpannya.

const dataItem = {
  url: fileUrl,
  rangeStart: dataStartByte,
  rangeEnd: dataEndByte,
  data: dataChunk,
}

// Name of the store that will hold your data.
const storeName = 'fileChunksStorage'

// `db` is an instance of `IDBDatabase`.
const transaction = db.transaction([storeName], 'readwrite');
const store = transaction.objectStore(storeName);
const putRequest = store.put(data);

putRequest.onsuccess = () => { ... }

Meskipun pendekatan ini berfungsi, Anda mungkin akan mendapati bahwa penulisan Repository Anda jauh lebih lambat daripada download Anda. Hal ini tidak terjadi karena penulisan di IndexedDB lambat, hal ini karena kita menambahkan banyak overhead transaksional dengan membuat transaksi baru untuk setiap potongan data yang kita terima dari jaringan.

Potongan yang didownload dapat berukuran agak kecil dan dapat dipancarkan oleh aliran data dalam urutan yang cepat. Anda perlu membatasi tingkat penulisan IndexedDB. Dalam PWA demo Kino, kami melakukannya dengan menerapkan buffer penulisan perantara.

Saat potongan data tiba dari jaringan, kita menambahkannya ke {i>buffer<i} terlebih dahulu. Jika data yang masuk tidak cocok, kami akan menghapus buffer penuh ke dalam database dan menghapusnya sebelum menambahkan data lainnya. Akibatnya, penulisan IndexedDB kami lebih jarang, yang mengarah pada peningkatan performa tulis yang signifikan.

Menyajikan file media dari penyimpanan offline

Setelah file media didownload, Anda mungkin ingin pekerja layanan menyajikannya dari IndexedDB, bukan mengambil file dari jaringan.

/**
 * The main service worker fetch handler.
 *
 * @param {FetchEvent} event Fetch event.
 */
const fetchHandler = async (event) => {
  const getResponse = async () => {
    // Omitted Cache API code used to serve static assets.

    const videoResponse = await getVideoResponse(event);
    if (videoResponse) return videoResponse;

    // Fallback to network.
    return fetch(event.request);
  };
  event.respondWith(getResponse());
};
self.addEventListener('fetch', fetchHandler);

Jadi, apa yang perlu Anda lakukan di getVideoResponse()?

Metode event.respondWith() mengharapkan objek Response sebagai parameter.
Konstruktor Response() memberi tahu bahwa ada beberapa jenis objek yang dapat digunakan untuk membuat instance objek Response: Blob, BufferSource, ReadableStream, dan lainnya.
Kita memerlukan objek yang tidak menyimpan semua datanya di memori. Jadi, sebaiknya pilih ReadableStream.

Selain itu, karena kita berurusan dengan file besar dan ingin mengizinkan browser untuk hanya meminta bagian file yang saat ini dibutuhkan, kita perlu menerapkan beberapa dukungan dasar untuk permintaan rentang HTTP.

/**
 * Respond to a request to fetch offline video file and construct a response
 * stream.
 *
 * Includes support for `Range` requests.
 *
 * @param {Request} request  Request object.
 * @param {Object}  fileMeta File meta object.
 *
 * @returns {Response} Response object.
 */
const getVideoResponse = (request, fileMeta) => {
  const rangeRequest = request.headers.get('range') || '';
  const byteRanges = rangeRequest.match(/bytes=(?<from>[0-9]+)?-(?<to>[0-9]+)?/);

  // Using the optional chaining here to access properties of
  // possibly nullish objects.
  const rangeFrom = Number(byteRanges?.groups?.from || 0);
  const rangeTo = Number(byteRanges?.groups?.to || fileMeta.bytesTotal - 1);

  // Omitting implementation for brevity.
  const streamSource = {
     pull(controller) {
       // Read file data here and call `controller.enqueue`
       // with every retrieved chunk, then `controller.close`
       // once all data is read.
     }
  }
  const stream = new ReadableStream(streamSource);

  // Make sure to set proper headers when supporting range requests.
  const responseOpts = {
    status: rangeRequest ? 206 : 200,
    statusText: rangeRequest ? 'Partial Content' : 'OK',
    headers: {
      'Accept-Ranges': 'bytes',
      'Content-Length': rangeTo - rangeFrom + 1,
    },
  };
  if (rangeRequest) {
    responseOpts.headers['Content-Range'] = `bytes ${rangeFrom}-${rangeTo}/${fileMeta.bytesTotal}`;
  }
  const response = new Response(stream, responseOpts);
  return response;

Jangan ragu untuk memeriksa kode sumber pekerja layanan PWA Kino untuk mengetahui cara kami membaca data file dari IndexedDB dan membuat aliran data dalam aplikasi nyata.

Pertimbangan lainnya

Setelah menemukan kendala utama, kini Anda dapat mulai menambahkan beberapa fitur yang bagus untuk dimiliki ke aplikasi video. Berikut adalah beberapa contoh fitur yang akan Anda temukan di PWA demo Kino:

Integrasi Media Session API yang memungkinkan pengguna Anda mengontrol pemutaran media menggunakan tombol media hardware khusus atau dari pop-up notifikasi media.
Menyimpan cache aset lain yang terkait dengan file media seperti subtitel, dan gambar poster menggunakan Cache API lama yang baik.
Dukungan untuk download streaming video (DASH, HLS) dalam aplikasi. Karena manifes streaming umumnya mendeklarasikan beberapa sumber kecepatan bit yang berbeda, Anda perlu mengubah file manifes dan hanya mendownload satu versi media sebelum menyimpannya untuk ditampilkan secara offline.

Selanjutnya, Anda akan mempelajari Pemutaran cepat dengan pramuat audio dan video.