Mengenal PWA ( Progressive Web App )

Apa itu PWA ?

PWA adalah singkatan dari Progressive Web App, sebuah aplikasi yang dibangun dengan melakukan optimasi pada sebuah website.Optimasi yang dilakukan tidak hanya akan membuat website menjadi lebih cepat namun juga mampu memberikan pengalaman layaknya menggunakan aplikasi mobile. Selain itu, Anda juga tidak perlu membuat aplikasi mobile secara terpisah.

PWA adalah sebuah teknik dimana kamu bisa dengan cepat mengakses website dan aplikasi menjadi satu tanpa harus menginstal atau memasang aplikasi tersebut. Progressive Web Apps juga memungkinkan kamu untuk mengakses dengan cepat suatu aplikasi dengan tampilan mobile web dengan perangkat smartphone.Sebenarnya PWA tidak hanya bertujuan untuk membuat kinerja website lebih cepat, namun juga bisa memberikan pengalaman menggunakan aplikasi native bagi user-nya. Berkat konsep offline first dan Web API baru, aplikasi PWA ini bisa diakses dalam mode offline khususnya ketika jaringan buruk atau tidak terkoneksi dengan internet sama sekali

Komponen-komponen PWA

Dalam melakukan kerjanya, progressive web app memiliki komponen-komponen pendukung kerjanya, komponen ini menjadi pendukung atas berjalannya proses PWA. komponen tersebut antara lain adalah:
 

1. Service worker

Komponen ini merupakan skrip pada web browser yang ditulis dengan menggunakan bahasa pemrograman dengan Javascript. Pada service worker dapat memberi manfaat berupa menampilkan resource sehingga dapat melakukan pengaksesan secara offline.

2. Cache

Cache menjadi tempat resource untuk memberikan tampilan pada saat menggunakan metode offline. Penampilan resource pada cache melalui service worker agar bisa ditampilkan dalam keadaan offline.

3. Progressive Enhancement

Pada komponen ini memberikan pendekatan terhadap pengembangan web yang dimulai dengan fitur-fitur umum pada web browser. 

4. PWA Architecture style

Pendekatan komponen ini berpengaruh pada performa dari website, yang mempengaruhi terhadap back end dari website tersebut.

5. Push Notification

Memberikan fitur kemunculan pop up berupa notifikasi atau pemberitahuan pada website yang akan memberikan pemberitahuan kepada pengguna bahwa terdapat pemberitahuan terhadap website tersebut.
 

Cara kerja PWA

Progressive Web App (PWA) mengandalkan Service Worker, Melalui Service Worker ini, pengelola website bisa menyimpan shell (kerangka halaman) serta aset website (CSS & JS) di Cache Storage yang nantinya akan dimunculkan kepada user yang mengakses halaman tersebut.Dengan begini, user tidak perlu memuat setiap halaman website berulang kali, bahkan mereka bisa membuka halaman terkait secara offline dan dalam jaringan yang buruk. Jadi download halaman website beserta asetnya hanya dilakukan ketika user baru membuka website pertama kali.
 

Keuntungan  Progressive Web Apps

1. Reliable
Progressive Web Apps memungkinkan untuk memangkas loading time yang lama pada setiap halaman website. Tentunya ini sangat bermanfaat untuk menghindari para user yang tidak sabar saat menunggu proses loading yang lama. Perlu diketahui bahwa setiap orang hanya bisa memberikan atensi pada suatu hal dalam 3 detik saja, setelahnya itu orang akan mengalihkan perhatian ke lain hal, tidak  menutup kemungkinan mencari alternative aplikasi lain yang sejenis.
Aplikasi yang dikembangkan menggunakan Progressive Web Apps bisa dijalankan walaupun dengan jaringan yang tidak stabil bahkan offline sekalipun. Ini karena Progressive Web Apps menggunakan sevice worker. Fungsi service worker adalah untuk menyimpan semua data terakhir pada aplikasi, mirip dengan cache yang ada pada web browser.

2. Fast
progressive web application (PWA) memungkinkan kamu untuk memiliki aplikasi yang hemat data dengan keuntungan user interface yang responsive layaknya native app. Dengan bantuan dari cache dan service worker, aplikasi kamu akan berjalan secara “seamless” seperti native app, dan menghemat data layaknya website reguler. Hibrida dua produk digital yang dinilai nyaris sempurna, kata mbah Google.
Meskipun demikian, responsif atau tidaknya aplikasi kamu, bukan cuma bergantung pada metode apa yang digunakan. Tetapi juga, siapa yang mengerjakan. Susunan kode cantik, efektif dan efisien turut mendukung terciptanya kesan “fast” pada aplikasimu.

3. Engaging
Engaging jika diartikan berarti menarik. Intinya dari kata engaging ini adalah pengguna akan sulit membedakan mana aplikasi yang menggunakan Progressive Web Apps (PWA) dan mana yang menggunakan native aplikasi. Hal ini bisa terjadi karena aplikasi yang dibuat dengan Progressive Web Apps sudah bisa menyamai native app.