Progressive Web App (bagian 1)
Halo devs !
Sebelum pertanyaan dari teman-teman muncul menganai kenapa harus menggunakan PWA? Yuk, kita cari tahu sama-sama apa itu PWA.
PWA atau Progressive Web App adalah sebuah aplikasi website yang menggunakan beberapa teknologi modern sehingga tampilan serta penggunaannya seperti Aplikasi Native (Android/IOS).
Kok bisa penggunaannya seperti Aplikasi Native? Itu karena Aplikasi Native bisa berjalan secara offline, mengirim push notification, bisa di akses dengan cepat, dan tentunya bisa dibuka melalui Home Screen (a2hs).
Kelebihan menggunakan PWA yaitu
- Tidak perlu install
PWA adalah website, sehingga kita tidak perlu melakukan pemasangan layaknya aplikasi android dan ios.
2. Add to home screen
Dengan adanya a2hs kita bisa melakukan pemasangan di homescreen handphone masin-masing. Keren kan? Gak perlu di download dari Google Play Store kita bisa merasakan tampilan homescreen layaknya aplikasi mobile.
3. Tidak perlu didistribusikan ke store
Pada bulan Maret 2018 jumlah aplikasi yang tersedia di Google Play Store mencapai 3,6 juta. Bersaing dengan 3,6 juta aplikasi tidaklah pekerjaan yang mudah. Kabar baiknya lagi, PWA tidak perlu di distribusikan ke dalam Google Play Store.
4. Menghemat data
Dengan ini kita dapat melihat tampilan halaman web dengan cepat. Karena menurut data dari Google, sebagian besar orang akan meninggalkan halaman web tersebut jika membutuhkan waktu yang lama untuk membukanya.
5. Bisa di akses dalam jaringan apapun
Ini adalah salah satu problem yang sering di temukan ketika kita berada di sebuah lingkungan yang internetnya lambat. Kita sudah menunggu 3 detik, 5 detik, 10 detik, bahkan ada yang rela menunggu sampai bermenit-menit dan akhirnya terputus. (Jangan mau menunggu yang tidak pasti ya man teman 😝 #kodekerasdong)
Disinilah Service Worker menjadi jawaban dari masalah tersebut. Karena kita akan menyimpan asset dan shell pada Cache Storage yang nantinya akan di tampilkan untuk teman-teman. Sehingga kita tidak perlu mendownload secara terus menurus ketika reload halaman web. Dengan begitu kita bisa melihat halaman web secara offline hingga tidak muncul dinausaurus lagi.
Coba perhatikan gambar di atas. Dan berikut ini penjelasannya :
Kita berasumsi bahwa teman-teman belum pernah mengunjungi web tersebut. Ketika teman-teman melakukan permintaan dan melewati Service Worker, maka Service Worker akan melakukan pengecekan terlebih dahulu. Apakah file tersebut sudah tersimpan di dalam Cache Storage atau belum? Ingat ya, karna kita sudah berasumsi bahwa teman-teman baru pertama kali mengunjungi web tersebut, sehingga file tersebut belum terdapat di dalam Cache Storage. Maka Service Worker akan mengarahkan ke web server dan mendownload file tersebut untuk disimpan ke dalam Local Storage.
Nah, sekarang asset dan shell sudah tersimpan di dalam Cache Storage. Untuk permintaan selanjutnya Service Worker akan melakukan pengecekan lagi, lagi dan lagi hehehe. Jika sudah tersedia di dalam Cache Storage maka secara otomatis Service Worker akan menjalankan file tersebut untuk di tampilkan pada kita.
Next, kita kembali lagi ke pertanyaan di atas. Kenapa harus menggunakan PWA? Alasannya adalah
- Cepat, karena menghemat penggunaan data sehingga memuat halaman yang sedang kita buka dengan cepat bahkan bisa lebih hemat.
- Nyaman di jaringan apapun. Jadi dengan menggunakan PWA teman-teman bisa membuka web dimana saja. Artinya, dengan jaringan GPRS/EDGE/3G teman-teman bisa dengan nyaman. Bahkan bisa membukanya walaupun tidak terhubung dengan internet. Siapa dong yang gak tertarik belajar PWA kalau begitu 😃
- Menggunakan Web Push Notification API
Gimana nih sudah pusing belum? “Baru pemanasan masak udah pusing mbak, ya belum dong :)”. Good, tunggu artikel selanjutnya ya… Jangan di skip ya,
Selamat belajar dan see you next artikel ^^
Referensi :
