Terima kasih telah menonton Google I/O. Tonton konten secara on-demand.

Halaman ini diterjemahkan oleh Cloud Translation API.

PWA dengan streaming offline

Derek Herman

Jaroslav Polakovič

Dipublikasikan: 5 Juli 2021

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

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

Bagaimana cara mendownload dan menyimpan file video berukuran besar?
Lalu, bagaimana cara menayangkannya kepada pengguna?

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

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

Mendownload dan menyimpan file media besar

Aplikasi Web Progresif biasanya menggunakan Cache API yang praktis untuk mendownload dan menyimpan aset yang diperlukan untuk memberikan pengalaman offline: dokumen, stylesheet, gambar, dan lainnya.

Berikut adalah contoh dasar penggunaan Cache API dalam Pekerja Layanan:

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 membuat penggunaannya dengan file besar tidak praktis.

Misalnya, Cache API tidak:

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

Semua masalah ini merupakan 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 perlu menyimpannya. Kemungkinan ada banyak metadata yang terkait dengan file media Anda seperti: nama, deskripsi, durasi, kategori, dll.

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

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

Mendownload file media menggunakan Fetch API

Kami membuat beberapa fitur menarik seputar Fetch API di PWA demo kami, yang kami beri nama Kino—kode sumbernya bersifat publik, jadi silakan tinjau.

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

Sebelum menunjukkan cara penerapan fitur tersebut, kita akan terlebih dahulu merangkum singkat 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? Dengan begitu, Anda akan menerima potongan data dari aliran yang dapat dibaca saat data tersebut tiba dari jaringan. Pertimbangkan seberapa bergunanya hal ini: Anda dapat mulai memproses data bahkan sebelum semua data tiba dari jaringan.

Melanjutkan download

Jika download dijeda atau terganggu, potongan data yang telah tiba 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, melanjutkan download cukup 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 IndexedDB

Di atas kertas, proses penulisan nilai dataChunk ke dalam database IndexedDB sangatlah sederhana. Nilai tersebut sudah berupa instance ArrayBuffer, yang dapat disimpan langsung di IndexedDB, jadi 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 berhasil, Anda mungkin akan menemukan bahwa penulisan IndexedDB jauh lebih lambat daripada download Anda. Hal ini bukan karena penulisan IndexedDB lambat, tetapi karena kita menambahkan banyak overhead transaksional dengan membuat transaksi baru untuk setiap potongan data yang kita terima dari jaringan.

Chunk yang didownload bisa berukuran cukup kecil dan dapat dipancarkan oleh stream secara berurutan dengan cepat. Anda perlu membatasi kecepatan penulisan IndexedDB. Di PWA demo Kino, kita melakukannya dengan menerapkan buffer tulis perantara.

Saat potongan data tiba dari jaringan, kita akan menambahkannya ke buffer terlebih dahulu. Jika data yang masuk tidak sesuai, kita akan menghapus seluruh buffer ke dalam database dan menghapusnya sebelum menambahkan sisa data. Akibatnya, penulisan IndexedDB kami menjadi lebih jarang, yang menghasilkan peningkatan performa penulisan yang signifikan.

Menyajikan file media dari penyimpanan offline

Setelah mendownload file media, Anda mungkin ingin pekerja layanan menayangkannya 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 kita bahwa ada beberapa jenis objek yang dapat kita gunakan untuk membuat instance objek Response: Blob, BufferSource, ReadableStream, dan lainnya.
Kita memerlukan objek yang tidak menyimpan semua datanya dalam memori, jadi kita mungkin ingin memilih ReadableStream.

Selain itu, karena kami berurusan dengan file besar, dan kami ingin mengizinkan browser untuk hanya meminta bagian file yang saat ini mereka butuhkan, kami 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 melihat Kino demo PWA kode sumber pekerja layanan untuk mengetahui cara kami membaca data file dari IndexedDB dan membuat aliran dalam aplikasi nyata.

Pertimbangan lainnya

Setelah hambatan utama diatasi, Anda kini dapat mulai menambahkan beberapa fitur yang berguna ke aplikasi video Anda. Berikut beberapa contoh fitur yang dapat Anda temukan di PWA demo Kino:

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

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