Pengenalan Progressive Web App

Progressive Web App atau biasa disingkat menjadi PWA adalah 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. PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet.

Web App vs Native vs PWA

Ilustrasi Progressive Web App (PWA)

Secara sederhana, PWA dapat disebut sebagai teknik yang menggabungkan kelebihan dari aplikasi native dan aplikasi web.

Contoh PWA

Berikut adalah beberapa web yang telah menggunakan PWA:

Kelebihan PWA

Yang menjadi kelebihan PWA adalah:

1. Hemat biaya produksi
2. Kemudahan digunakan di berbagai perangkat
3. Tidak bergantung pada App Store
4. Instalasi yang cepat
5. Berfungsi layaknya aplikasi mobile
6. Kinerja yang cepat
7. Update dapat dilakukan secara otomatis
8. Bisa berjalan tanpa jaringan internet
9. Ramah Storage
10. Ramah Bandwidth
11. Keamanan yang terjamin

Secara umum, cara kerja PWA adalah sebagai berikut:

Konsep PWA

1. Dari gambar pada slide sebelumnya, dapat dilihat bahwa bagian utama dari sebuah PWA adalah service worker.
2. Service worker adalah sebuah script yang bisa di register pada system operasi mobile untuk mengontrol sebuah atau lebih halaman web. Service Worker bekerja sebagai sebuah service yang berjalan di luar dari aplikasi browser.
3. Service worker bisa menangkap request dan melakukan respon terhadap event yang dipanggil pada setiap halaman aplikasi web yang dilayaninya. Event seperti permintaan file dari web server bisa di intercept, diubah, diteruskan ke web server, dan dikembalikan lagi ke aplikasi web.
4. Service worker menjadi lapisan antara aplikasi web dengan server yang bisa melakukan respond terhadap event secara independent dan tidak tergantung kepada koneksi internet.

PWA Building Block

Inti dari PWA tersusun oleh blok-blok module sebagai berikut

PWA Demo

1. Berikut adalah demo yang menunjukkan cara kerja dari sebuah web yang dikembangkan menggunakan PWA. Buka aplikasi browser Chrome dan masukkan url http://olx.co.id
2. Pada tombol option (tiga titik), klik menu Developer tools (atau tekat Ctrl+Shift+I). Klik tanda panah di sebelah tab Network (>>) lalu klik tab Application seperti pada gambar berikut:
3. Pada tampilan Application, sebuah web yang memiliki service worker yang aktif akan menampilkan tanda hijau pada bagian status seperti pada gambar di samping.
4. Pada tampilan ini, kita bisa melakukan simulasi offline dari web yang mengimplementasi PWA. Centang checkbox Offline di bawah tulisan Service Workers. Lalu refresh atau tekan tombol F5.
5. Pada kondisi offline, web olx.co.id akan menampilkan page notifikasi seperti pada gambar disamping.