🔰 Deskripsi

Di kelas-kelas sebelumnya (HTML, CSS, JS, dan Firebase), Anda telah berhasil membuat Website dan Web App yang fungsional. Namun, ada dua kekurangan utama dari sebuah Web App biasa: Ia tidak bisa diinstal di layar depan (Home Screen) HP pengguna, dan ia akan mati total (muncul gambar Dinosaurus) jika tidak ada koneksi internet.

Selamat datang di kursus Progressive Web App (PWA)!

PWA adalah metode modern untuk membuat Aplikasi Web Anda memiliki kekuatan super selayaknya Aplikasi Native (Android/iOS) yang biasa Anda unduh dari PlayStore/AppStore. Perusahaan raksasa seperti Twitter, Starbucks, dan Pinterest telah mengadopsi teknologi PWA untuk aplikasi mereka.

Apa yang akan saya pelajari ?

• Pengenalan Progressive Web Apps (PWA) dan perbedaannya dengan Native App.
• Memahami 3 pilar utama PWA (HTTPS, Manifest, Service Worker).
• Membuat manifest.json agar web memiliki ikon, warna tema, dan tampilan fullscreen.
• Service Workers: Menyelami background script yang mengatur caching.
• Mengimplementasikan berbagai strategi Caching (Cache-First, Network-First).
• Membuat Halaman Offline Fallback (Halaman pengganti Dinosaurus Chrome).
• Syarat dan cara membuat Web bisa diinstal (A2HS - Add to Home Screen).
• Menilai kelayakan aplikasi PWA menggunakan alat audit Google Lighthouse.

Project apa yang akan saya buat ?

Kursus ini sangat spesial karena merupakan kelanjutan langsung dari kursus Firebase sebelumnya! Pada proyek akhir nanti, Anda akan diminta untuk membuka kembali file Smart Notes App (Aplikasi Catatan Pintar) yang pernah Anda deploy di Firebase Hosting.

Kita akan bersama-sama menyuntikkan Web App Manifest dan Service Worker ke dalam file HTML catatan Anda. Hasil akhirnya? Aplikasi catatan Anda akan memunculkan tombol “Install App” di HP, dan pengguna tetap bisa membuka catatannya meski HP mereka sedang dalam Mode Pesawat (Airplane Mode)! ✈️📱

💎 Materi

Berikut ini adalah materi belajar untuk menguasai PWA langkah demi langkah. Mari ubah website Anda menjadi Aplikasi sungguhan! 🚀