Dalam membangun PWA, ada beberapa komponen yang harus digunakan. Berikut ini adalah penjelasan ringkas dari beberapa komponen PWA yang akan kita pelajari.
Ada beberapa komponen wajib dan ada juga komponen yang opsional. Komponen wajib adalah komponen yang akan selalu digunakan setiap kali membuat PWA, sedangkan komponen opsional adalah komponen yang tidak mempengaruhi kinerja PWA namun dapat digunakan untuk memperkaya fitur PWA.
Service Worker
Service Worker adalah skrip yang dijalankan oleh browser di latar belakang, yang terpisah dengan skrip lain di halaman web browser. Service worker ditulis menggunakan bahasa pemrograman JavaScript, namun dipanggil dengan cara yang berbeda dari kode JavaScript pada umumnya. Dengan menggunakan service worker, kita dapat memanfaatkan resource yang telah disimpan di dalam cache untuk menampilkan bahkan dalam mode jaringan offline.
App shell
Application shell atau biasa disingkat dengan app shell adalah kerangka antarmuka aplikasi yang dibangun oleh beberapa komponen halaman dan aset lainnya. MEreka disimpan lebih dahulu di dalam cache sehingga dapat tampil secara instan saat aplikasi dibuka. Umumnya komponen halaman yang menjadi bagian dari app shell adalah komponen yang selalu ada untuk semua halaman seperti header, sidebar dan footer. Adapun komponen dari konten halaman akan dimuat secara dinamis dan asinkron.
Cache
Cache adalah tempat penyimpanan lokal yang digunakan browser untuk menyimpan resource untuk dapat digunakan kembali pada pemanggilan selanjutnya tanpa perlu mengirim permintaan (request)lagi ke jaringan. Ada 2 jenis cache di browser, yaitu Browser-managed cache dan Application-managed cache. Browser-managed cache adalah cache sementara untuk menyimpan berkas unduhan browser secara otomatis. Cache jenis ini diatur oleh browser dan tidak tersedia dalam mode jaringan offline. Adapun application-managed cache adalah cache yang dibuat oleh aplikasi menggunakan Cache API dan terpisah dari cache yang dikelola oleh browser. Cache jenis inilah yang dapat kita gunakan untuk menyimpan resource dan dapat ditampilkan dalam mode jaringan offline melalui service worker.
Web App Manifest
Web app manifest adalah file JSON sederhana yang mengontrol bagaimana aplikasi ditampilkan dan dijalankan di sisi pengguna. Umumnya file ini diberi nama manifest.json. Saat aplikasi pertama kali dibuka di browser, browser akan membaca file manifest, mengunduh resource dan menampilkan konten.
Fetch API
Fetch API adalah salah satu diantara web API yang dapat digunakan untuk mengambil resource dari server di dalam dan lintas jaringan secara asinkron. Bila kamu sudah terbiasa dengan teknik AJAX, maka kamu akan sangat familiar dengan fetch API. Fetch API sama seperti penggunaan API XMLHttpRequest namun memilikk beberapa fitur yang lebih baik.
Progressive Enhancement
Progressive enhancement atau peningkatan progressif adalah pendekatan dalam pengembangan web dimana kita memulai pengembangan dari fitur-fitur yang umum berjalan di semua browser. Kemudian secara bertahap kita meningkatkan fungsionalitas sesuai dengan kemampuan dari jenis browser yang digunakan oleh setiap pengguna. Setiap kali kita menggunakan suatu web API kita perlu memperhatikan apakah API tersebut sudah didukung oleh browser bawaan pengguna aplikasi kita. Kita juga perlu melakukan penanganan bilamana browser yang digunakan pengguna belum mendukung fitur web API yang kita gunakan. Misalnya melakukan fallback ke fitur sejenis yang telah didukung atau menampilkan pesan untuk memperbaharui versi browser atau mengimbau agar menggunakan selalu browser modern.
PWA Architecture Styles
PWA Architecture Styles maksudnya pendekatan yang digunakan dalam membangun PWA ditinjau dari teknologi back-end yang digunakan dan kebutuhan performa aplikasi. Beberapa istilah terkait hal ini diantaranya app shell, server-side rendering, client-side rendering, dan sebagainya. Selengkapnya tentang ulasan ini ada di bagian Pola Arsitektur PWA di bawah ini.
IndexedDB
IndexedDB adalah sistem penyimpanan lokal berbasis NoSQL di browser. Kita dapat menyimpan data apapun di browser pengguna untuk keperluan aplikasi. Kamu dapat melakukan aksi pencarian, pembaharuan dan penghapusan data.
Push Notification
Notification adalah pesan popup yang muncul di perangkat pengguna. Aplikasi PWA kita mendukung pemunculan notification untuk memberitahu pengguna terkait pembaharuan tertentu di dalam aplikasi. Aplikasi PWA juga dapat menerima event push yang dikirim oleh server dan menampilkan pesan popup meskipun pengguna sedang tidak membuka aplikasi tersebut.
Workbox
Workbox adalah koleksi librari dan tool yang dapat kita gunakan untuk meng-generate file service worker, precaching, routing dan runtime-caching. Workbox memudahkan kita dalam menulis kode PWA dengan sintaks yang lebih sederhana dan mudah dikelola