“PWA atau Progressive Web App adalah sebuah teknologi yang memungkinkan sebuah situs web seluler dapat digunakan seperti aplikasi asli. LOGIQUE Digital Indonesia sendiri sampai saat ini telah banyak mengembangkan teknologi PWA untuk beragam bidang industri. Diantaranya VIP Plaza, Klikhoreca dan lainnya.”
Apa itu PWA? PWA merupakan singkatan dari Progressive Web App. Teknologi ini menarik perhatian banyak orang karena dapat menggabungkan kemampuan web modern dengan aplikasi native.
Dengan mengaplikasikan teknologi PWA ini pada sistem yang Anda kembangkan, sebuah bisnis dapat memperoleh berbagai keuntungan. Meskipun demikian terdapat beberapa kekurangan yang juga perlu Anda perhatikan. Untuk lebih jelasnya, berikut kami sediakan penjelasan lengkap mengenai teknologi PWA.
Table of Contents
Definisi PWA (Progressive Web App)
Progressive Web App adalah sebuah teknologi yang memungkinkan sebuah situs web seluler dapat digunakan seperti aplikasi asli. Ketika dikembangkan, PWA akan menggunakan sejumlah teknologi, arsitektur app shell, service workers, API, serta fitur web modern lainnya agar PWA ini dapat bekerja seperti aplikasi asli/native pada umumnya.
Sebuah website dapat dianggap sebagai PWA jika memenuhi persyaratan tertentu atau memiliki beberapa fitur yang diaplikasikan di dalamnya. Beberapa diantaranya seperti adanya fitur push notifications, dapat diinstal, bekerja secara offline, mudah disinkronkan, dan masih banyak lagi.
Selain itu, perlu Anda ketahui bahwa Progressive Web App memiliki karakteristik tertentu, yaitu :
- Progressive : PWA masih dapat bekerja di browser lama namun akan bekerja secara optimal jika diakses menggunakan web browser terbaru.
- Discoverable : konten di dalam PWA dapat ditemukan di halaman search engine
- Linkable : mudah dibagikan melalui link URL
- Network independent : tetap dapat diakses secara offline atau dengan koneksi internet yang buruk
- Installable : PWA dapat ditampilkan pada home screen perangkat Anda.
Progressive Web App yang sudah terinstal di perangkat dapat langsung Anda pergunakan tanpa harus membuka tab web browser terlebih dahulu. Anda cukup mencarinya dari perangkat, dan PWA akan diluncurkan melalui taskbar, dock, shelf, atau homescreen perangkat Anda.
Selain itu, Anda dapat mempergunakan app switcher untuk beralih dari satu aplikasi ke aplikasi yang lain sehingga Anda dapat merasakan bahwa PWA bekerja seperti aplikasi native yang Anda unduh dan instal di perangkat.
- Re-engageable : meningkatkan keterlibatan dengan pengguna karena memiliki kemampuan untuk mengirim notifikasi pemberitahuan ketika ada informasi atau konten baru.
- Responsive : dapat berfungsi dengan baik di perangkat apapun dengan berbagai ukuran layar.
- Safe : menggunakan protokol HTTPS sehingga dapat menghindari akses dari pihak yang tidak sah.
Contoh-contoh PWA
Sudah banyak perusahaan-perusahaan besar yang sukses dengan menghadirkan teknologi PWA. LOGIQUE sendiri sampai saat ini juga sudah banyak mengembangkan teknologi PWA untuk beragam bidang industri. Berikut beberapa di antaranya.
VIP PLAZA
VIP Plaza merupakan salah satu perusahaan besar yang bergerak pada bidang fashion. Perusahaan ini mengembangkan teknologi PWA untuk memberikan kemudahan pada pelanggannya ketika mencari kebutuhan yang mereka cari seperti pakaian, sepatu, jam tangan, aksesori, dan lain-lain.
Dengan Progressive Web App, pelanggan VIP Plaza dapat berbelanja dengan mudah langsung dari perangkat selulernya. Pelanggan juga tidak perlu menginstal PWA yang mana dapat membuat performa smartphone menurun karena dapat diakses dengan mudah melalui web browser.
Setelah sistem PWA ini dikembangkan, VIP Plaza memperoleh peningkatan jumlah visitor. Selain itu, keuntungan bisnis juga mengalami peningkatan karena pengaplikasian teknologi ini.
Klikhoreca
Contoh PWA selanjutnya adalah Klikhoreca. PWA milik perusahaan PT. Sinar Horeca Sukses juga dikembangkan oleh LOGIQUE.
Klikhoreca merupakan PWA yang menyediakan beragam kebutuhan untuk memasak, mulai dari seafood mentah, sayur, buah, bumbu dapur, koe, roti, daging, dan lain-lain. Sebelumnya, perusahaan ini beroperasi secara offline, namun melihat perkembangan teknologi maka akhirnya perusahaan mengikuti tren pasar yang sedang berkembag dengan menyediakan PWA untuk berbelanja online.
Selain dapat memudahkan pelanggan untuk mencari kebutuhan dapur, sistem PWA Klikhoreca juga dipergunakan untuk menjangkau target pasar yang lebih luas. Karena dapat diakses dengan mudah baik melalui perangkat seluler atau pun desktop, siapa saja dapat mengakses dan mempergunakannya untuk membeli beragam kebutuhan memasak. Dari pengembangan PWA, Klikhoreca memperoleh lebih banyak kunjungan pada websitenya serta conversi yang lebih tinggi daripada sebelumnya.
Starbucks
Siapa yang tidak mengenal Starbucks? Perusahaan ini memiliki kedai kopi terbesar di dunia. Untuk meningkatkan layanannya, pada tahun 2017 Starbuck meluncurkan Progressive Web App.
Melalui sistem ini, pelanggan dapat melihat menu, memesan kopi, mengetahui informasi nutrisi, menemukan store di lokasi pelanggan, dan masih banyak lagi. Dengan beragam kemudahan tersebut, setelah 1 tahun PWA diluncurkan, Starbuck menginformasikan bahwa ada peningkatan 2x lipat lebih besar untuk pengguna aktif harian. Pelanggan banyak yang melakukan pemesanan melalui desktop dengan kecepatan yang hampir sama dengan browser di seluler.
Selain itu, PWA Starbuck juga tidak membutuhkan data storage yang kecil yaitu sekitar 233 KB. Berbeda dengan aplikasi iOS yang membutuhkan kapasitas sebesar 148 MB sedangkan di Android membutuhkan kapasitas sebesar 6.8 MB.
Flipkart Lite
Situs web e-commerce yang berbasis di India bernama Flipkart memperoleh tingkat konversi 70% lebih besar setelah mengaplikasikan PWA. Karena sebagian besar pengguna Flipkart memiliki koneksi internet yang buruk, maka menghadirkan PWA merupakan solusi yang tepat.
Selain itu, aplikasi PWA dari Flipkart juga menghasilkan beberapa keuntungan lain untuk perusahaannya, yaitu :
- re-engagement 40% lebih tinggi
- pelanggan 3 kali lebih banyak menggunakan PWA daripada aplikasi native
- sebesar 60% pelanggan yang sebelumnya meng-uninstal aplikasi native kembali mengakses layanan Flipkart melalui PWA yang mereka kembangkan.
Twitter meluncurkan PWA pada tahun 2017. Sebagian besar pengguna Twitter adalah pengguna seluler, sehingga PWA dapat menjadi salah satu solusi yang baik agar penggunaannya tidak mengurangi performa smartphone yang digunakan.
PWA milik Twitter ini memiliki fitur push notifications, dapat diakses ketika offline, serta dapat ditambahkan pada halaman home screen. Dengan kemampuan tersebut, Twitter memperoleh peningkatan sebanyak 65% pada halaman setiap sesi, peningkatan 75% untuk Tweet sent, dan bounce rate yang berkurang sebanyak 20%.
Baca Juga: 3 Macam Aplikasi Mobile : Native, Web, dan Hybrid
5 Keunggulan dan Kekurangan PWA
Keunggulan PWA
1. Mendapat lebih banyak pengguna
Perusahaan yang hanya mengembangkan aplikasi native dapat memperoleh lebih banyak user dengan menyediakan PWA. Alasannya, PWA dapat ditemukan di halaman pencari Google, pengguna tidak perlu menginstall aplikasi untuk menggunakannya, serta dapat diakses dengan koneksi internet yang buruk atau bahkan secara offline.
Selain itu, karena PWA berbentuk situs web, maka Anda dapat melakukan optimasi SEO agar lebih mudah ditemukan oleh pelanggan Anda.Dengan beberapa kelebihan tersebut, peluang untuk mendapatkan user tentu akan lebih tinggi daripada aplikasi native biasa.
2. Meningkatkan konversi
Sudah banyak perusahaan yang mengembangkan PWA dan berhasil memperoleh konversi yang lebih tinggi. Salah satunya seperti perusahaan Alibaba yang mampu meningkatkan konversi sekitar 76 % dengan PWA karena user tidak perlu mengunduh aplikasi.
Selain itu, PWA juga memungkinkan perusahaan untuk mengirim notifikasi atau pemberitahuan menarik untuk penggunanya. Seperti info produk terbaru, diskon, promo, atau yang lain. Dengan demikian, pengguna akan lebih mudah untuk menerima penawaran dari perusahaan sehingga konversi yang dihasilkan jauh lebih tinggi.
3. Tidak perlu instalasi
Aplikasi native pada umumnya perlu diunduh dan dipasang terlebih dahulu dari App Store. PWA bekerja tanpa instalasi dan dapat dibagikan dengan orang lain melalui URL. Jadi, Anda tidak perlu meng-submit PWA ke dalam app store. Meskipun tidak membutuhkan instalasi, namun Anda dapat menambahkan PWA ke layar homescreen perangkat menggunakan fungsi add-to-home.
4. Membutuhkan sedikit ruang penyimpanan
Aplikasi native biasanya membutuhkan data store yang besar ketika diinstal di perangkat. Meskipun user ingin menggunakan aplikasi tersebut, namun jika perangkat tidak memiliki ruang yang cukup, aplikasi tetap tidak akan digunakan. Berbeda dengan PWA yang membutuhkan sedikit ruang penyimpanan sehingga tidak akan menurunkan performa smartphone yang digunakan.
Selain itu, PWA menggunakan service workers untuk mengelola requests, caching, dan penyimpanan data shell. Hasilnya, aplikasi akan dimuat lebih cepat daripada aplikasi native.
5. Lebih hemat biaya dan tenaga
PWA dapat menghemat waktu, uang, dan tenaga Anda. Sistem PWA dikembangkan hanya sekali, sedangkan aplikasi native memerlukan dua pengembangan yang dilakukan secara terpisah yaitu untuk iOS dan untuk Android.
Kekurangan PWA
1. Beberapa fitur tidak tersedia di iOS
Meskipun PWA support multiple OS, namun PWA juga memiliki kelemahan. Ketika digunakan di iOS, fitur add to home screen dan push notification tidak dapat ditampilkan. Meskipun performa PWA di iOS sudah semakin ditingkatkan, namun fungsi yang disediakan masih kalah baik dengan OS Android.
2. Tidak memiliki fitur dan kinerja sebaik aplikasi native
PWA memiliki fungsi yang terbatas. Jika dibandingkan dengan aplikasi native, PWA memiliki fitur yang jauh lebih sedikit. PWA juga tidak memiliki akses ke fitur perangkat seluler sebanyak aplikasi native.
Berbicara masalah kinerja, aplikasi native juga memiliki kinerja terbaik karena aplikasi tersebut secara khusus dikembangkan untuk digunakan pada perangkat tertentu. Oleh karena itu, aplikasi native dapat memanfaatkan alat dan teknologi khusus yang disediakan oleh OS target.
3. UX yang tidak sebaik aplikasi native
Seperti yang dijelaskan sebelumnya, PWA memiliki keterbatasan fitur terutama untuk pengguna iOS. Hal tersebut tentu akan memberi pengaruh pada user experience atau pengalaman pengguna yang kurang optimal.
Dragging, pinching, atau swapping merupakan bagian dari UX yang baik, namun sejauh ini PWA belum dapat memberikan pengalaman yang serupa dengan aplikasi native.
4. Tidak dapat ditemukan di App Store
Point ini sebenarnya bisa menjadi keuntungan dan kerugian. Di satu sisi, pihak pengembangn tidak perlu meng-submit PWA ke app store untuk bisa digunakan pelangganya. Namun, perilaku sebagian besar pengguna masih mencari aplikasi yang diinginkan melalui app store. Karena PWA tidak didistribusikan melalui app store, hal ini bisa menjadi tantangan untuk bisnis Anda.
5. Teknologi baru
Progressive web app pertama kali diperkenalkan pada tahun 2015. Jadi, untuk saat ini teknologi PWA dapat dikatakan relatif baru. Masih sedikit developer yang memiliki skill untuk mengembangkan teknologi ini.
Proses Pengembangan PWA
1. Sediakan PWA menggunakan Https
Service workers dan teknologi lain dalam PWA hanya berfungsi dengan koneksi yang aman (protokol Https). Anda dapat membeli sertifikat SSL dari registrar domain, kemudian mengkonfigurasinya melalui layanan hosting Anda.
2. Buat application shell
Application shell dimuat pertama kali ketika PWA diakses. Jadi, application shell harus ada di seluruh index HTML document.
3. Register service worker
Service worker merupakan file Javascript yang berjalan secara terpisah dari browser utama dan berfungsi untuk membuka akses ke fitur yang tidak memerlukan halaman web atau interaksi pengguna.
Untuk register, Anda membutuhkan navigator.serviceWorker.register() contohnya :
function registerServiceWorker() {
return navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Service worker successfully registered.'); return registration; }) .catch(function(err) { console.error('Unable to register service worker.', err); }); }
4. Tambahkan fitur push notification
Service worker memungkinkan pengguna untuk menerima push notification melalui web Push API. Untuk mengaksesnya Anda dapat menggunakan self.registration.pushManager yang ada di dalam file service worker.
function subscribeUserToPush() { return navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { const subscribeOptions = { userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array( 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U' ) }; return registration.pushManager.subscribe(subscribeOptions); }) .then(function(pushSubscription) { console.log('Received PushSubscription: ', JSON.stringify(pushSubscription)); return pushSubscription; }); }
- Tambahkan web app manifest
Agar aplikasi Anda dapat dipasang, Anda perlu menyertakan manifest.json. File JSON akan mendeskripsikan informasi seperti nama aplikasi, deskripsi, gambar ikon layar utama, splash screen, viewport, dll.
Contoh manifest.json
{ "short_name": "Chat", "name": "Chat", "icons": [ { "src":"/assets/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/?utm_source=homescreen", "background_color": "#e05a47", "theme_color": "#e05a47", "display": "standalone" }
6. Konfigurasikan prompt instalasi
Chrome akan secara otomatis meminta user untuk menginstal aplikasi ke layar utama ketika pengguna sudah dua kali mengunjungi situs dengan jarak lima menit di antara kunjungan. Namun jika Anda ingin menampilkan perintah penginstalan dalam situasi tertentu, Anda dapat mencegat beforeinstallprompt event dan menerapkannya ketika Anda mau. Contohnya seperti :
window.addEventListener('beforeinstallprompt', e => { console.log('beforeinstallprompt Event fired'); e.preventDefault(); // Stash the event so it can be triggered later. this.deferredPrompt = e; return false; }); // When you want to trigger prompt: this.deferredPrompt.prompt(); this.deferredPrompt.userChoice.then(choice => { console.log(choice); }); this.deferredPrompt = null;
Baca Juga: Frameworks Populer untuk Membangun Progressive Web Apps (PWA)
Progressive web app memang merupakan teknologi baru. Namun sudah banyak perusahan-perusahaan besar yang meraih kesuksesan dengan mengembangkan sistem tersebut. Terlepas dari beberapa kekurangan, PWA dapat menjadi solusi bagi sebuah bisnis untuk menjangkau pelanggan secara lebih luas.
Layanan Logique Digital Indonesia
Logique Digital Indonesia adalah perusahaan web developer yang berlokasi di Jakarta. Hubungi kami untuk pengembangan sistem yang komprehensif.
