Aset dan data

Progressive Web App adalah situs; semua asetnya sama seperti yang ada di web, tetapi dengan alat baru untuk membuat aset tersebut dimuat dengan cepat saat online dan tersedia saat offline.

Komponen aplikasi

Pengembangan aplikasi biasanya melibatkan beberapa aset dan resource, mulai dari logika dan kode (dikompilasi atau tidak) hingga elemen antarmuka pengguna seperti desain layar, gambar, logo, dan font.

Progressive Web App adalah situs, sehingga semua asetnya sama seperti yang ada di web:

HTML untuk konten dan rendering halaman awal.
JavaScript untuk logika, termasuk kemampuan untuk menjalankan modul WebAssembly (kode yang dikompilasi) dan merender grafis yang dioptimalkan untuk hardware 2D dan 3D.
CSS untuk tata letak, gaya visual, dan animasi.
Gambar dalam format web, seperti PNG, JPEG, WebP, dan SVG.
Video dalam format web, seperti MPEG-4 dan WebM.
Font web.
Data dalam JSON atau format lainnya.

Secara default, situs mendownload aset melalui jaringan, dimulai dengan HTML dan melanjutkan ke resource lainnya.

Mengelola sumber daya tersebut agar dimuat dengan cepat dan tersedia secara offline telah menjadi tantangan bagi web. Saat ini, PWA menggunakan kemampuan yang sebelumnya hanya terkait dengan aplikasi khusus platform.

Aplikasi khusus platform vs. PWA

Saat menginstal aplikasi khusus platform, Anda biasanya mendownload paket yang menyertakan semua aset aplikasi: kode, gambar, font, video, dan sebagainya. Oleh karena itu, semua resource ini tersedia dari penyimpanan perangkat Anda, bahkan saat aplikasi sedang offline.

Di sisi lain, {i>website<i} klasik memerlukan koneksi jaringan untuk mendownload aset bila diperlukan. Jika sedang offline, Anda akan melihat error dari browser karena tidak ada aset di sisi klien.

Pendekatan PWA meningkatkan pengalaman web tradisional dengan menyediakan beberapa atau semua aset di sisi klien seperti pada aplikasi khusus platform. Oleh karena itu, saat Anda membuka PWA, rendering awal dapat dilakukan secara instan seperti aplikasi platform karena asetnya tersedia tanpa masuk ke jaringan.

Cache dan penyimpanan

Sejak awal adanya web, developer belum memiliki kontrol penuh tentang bagaimana resource di-cache. Browser bertanggung jawab atas cache HTTP dan mungkin juga tidak melakukan cache dan menyediakan resource berdasarkan kebijakan yang berbeda. Opsi penyimpanan lain seperti Web Storage dan IndexedDB dimaksudkan untuk menyimpan data dan objek sederhana.

PWA tidak perlu mengandalkan kebijakan tersebut saja untuk konten mereka. Sebagai gantinya, saat ini kami memiliki solusi untuk mendapatkan kontrol yang lebih baik atas waktu dan cara menyimpan resource dalam cache, serta waktu dan cara mengirimkannya secara lokal: Cache Storage API. Web memiliki beberapa solusi penyimpanan sisi klien yang tersedia:

Penyimpanan web: Mencakup localStorage dan sessionStorage. API ini menyimpan pasangan string kunci/nilai sederhana. Penyimpanan web terbatas, dan memiliki API sinkron, sehingga harus dihindari jika memungkinkan.
IndexedDB: Database berbasis objek (No-SQL) dengan API asinkron yang bagus untuk performa web. IndexedDB dapat menyimpan data terstruktur dan biner sisi klien. Ini biasanya adalah data yang akan Anda gunakan untuk menyimpan data, seperti data yang akan Anda dapatkan atau kirim sebagai permintaan API. Juga berguna untuk menyimpan data secara lokal segera dan kemudian menyinkronkannya ke server. IndexedDB API digunakan untuk berinteraksi dengan database.
Penyimpanan cache: Kumpulan pasangan permintaan dan respons HTTP yang dapat Anda gunakan untuk menyimpan dan mengambil resource — dengan header HTTP-nya — persis seperti yang dikirim dari server. Cache Storage API memungkinkan Anda menyimpan, mengambil, memperbarui, dan menghapus permintaan jaringan, misalnya untuk aset Anda, bahkan saat offline.

Kebutuhan akan pekerja layanan

PWA dapat menyimpan asetnya di Cache Storage dan IndexedDB, tetapi bagaimana kita dapat menggunakan aset tersebut untuk memberikan pengalaman yang cepat dan offline kepada pengguna. Jawabannya? Service worker.

Dengan pekerja layanan, Anda dapat menyalurkan aset tanpa masuk ke jaringan, mengirim notifikasi kepada pengguna, menambahkan badge ke ikon PWA, memperbarui konten di latar belakang, dan bahkan membuat seluruh PWA berfungsi secara offline. Pelajari lebih lanjut pekerja layanan di bab berikutnya.

Siap digunakan untuk offline

Pengguna berharap aplikasi Anda menawarkan pengalaman yang cepat dan selalu siap. Artinya, aplikasi Anda dapat berfungsi secara offline.

Siap untuk offline bukan berarti semua konten atau layanan Anda harus tersedia tanpa koneksi jaringan. Namun, memiliki setidaknya pengalaman dasar saat pengguna sedang offline, seperti halaman yang meminta Anda untuk terhubung ke internet untuk melanjutkan, akan memberikan pengalaman pengguna yang lebih baik, menjaga pengguna dalam pengalaman aplikasi Anda, bukan error browser umum. Di beberapa browser, fitur ini harus dimiliki agar dapat memenuhi kriteria penginstalan PWA. Menampilkan antarmuka pengguna PWA Anda, bersama dengan konten yang di-cache, lebih baik. Mengizinkan pengguna untuk terus menggunakan seluruh PWA Anda dan menyinkronkan perubahan server saat mereka kembali online adalah standar terbaik untuk bekerja secara offline.

Agar aplikasi tersedia secara offline, Anda perlu meng-cache aset yang diperlukan untuk pengalaman offline dan membuat pekerja layanan menayangkannya nanti. Pastikan untuk menambahkan aset offline ke cache Anda sebelum memerlukannya. Ini adalah kasus khusus ketika Anda tidak dapat meng-cache-nya saat diminta.

Pendekatan cache yang sering digunakan

Di PWA, Anda bertanggung jawab atas semua keputusan. Anda dapat memilih pendekatan terbaik untuk meng-cache atau menginstal aset berdasarkan kebutuhan Anda. Beberapa keputusan yang harus diambil adalah:

Precache: pilih aset yang ingin Anda instal saat pemuatan pertama; aset tersebut harus mencakup HTML dan aset minimal untuk merender aplikasi. Saat menggunakan precache, perlu diingat bahwa Anda menggunakan ruang dan jaringan perangkat. Sadar dan bertanggung jawab saat mendownload aset dan menyimpannya dalam cache.
Cache sesuai kebutuhan: digunakan untuk menambahkan aset ke cache saat diminta. Biasanya ini adalah aset yang dapat berubah secara terpisah dari versi aplikasi Anda, seperti gambar atau konten. Lihat bagian cache untuk mengetahui strategi lain terkait cara meng-cache sesuai kebutuhan.
API dan layanan web: Panggilan API dapat di-cache; atau, sebagai ganti meng-cache respons API, Anda bisa menyimpan data mereka di IndexedDB.

Memperbarui aset

Dalam model aplikasi standar untuk aplikasi terinstal katalog aplikasi, saat developer perlu mengupdate aplikasi, mereka memublikasikan paket baru. Pengguna harus mendownload seluruh paket lagi, meskipun sebagian besar aset belum berubah. Dengan PWA, menggunakan pendekatan pada bagian di atas, Anda dapat memutuskan cara dan waktu untuk memperbarui aset. Berikut beberapa opsi untuk memperbarui aset:

Pembaruan Penuh: dalam hal ini, setiap kali Anda membuat perubahan di aplikasi, bahkan perubahan kecil, kode Anda akan mengunduh semua aset lagi dalam cache.
Update Sebagian: dalam pendekatan ini, Anda membuat metode untuk menentukan aset mana yang telah diupdate, dan hanya mengupdate aset tersebut, dengan atau tanpa intervensi pengguna.
Pembaruan Berkelanjutan: dengan menggunakan teknik ini, aset Anda akan diperiksa dan diperbarui secara otomatis pada setiap penggunaan PWA satu per satu

Ukuran dan Umur

Biasanya aplikasi khusus platform tidak memiliki batas ukuran; saat pemasangan, aplikasi dapat berukuran gigabyte atau lebih besar. Selama perangkat memiliki kapasitas, penginstalan akan diizinkan. Selain itu, saat diinstal, aplikasi akan menggunakan jumlah total penyimpanan, terlepas dari apakah Anda menggunakannya atau tidak. Penyimpanan ditangani secara berbeda untuk PWA. Browser akan menyimpan aset Anda berdasarkan kebijakan yang Anda tentukan dalam logika PWA Anda.

Batas ukuran bergantung pada browser. Tidak sefleksibel aplikasi khusus platform, tetapi biasanya cukup baik untuk sebagian besar aplikasi web. Anda dapat melihat batasan spesifik berdasarkan browser di artikel ini.

Browser dapat mengeluarkan aset berdasarkan tekanan penyimpanan, atau setelah tidak aktif selama beberapa minggu, jika pengguna menggunakan PWA Anda di browser. Di beberapa platform, jika pengguna menginstal PWA Anda, penghapusan tidak akan terjadi. Jika tersedia, kode dapat meminta penyimpanan persisten melalui API untuk menghindari penghapusan tersebut.