Pelajari cara ZDF membuat aplikasi web progresif (PWA) dengan fitur modern seperti dukungan offline, kemampuan penginstalan, dan mode gelap.
Saat mempertimbangkan untuk mendesain ulang stack teknologi frontend, penyiar ZDF memutuskan untuk mempelajari Progressive Web Apps 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 pekerjaan berat dilakukan oleh Workbox, serangkaian library dan modul Node yang memudahkan dukungan berbagai strategi penyimpanan dalam cache. PWA ZDF dibuat dengan TypeScript dan React, sehingga menggunakan library Workbox yang sudah di-build ke dalam create-react-app untuk pra-cache aset statis. Hal ini memungkinkan aplikasi berfokus untuk membuat konten dinamis yang tersedia secara offline, dalam hal ini video dan metadatanya.
Ide dasarnya cukup sederhana: mengambil video dan menyimpannya sebagai blob di IndexedDB. Kemudian, selama pemutaran, dengarkan peristiwa online/offline, dan beralihlah ke versi yang didownload saat perangkat offline.
Sayangnya, ternyata hal ini 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 yang paling canggih akan membantu: service worker.
Pekerja layanan dapat menangkap berbagai permintaan yang dilakukan oleh pemutar dan merespons dengan data dari IndexedDB. Tindakan ini secara transparan menambahkan kemampuan offline tanpa harus mengubah satu baris kode pemutar.
Karena video offline cenderung berukuran cukup besar, pertanyaan besarnya adalah berapa banyak video yang sebenarnya dapat disimpan di perangkat. Dengan bantuan StorageManager API, aplikasi dapat memperkirakan ruang yang tersedia dan memberi tahu pengguna jika tidak ada cukup ruang sebelum memulai download. Sayangnya, Safari tidak ada dalam daftar browser yang menerapkan API ini dan pada saat penulisan, tidak ada banyak informasi terbaru tentang cara browser lain menerapkan kuota. Oleh karena itu, tim menulis utilitas kecil untuk menguji perilaku di berbagai perangkat. Sekarang sudah ada artikel komprehensif yang merangkum semua detailnya.
Menambahkan perintah penginstalan kustom
PWA ZDF menawarkan alur penginstalan dalam aplikasi kustom dan meminta pengguna untuk menginstal aplikasi segera setelah mereka ingin mendownload video pertamanya. Ini adalah waktu yang tepat untuk meminta penginstalan karena pengguna telah menyatakan 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 60 frame per detik. Untuk memperhitungkan hal ini,
aplikasi mengukur kecepatan frame sebenarnya melalui requestAnimationFrame() saat
aplikasi memuat dan menonaktifkan semua animasi saat nilai turun di bawah
nilai minimum 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 tetap menjadi dasar yang baik untuk pengambilan keputusan. Perlu disebutkan bahwa, bergantung pada kasus penggunaan, ada teknik lain untuk pemuatan adaptif yang dapat diterapkan 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 saat menonton video dalam cahaya redup, 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 tema berdasarkan waktu.
Hasil
Aplikasi web progresif baru diluncurkan secara diam-diam sebagai versi beta publik pada Maret 2020 dan telah menerima banyak masukan positif sejak saat itu. Sementara fase beta dilanjutkan, PWA tetap berjalan dalam domain sementaranya sendiri. Meskipun PWA tidak dipromosikan secara publik, jumlah penggunanya terus meningkat. Banyak di antaranya 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, tampilan lintas perangkat dan platform, serta notifikasi push.