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.

Catatan: Aplikasi yang tersedia secara offline akan selalu merender antarmuka pengguna dasar, bukan error teknis dari sistem operasi atau browser. Beberapa aplikasi masih menawarkan semua fungsinya, beberapa aplikasi memiliki pengalaman terbatas, dan yang lainnya pesan sederhana dengan branding aplikasi. Hal ini berlaku untuk aplikasi khusus platform dan PWA.

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.

Peringatan: Anda mungkin pernah mendengar tentang WebSQL dan ApplicationCache. Kedua solusi ini tidak digunakan lagi, dan Anda tidak boleh menggunakannya di PWA.

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.

Catatan: Pembuatan cache aset terjadi secara terpisah dari penginstalan PWA, dan akan berfungsi bahkan dari tab browser, sehingga memungkinkan pengiriman aset yang lebih cepat serta pengalaman offline, terlepas dari cara pengguna memilih untuk menggunakan PWA Anda.

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.

Dengan aplikasi khusus platform, pola yang paling umum adalah menyertakan semua aset aplikasi dalam paketnya; itulah alasan aplikasi ini biasanya berukuran lebih dari 500 MB. Di sisi lain, PWA pada awalnya hanya dapat menginstal serangkaian resource minimum untuk menawarkan pengalaman offline dan cepat, serta mendownload sisanya nanti, dengan PWA menggunakan penyimpanan yang jauh lebih sedikit saat penginstalan.

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

Catatan: Saat menyimpan aset dalam cache, Anda harus menentukan kebijakan tukar atau pembersihan cache yang menentukan kapan pengguna akan melihat aset yang diperbarui; dengan mempertimbangkan penggunaan penyimpanan dan keseimbangan antara pengalaman yang cepat dan tampilan aset yang sedikit usang.

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.

Catatan: Pengguna selalu memegang kendali, dan mereka dapat menghapus aset kapan saja. Untuk PWA, penghapusan manual terjadi melalui setelan browser.

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.

Catatan: Jika penghapusan penyimpanan terjadi karena alasan apa pun dan pengguna menginstal PWA Anda, PWA akan tetap berfungsi jika Anda memiliki koneksi jaringan. Jika Anda membuka aplikasi tersebut lagi, browser akan memulai siklus proses pekerja layanan lagi, yang memuat aplikasi Anda dari jaringan.

Referensi

• Penyimpanan di Web
• MDN: Penyimpanan Web
• MDN: IndexedDB