Cara ZDF membuat PWA video dengan mode offline dan mode gelap

Pelajari cara ZDF membuat progressive web app (PWA) dengan fitur modern seperti dukungan offline, kemampuan penginstalan, dan mode gelap.

Martin Schierle

Scott Friesen

Ketika penyiar ZDF mempertimbangkan untuk mendesain ulang rangkaian teknologi frontend, mereka memutuskan untuk mempelajari Progressive Web App untuk situs streaming mereka, ZDFmediathek. Agensi pengembangan Cellular menerima tantangan untuk membangun pengalaman berbasis web yang setara dengan aplikasi iOS dan Android khusus platform ZDF. PWA menawarkan kemampuan penginstalan, pemutaran video offline, animasi transisi, dan mode gelap.

Menambahkan pekerja layanan

Fitur utama PWA adalah dukungan offline. Untuk ZDF, sebagian besar tugas sulit dilakukan oleh Workbox, sekumpulan library dan modul Node yang memudahkan dukungan untuk berbagai strategi caching yang berbeda. PWA ZDF dibuat dengan TypeScript dan React, sehingga menggunakan library Workbox yang sudah disertakan dalam create-react-app untuk melakukan pracache aset statis. Dengan demikian, aplikasi dapat berfokus untuk membuat konten dinamis tersedia secara offline, dalam hal ini video dan metadatanya.

Ide dasarnya cukup sederhana: ambil video dan simpan sebagai blob di IndexedDB. Kemudian selama pemutaran, proses peristiwa online/offline, dan beralih ke versi yang didownload saat perangkat offline.

Sayangnya, segalanya menjadi sedikit lebih rumit. Salah satu persyaratan project adalah menggunakan pemutar web ZDF resmi yang tidak menyediakan dukungan offline. Pemutar mengambil ID konten sebagai input, berkomunikasi dengan ZDF API, dan memutar video terkait.

Di sinilah salah satu fitur web paling canggih dapat membantu: pekerja layanan.

Pekerja layanan dapat menangkap berbagai permintaan yang dilakukan oleh pemutar dan merespons dengan data dari IndexedDB. Hal ini secara transparan menambahkan kemampuan offline tanpa harus mengubah satu baris kode pemain.

Karena ukuran video offline cenderung cukup besar, pertanyaan besarnya adalah berapa banyak video yang benar-benar dapat disimpan di perangkat. Dengan bantuan StorageManager API, aplikasi dapat memperkirakan ruang yang tersedia dan memberi tahu pengguna jika tidak ada ruang penyimpanan yang cukup, bahkan sebelum memulai download. Sayangnya, Safari tidak ada dalam daftar browser yang menerapkan API ini dan pada saat penulisan ini, tidak ada banyak informasi terbaru tentang cara browser lain menerapkan kuota. Oleh karena itu, tim mereka menulis utilitas kecil untuk menguji perilaku di berbagai perangkat. Saat ini, sudah ada artikel komprehensif yang merangkum semua detailnya.

Menambahkan dialog penginstalan kustom

PWA ZDF menawarkan alur penginstalan dalam aplikasi kustom dan meminta pengguna untuk menginstal aplikasi segera setelah mereka ingin mendownload video pertama mereka. Ini adalah waktu yang tepat untuk meminta penginstalan karena pengguna telah menunjukkan niat yang jelas untuk menggunakan aplikasi secara offline.

Membuat halaman offline untuk mengakses hasil download

Jika perangkat tidak terhubung ke internet dan pengguna membuka halaman yang tidak tersedia dalam mode offline, halaman khusus akan ditampilkan yang mencantumkan semua video yang sebelumnya telah didownload atau (jika belum ada konten yang didownload) penjelasan singkat tentang fitur offline.

Menggunakan kecepatan pemuatan frame untuk fitur adaptif

Untuk menawarkan pengalaman pengguna yang kaya, PWA ZDF menyertakan beberapa transisi halus yang terjadi saat pengguna men-scroll atau melakukan navigasi. Pada perangkat kelas bawah, animasi tersebut biasanya memiliki efek sebaliknya dan membuat aplikasi terasa lambat dan kurang responsif jika tidak berjalan pada kecepatan 60 frame per detik. Untuk memperhitungkan hal ini, aplikasi mengukur kecepatan frame yang sebenarnya melalui requestAnimationFrame() saat aplikasi memuat dan menonaktifkan semua animasi saat nilainya turun di bawah batas tertentu.

const frameRate = new Promise(resolve => {
  let lastTick;
  const samples = [];

  function measure() {
    const tick = Date.now();
    if (lastTick) samples.push(tick - lastTick);
    lastTick = tick;
    if (samples.length < 20) requestAnimationFrame(measure);
    else {
      const avg = samples.reduce((a, b) => a + b) / samples.length;
      const fps = 1000 / avg;
      resolve(fps);
    }
  }
  measure();
});

Meskipun pengukuran ini hanya memberikan indikasi kasar tentang performa perangkat dan bervariasi pada setiap pemuatan, pengukuran ini masih merupakan dasar yang baik untuk pengambilan keputusan. Perlu diperhatikan bahwa bergantung pada kasus penggunaan, ada teknik lain untuk pemuatan adaptif yang dapat diterapkan oleh developer. Salah satu keuntungan besar dari pendekatan ini adalah tersedia di semua platform.

Mode gelap

Fitur yang populer untuk pengalaman seluler modern adalah mode gelap. Terutama saat menonton video dalam cahaya sekitar rendah, banyak orang lebih memilih UI yang redup. PWA ZDF tidak hanya menyediakan tombol yang memungkinkan pengguna beralih antara tema terang dan gelap, tetapi juga bereaksi terhadap perubahan preferensi warna di seluruh OS. Dengan cara ini aplikasi akan otomatis mengubah tampilannya di perangkat yang telah menyiapkan jadwal untuk mengubah dasar tema pada waktu tertentu.

Hasil

Aplikasi web progresif yang baru diluncurkan secara diam-diam sebagai beta publik pada Maret 2020 dan telah menerima banyak masukan positif sejak saat itu. Sementara fase beta berlangsung, PWA masih berjalan di domain sementaranya sendiri. Meskipun PWA tidak dipromosikan secara publik, ada jumlah pengguna yang terus meningkat. Sebagian besar aplikasi tersebut berasal dari Microsoft Store yang memungkinkan pengguna Windows 10 menemukan PWA dan menginstalnya seperti aplikasi khusus platform.

Apa langkah selanjutnya?

ZDF berencana untuk terus menambahkan fitur ke PWA mereka, termasuk login untuk personalisasi, penayangan lintas perangkat dan platform, serta notifikasi push.