PWA (Progressive Web App): Pengertian, Komponen, Ciri, Cara Kerja, Contoh, Kelebihan, dan Kekurangannya

Table of Contents

PWA (Progressive Web App)

Pengertian PWA (Progressive Web App)

Progressive Web App (PWA) adalah sebuah aplikasi yang dibangun dengan melakukan optimasi pada sebuah website. Selain membuat website menjadi lebih cepat, PWA memungkinkan pengguna mengakses aplikasi dengan tampilan mobile web pada perangkat smartphone tanpa perlu membuat aplikasi mobile secara terpisah.

PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet. Beberapa contoh website yang menggunakan PWA adalah Twitter, Pinterest, OLX dan Trivago.

Komponen PWA (Progressive Web App)

Progressive web app memiliki komponen-komponen pendukung di antaranya,
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.

Ciri PWA (Progressive Web App)

Berikut beberapa ciri website sudah terpasang PWA  di antaranya,
1. Instant loading
Hal ini lah yang dinamakan service worker dimana kita dapat mengkases aplikasi / website meskipun dalam keadaan offline sekalipun.

2. Connectivity Independent
Masih berhubungan dengan poin sebelumnya, fitur ini dapat mempermudah kita mengakses di kondisi koneksi apapun.

3. App-like Mode
Dengan menggunakan PWA ini, seolah kita membuat aplikasi native pada smartphone yang tidak harus diinstal pada smartphone kita. Ini memungkinkan karena PWA sendiri dibuat dengan model App Shell dalam full screen mode.

4. Fresh dan Safe
PWA lebih smooth dan dapat diakses dengan cepat selain itu juga dapat diakses dengan aman melalui perangkat apapun.

5. Discoverable
PWA bisa teridentifikasi sebagai “aplikasi” oleh mobile device, dengan menggunakan W3C Web App Manifest dan Service Worker registration scope yang memungkian mesin pencari bisa menemukannya. Padahal kita tidak menginstal aplikasi tapi diakses melalui PWA.

6. Re-engageable, Installable, dan Linkable
ketiga poin ini menggambarkan PWA mempunyai fitur yang sangat beragam sehingga akan lebih praktis digunakan. Seperti yang kita ketahui, saat kita mengakses suatu website yang terintegrasi dengan PWA, akan memunculkan notifikasi apakah kita ingin menambahkan ke Homescreen, jika iya, maka aplikasi akan muncul di homescreen tanpa harus melewati proses instalasi, dan untuk mengaksesnya tinggal melakukan klik icon aplikasi pada homescreen.

Cara Kerja PWA (Progressive Web App)

Progressive web application bekerja seperti browser pada umumnya. Yang membedakannya hanyalah user experience yang diberikannya. Hal tersebut dikarenakan PWA menyediakan benefit yang bisa Anda dapatkan di mobile experience. Jadi, PWA akan nge load seperti web page biasa dan menawarkan fungsi tertentu yang hanya bisa didapatkan dengan aplikasi mobile.

Menurut Google, PWA adalah user experience yang menggunakan teknologi seperti website biasa. Oleh karena itu, PWA harus memiliki aspek seperti berikut di antaranya,
1. Dapat diandalkan: Tidak memakan banyak waktu untuk loading dan tidak pernah menunjukkan down saur jika sedang mengalami kondisi jaringan yang buruk.
2. Cepat: Bisa merespons secara cepat disaat sedang interaksi dengan user dan memiliki smooth scrolling dan animasi.
3. Engaging: menawarkan user experience yang luar biasa, seperti aplikasi mobile biasa.

Contoh PWA (Progressive Web App)

Berikut beberapa contoh PWA yang cukup populer di antaranya,
1. OLX
OLX, selain bisa melakukannya via aplikasi, Anda juga bisa berbelanja di sana via mobile web. Alasan utama OLX menggunakan PWA adalah jumlah pengunjung website mereka 90% berasal dari perangkat mobile. Baik melalui aplikasi maupun melalui browser.

Untuk memanfaatkan jumlah pengunjung yang banyak di browser, akhirnya mereka membangun PWA. Hasilnya tidak main-main, tingkat engagement mereka langsung meroket hingga 250%

2. Twitter Lite
Sebagian besar traffic Twitter – kurang lebih 80% – berasal dari perangkat mobile. Inilah mengapa pada tahun 2017, Twitter membangun PWA. Selain itu, Twitter adalah meningkatkan performa websitenya dengan cara mengurangi penggunaan data melalui optimasi gambar dan pemanfaatan cache.

Tentu hasil ini membuahkan hasil positif. Mereka mengurangi bounce rate sebesar 20% dan jumlah tweet yang dikirim meningkat hingga 75%.

3. Trivago
Salah satu contoh platform travel yang menggunakan PWA adalah Trivago. Seperti yang Anda lihat, jika Anda masuk ke websitenya via mobile browser, Anda bisa langsung melakukan pencarian seperti di aplikasi.

Hal ini tentunya mempengaruhi tingkat konversi yang mereka dapat. Karena pengguna jadi lebih mudah untuk memesan via browser. Sejak menggunaan PWA, click-through rate website mereka meningkat hingga 95%

4. Forbes
PWA juga berguna untuk website portal berita. Karena, interface yang ramah pengguna akan meningkatkan kenyamanan saat membaca berita. Setidaknya inilah yang dilakukan oleh Forbes.

Sejak membangun PWA, mereka mampu meraih beberapa pencapaian. Seperti tingkat engagement yang meningkat hingga 100% dan jumlah artikel yang dibaca per pengguna meningkat enam kali lipat.

5. Starbucks
Dengan PWA, Starbucks mempermudah pelanggannya untuk melakukan pemesanan via browser. Mereka bisa langsung memilih menu hingga melakukan pembayaran tanpa harus membuka aplikasi.

Selain meningkatkan kenyamanan pengguna, performa PWA Starbucks bahkan lebih baik dibanding aplikasinya. Sehingga membuatnya disukai oleh banyak konsumen Starbucks.

Kelebihan PWA (Progressive Web App)

1. Peningkatan performa
Beda dari website pada umumnya, progressive web application memiliki tingkatan performa yang tinggi. Sehingga website Anda tidak akan memiliki loading page yang lama. Selain itu, interface yang Anda miliki di website juga tidak akan mengalami slow-respon dan user juga tidak akan mengalami kelambatan jika mereka scroll down di website.
 
Karena PWA menggunakan “service workers”, yaitu file Javascript yang dijalankan di beda server dari server utama dan sangat aktif dalam mengontrol caching assets, PWA bisa memberikan performa website yang jauh lebih beda dari website biasa.

2. Tidak mengharuskan untuk instalasi dan update
Untuk mengakses progressive web application, Anda tidak usah download aplikasinya dari Play Store atau App Store. Anda bisa menggunakannya langsung di browser dengan gampang dan update pun akan dilakukan secara otomatis.

Sehingga user yang sedang menggunakan PWA Anda tidak harus nge-update nya secara manual karena semua fitur baru atau bug fixes telat terjadi secara otomatis.

3. Tidak memakan banyak data seluler
Karena progressive web application tidak sebesar aplikasi mobile dan menggunakan bandwidth yang jauh lebih kecil daripada web app pada umumnya, PWA tidak akan memakan data seluler user Anda. Kemudian, PWA juga hanya berbasis text code yang bisa dibilang lebih kecil daripada aplikasi mobile biasa.  

Jadi, akan lebih diminati oleh masyarakat karena user Anda tidak harus menghabiskan data mereka jika membuka progressive web app Anda.
 
4. Fitur-fitur tertentu
Seperti yang sudah sering disebut sebelumnya, progressive web application ini bisa mengambil keuntungan fitur-fitur yang berada di platform lain. Contohnya, dengan PWA, website Anda bisa ditampilkan di home screen dan menyampaikan push notification yang akan terlihat seperti push notification yang dirilis oleh aplikasi mobile pada umumnya.

Selain itu, PWA juga bisa ditampilkan di full screen, bisa mengganti display orientation, mengakses lokasi data, mulai dengan custom splash screen, dan yang lain-lainnya.

5. Mode offline
Salah satu fitur menarik yang PWA miliki adalah mode offline yang ditawarkan. Karena PWA bisa di cache oleh web browser, user akan bisa tetap melihat website Anda tanpa harus menyalakan data seluler atau menggunakan wi-fi.

Oleh karena itu, hal tersebut sangat berguna untuk para entrepreneurs yang memiliki katalog produk atau informasi produk dalam bentuk apapun. User Anda akan bisa terus browsing produk walaupun tidak terkoneksi ke internet, sehingga akan meningkatkan user engagement di dalam bisnis.
 

Kekurangan PWA (Progressive Web App)

Berikut beberapa kekurangan dari progressive web application di antaranya,
1. Browser yang terbatas
Sayangnya, progressive web application lebih bersisi pada Android, sehingga tidak terlalu berlaku untuk browser seperti Safari. Akan tetapi, PWA bisa digunakan di versi terbaru Chrome, Firefox, dan juga Opera.

2. Hardware dan Software Support yang terbatas
Karena progressive web application masih baru, tidak semua hardware dan software dapat mendukung PWA ini. Contohnya, iOS tidak mendukung beberapa fitur dari PWA seperti push notification nya dan home screen shortcut.

Selain itu, PWA juga tidak bisa mengakses beberapa fitur IOS seperti; Touch ID ataupun Face ID.

3. Tidak berada di download store
Meskipun salah satu keuntungan progressive web application adalah tidak harus menginstalasi, PWA tidak memiliki presensi di download store terkenal seperti Google Play, Apple App Store, ataupun Play Store yang bisa saja membuat mereka lebih populer.

Sehingga, karena kebanyakan user mencari aplikasi di app store ataupun download store yang lainnya, target user bisa melewatkan PWA bisnis Anda.

Dari berbagai sumber

Download