Cara ZDF membuat PWA video dengan mode offline dan mode gelap

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

Martin Schierle

Scott Friesen

Saat penyiar ZDF sedang mempertimbangkan untuk mendesain ulang teknologi frontend mereka mereka memutuskan untuk mempelajari Progressive Web App dengan lebih dekat situs streaming ZDFmediathek. Agensi pengembangan Cellular menerima tantangan untuk membangun aplikasi yang setara dengan aplikasi iOS dan Android khusus platform ZDF. Tujuan 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 pekerjaan berat dilakukan oleh Workbox, sekumpulan library dan modul Node yang memudahkan dukungan untuk berbagai strategi caching. Tujuan PWA ZDF dibuat dengan TypeScript dan React, sehingga menggunakan library Workbox sudah disertakan dalam create-react-app untuk melakukan precache aset statis. Hal ini memungkinkan aplikasi fokus untuk membuat konten tersedia secara offline, dalam hal ini video dan metadatanya.

Ide dasarnya cukup sederhana: ambil video dan simpan sebagai blob di tensorflow. Selama pemutaran, dengarkan peristiwa online/offline, dan beralih ke versi yang diunduh saat perangkat offline.

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

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

Pekerja layanan dapat mencegat berbagai permintaan yang dilakukan oleh pemain dan merespons dengan menggunakan data dari IndexedDB. Ini secara transparan menambahkan offline kemampuan tanpa harus mengubah satu baris pun dari kode pemain.

Karena video offline cenderung berukuran cukup besar, pertanyaan besar adalah berapa banyak sebenarnya dapat disimpan di suatu perangkat. Dengan bantuan StorageManager API aplikasi yang dapat memperkirakan ruang yang tersedia dan memberi tahu pengguna ketika tidak ada cukup ruang, bahkan sebelum memulai download. Sayangnya Safari tidak ada dalam daftar browser menerapkan API ini dan pada saat penulisan ini tidak ada banyak informasi tentang cara browser lain menerapkan kuota. Oleh karena itu, tim menulis utilitas kecil untuk menguji perilaku pada berbagai perangkat. Sekarang, presentasi komprehensif ada artikel yang merangkum semua spesifikasi pendukung.

Menambahkan perintah penginstalan kustom

PWA ZDF menawarkan alur penginstalan dalam aplikasi kustom dan meminta pengguna untuk menginstal aplikasi segera setelah mereka ingin mengunduh video pertama mereka. Ini adalah waktu yang tepat untuk meminta penginstalan, karena pengguna telah menyatakan niat yang jelas untuk menggunakan aplikasi secara {i>offline<i}.

Membuat halaman offline untuk mengakses hasil download

Ketika perangkat tidak terhubung ke internet dan pengguna membuka yang tidak tersedia dalam mode {i>offline<i}, laman khusus akan ditampilkan mencantumkan semua video yang sudah pernah didownload atau (jika tidak ada konten yang telah diunduh) 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 seperti animasi biasanya memiliki efek sebaliknya dan membuat aplikasi terasa lambat dan kurang responsif jika tidak berjalan pada 60 {i>frame <i}per detik. Untuk mengambil hal ini ke dalam Aplikasi mengukur kecepatan frame yang sebenarnya melalui requestAnimationFrame() saat aplikasi memuat dan menonaktifkan semua animasi saat nilai turun di bawah ambang 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();
});

Bahkan jika pengukuran ini hanya memberikan indikasi kasar dari kinerja dan bervariasi pada setiap beban, itu masih merupakan dasar yang baik untuk keputusan penting. Penting untuk diketahui bahwa tergantung pada kasus penggunaannya 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 populer untuk pengalaman seluler modern adalah mode gelap. Terutama ketika menonton video dalam cahaya sekitar yang rendah, banyak orang yang lebih suka dengan UI yang redup. PWA ZDF tidak hanya menyediakan sebuah {i>switch<i} yang memungkinkan pengguna untuk beralih antara lampu dan tema gelap, serta bereaksi terhadap perubahan preferensi warna seluruh OS. Lewat sini aplikasi akan secara otomatis mengubah tampilannya pada perangkat yang telah menyiapkan jadwal untuk mengubah tema berdasarkan waktu.

Hasil

Progressive web app baru secara diam-diam diluncurkan sebagai beta publik pada Maret 2020 dan menerima banyak masukan positif sejak saat itu. Sedangkan fase beta berlanjut, PWA tetap berjalan dalam domain sementaranya sendiri. Meskipun PWA tidak dipromosikan secara publik, karena jumlah pengguna yang terus bertambah. Banyak di antaranya berasal dari Microsoft Store yang memungkinkan pengguna Windows 10 untuk menemukan PWA dan menginstalnya seperti aplikasi khusus platform.

Apa langkah selanjutnya?

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