Mengenal PWA – Progressive Web App untuk Website Lebih Cepat

Kunci sukses online adalah kecepatan. Tak terkecuali ketika melakukan pengembangan website atau web development yang akan menyasar pengguna mobile.

Sebab, akses yang lambat hanya akan membuat pengunjung meninggalkan website Anda. Salah satu solusi untuk membuat akses website lebih cepat adalah PWA (Progressive Web Apps).

Beberapa dari Anda mungkin baru mendengar istilah ini. Jangan khawatir. Kali ini kami akan membahas tentang PWA berikut berbagai kelebihan yang dimiliki. 

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.

Beberapa contoh website yang menggunakan PWA adalah Twitter, Pinterest, OLX dan Trivago.

PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet. 

Lalu, apakah perbedaan ketiganya? Berikut ini karakteristik yang dimiliki oleh masing-masing aplikasi:

Web App

• Dibuat dengan mengandalkan browser dan cross platform
• Update berjalan otomatis
• Hanya berjalan dalam kondisi online
• Fitur terbatas
• Biaya development murah

Aplikasi Mobile

• Dibuat untuk platform tertentu menggunakan bahasa khusus, seperti Swift untuk iOS dan Java untuk Android
• Update harus dilakukan manual
• Bisa berjalan dalam kondisi offline
• Fitur lengkap yang menjamin kenyamanan pengguna
• Biaya development cenderung mahal

PWA

• Dibuat mengandalkan browser dan cross platform
• Update berjalan otomatis
• Bisa berjalan dalam kondisi offline
• Menghadirkan UX yang lebih intuitif dari web app
• Biaya development murah

Setelah mengetahui beberapa perbedaan di atas, Anda tentu lebih paham tentang PWA. Bahkan, Anda pun bisa membuat PWA sendiri. Akan kami jelaskan pada bagian selanjutnya.

Contoh Progressive Web Apps yang Bisa Anda Jadikan Referensi

Tahukah Anda? Sudah banyak juga lho brand yang menggunakan PWA. Untuk membantu Anda memahami penerapannya, kami akan menunjukkan beberapa contoh PWA yang cukup populer:

1. OLX

Pernah berbelanja di OLX? Selain bisa melakukannya via aplikasi, Anda juga bisa lho 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. Selengkapnya tentang cache bisa Anda baca di artikel apa itu 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.

Apa Saja Kelebihan PWA?

Google menyebut kelebihan PWA dengan istilah FIRE (Fast, Integrated, Reliable, and Engaging). Cepat, Terintegrasi, Bisa Diandalkan dan Menarik.  

Secara garis besar, memang demikian. Namun, bagaimana penjelasan lebih lengkapnya? Berikut ini kelebihan PWA dilihat dari sisi pemilik website maupun pengguna aplikasi. 

1. Hemat Biaya Produksi

Mengembangkan sebuah Progressive Web App tidak memerlukan biaya besar. 

Ibarat pepatah: “sekali merengkuh dayung, dua tiga pulau terlampaui.” Anda cukup mengembangkan sebuah website dengan metode progresif yang ditawarkan PWA. Hasilnya, sebuah aplikasi yang bisa digunakan di semua perangkat dan sistem aplikasi.

Hal ini tentu akan membutuhkan biaya produksi yang lebih kecil baik saat membangun ataupun melakukan update. 

2. Kemudahan Digunakan di Berbagai Perangkat

Membangun PWA memungkinkan Anda untuk merancang tampilan aplikasi yang seragam di berbagai perangkat dengan berbagai ukuran layar baik ponsel maupun tablet. 

Selain itu, Anda bisa mengatur fungsi yang konsisten meskipun digunakan pada sistem operasi yang berbeda, seperti iOS, Android, ataupun Windows. 

Di sisi lain, pengguna juga menjadi terbiasa jika harus mengakses PWA menggunakan perangkat yang berbeda. Hal ini sangat penting. Sebab, 94% pengguna internet di Indonesia mengakses informasi melalui perangkat mobile.

3. Tidak Bergantung App Store

Anda tidak lagi bergantung kepada AppStore seperti Google Play Store, Apple Store, dan Windows Store ketika akan mempublikasikan aplikasi Anda.  

Dari sisi bisnis, hal ini cukup melegakan. Sebab, Anda tidak perlu mengeluarkan biaya untuk registrasi atau berlangganan. 

Seperti Anda ketahui, biaya langganan tahunan di Apple Store adalah sebesar $99. Sementara itu, biaya registrasi seumur hidup di Google Play Store dipatok di harga $25.

Selain itu, Anda bisa lebih leluasa untuk mengembangkan aplikasi tersebut tanpa terjerat oleh persyaratan minimal yang harus dipenuhi. Jadi, Anda cukup fokus pada tampilan dan fungsi aplikasi yang optimal.

4. Instalasi Cepat

Kelebihan lain dari PWA adalah proses instalasi yang cepat. 

Anda tidak membayangkan proses instalasi yang didahului dengan proses unduh, install, dan pemberian hak akses, bukan?

Ya, pengguna Anda memang tak perlu melakukan instalasi yang berbelit layaknya aplikasi mobile. Mereka cukup menambahkan website Anda ke HomeScreen. Maka, aplikasi akan terpasang otomatis.

5. Berfungsi Layaknya Aplikasi Mobile

Pengguna mobile lebih suka mengakses informasi melalui aplikasi dibanding browser. Itulah alasan jumlah aplikasi yang diunduh pengguna selalu meningkat tiap tahun.

Pada prakteknya, sangat jarang pengguna mobile mengakses YouTube maupun Maps melalui browser, bukan?

Hal ini tentu karena user experience yang ditawarkan aplikasi mobile lebih menyenangkan. Mulai dari tampilan yang atraktif hingga push notifications yang bisa memberikan update adanya informasi terbaru.

Kemampuan PWA menghadirkan pengalaman seperti aplikasi mobile sangat bermanfaat untuk meningkatkan engagement. Contohnya, OLX mencapai kenaikan engagement 250% setelah menggunakan PWA.

6. Kinerja Apik

Sebuah PWA memiliki service workers yang bertugas mengelola cache aset website dengan efisien. Hasilnya, aplikasi berjalan dengan cepat sehingga meningkatkan kenyamaman pengguna. 

Bahkan, Uber mengklaim bahwa PWA adalah alasan mengapa mereka mampu berjalan di jaringan 2G dan terbuka sempurna sebelum 3 detik!

Hampir semua bisnis memang berlomba menjadikan website mereka lebih baik. Sekali lagi, kecepatan akses sebuah website sangat penting. Sebab, 57% pengguna akan meninggalkan sebuah website jika loading-nya lebih dari 3 detik! 

Baca Juga: Apa Itu LiteSpeed Web Server?

7. Update Otomatis

Saat menggunakan PWA, pengguna tidak perlu pusing tentang update aplikasi. Alasannya,  PWA melakukan update secara otomatis tiap kali pengguna mengakses aplikasi. 

Pengguna tentu akan merasa senang karena tidak direpotkan dengan update manual seperti pada aplikasi mobile. 

Di sisi lain, Anda juga lebih mudah memastikan pengguna mengakses aplikasi menggunakan versi terbaru. Hal ini diperlukan untuk menjamin keamanan dan kenyamanan pengguna aplikasi Anda.

Dari sisi pemilik website, Anda lebih mudah dalam mengatur penggunaan versi terbaru. Bagi pengguna, update yang berjalan otomatis tentu lebih disukai.

8. Bisa Berjalan Tanpa Jaringan Internet

Berbeda dengan web app biasa yang akan menampilkan gambar Dinosaurus saat offline, PWA mampu berjalan ketika offline.

Katakanlah pengunjung toko online Anda baru saja melihat beberapa katolog produk, lalu koneksi internet tiba-tiba putus. Dengan PWA, semua produk yang sudah dilihat akan disimpan di cache. Pengunjung tersebut masih bisa melihat beberapa produk yang diakses sebelumnya. 

Hal ini bisa memberikan kesempatan untuk menimbang produk mana yang akan dibeli. Ketika, internet sudah aktif kembali, ia bisa melanjutkan ke pembelian. 

Hal tersebut bisa bermanfaat bagi beragam jenis bisnis. Salah satunya, kesuksesan sebuah resort di Mexico saat meningkatkan conversion rate mereka menjadi 53% ketika menggunakan PWA.

9. Ramah Storage

Pengguna tak akan pernah ketakutan kehabisan storage saat menggunakan PWA. Alasannya, progressive web app berukuran sangat kecil jika dibandingkan dengan aplikasi mobile.

Sebagai contoh, aplikasi Pinterest hanya berukuran 688 KB saja untuk versi PWA-nya. Dengan ukuran yang kecil, tentu pengguna tidak akan ragu menggunakannya karena tidak membebani kinerja perangkat.  

10. Ramah Bandwidth

Berapa yang dibutuhkan untuk mengunduh aplikasi mobile Twitter? 23,5 MB. Jika menggunakan PWA, Anda hanya memerlukan 600KB saja.

Tidak hanya itu, interaksi ketika menggunakan PWA pun ramah bandwidth karena hadirnya optimasi gambar yang memangkas kebutuhan data hingga 70%. 

Bahkan, Twitter juga memiliki data saver mode yang memungkinkan Anda menentukan aset website mana yang ingin diunduh dan disimpan. 

11. Keamanan yang Terjamin

Kelebihan lain PWA adalah tingkat keamanan yang tinggi berkat protokol jaringan HTTPS yang digunakan. 

Seperti yang Anda ketahui, HTTPS menerapkan tiga lapis perlindungan ketika pengguna mengakses website Anda. Enkripsi data yang dilakukan juga penting untuk memastikan tidak ada penyalahgunaan informasi pribadi dari pengguna. 

Hal ini tentu penting bagi website yang memproses pembayaran seperti website bisnis. 

Bagaimana Membangun Sebuah PWA?

Membangun sebuah PWA tidaklah terlalu sulit. Anda cukup memenuhi ketentuan website yang baik lalu mengikuti tahapan cara membangun PWA. Berikut langkahnya:

1. Memastikan Website Anda PWA-Ready

Berbeda dengan aplikasi mobile, Anda tidak harus menunggu persetujuan Google dan Apple untuk mempublikasikan aplikasi Anda. 

Untuk membuat website Anda siap digunakan sebagai PWA, Anda cukup menggunakan Lighthouse. Aplikasi ini akan mengaudit website Anda apakah sudah sesuai dengan ketentuan penggunaan untuk PWA. 

Caranya sebagai berikut:

1. Akses Website Anda menggunakan Google Chrome.

2. Bukalah Developer Tools.

3. Pilih menu Audits.

4. Pilih Run Audits.

5. Hasilnya harus menunjukkan warna hijau pada kategori PWA.

2. Membuat Web App Manifest

Web App Manifest merupakan sebuah file JSON yang berisi berbagai informasi seperti nama website, ikon dan ukuran yang digunakan, warna default, halaman awal, orientasi layar dan splash screen.

Ada banyak contoh web app manifest yang bisa membantu Anda memahami langkah ini. Salah satunya dari website berikut.

3. Menambahkan Web App Manifest ke Template

Web App Manifest sebaiknya ditambahkan ke level terendah dari template aplikasi yang Anda buat supaya nampak oleh browser ketika proses instalasinya.

Sebagai contoh, Anda bisa menambahkan manifest tersebut pada bagian <head> template HTML Anda:

4. Membuat Service Worker

Service Worker adalah script yang dijalankan di balik layar. Secara fungsi, service worker bisa mendengarkan berbagai event, salah satunya Fetch Event. 

Hadirnya Service Worker memungkinkan adanya fitur yang berjalan tanpa interaksi pengguna seperti push notifications, auto synchronize, dan lainnya. 

Anda bisa menambahkan script service worker ke file index.html template Anda. Contohnya seperti terlihat pada website ini.  

5. Me-load Service Worker

Pastikan Anda me-load service worker yang sudah Anda buat agar berjalan sebagaimana mestinya.

Caranya, tambahkan script berikut pada bagian <body> file template HTML Anda:

Setelah proses ini, Anda bisa mengecek perubahan yang terjadi pada log di konsol browser Anda.

6.  Melakukan Deploy PWA

Setelah semua langkah di atas berhasil, saatnya melakukan deploy PWA Anda. Anda bebas memilih platform yang ingin Anda gunakan untuk tahapan ini, seperti Heroku atau Netlify. Kami juga menyediakan VPS untuk mendeploy projek PWA Anda. Setelah selesai, Anda bisa mencoba PWA yang telah dibuat.

Bagaimana Cara Kerja PWA?

Lalu, bagaimana sebuah PWA bekerja menghadirkan layanan layaknya aplikasi mobile?

Pada saat pertama kali pengguna mengakses website, service worker belum ada. Maka, service worker akan didaftarkan terlebih dahulu untuk menjalankan fungsi seperti dijelaskan di atas. Registrasi service worker ini secara otomatis membentuk service worker baru sekaligus mengaktifkan Event Install. 

Selanjutnya, saat service worker telah terpasang, konten app shell akan ditambahkan ke cache. App shell sendiri berisi berbagai resources yang dibutuhkan ketika sedang bekerja offline. Inilah yang berfungsi mengatur navigasi dari website pada interaksi selanjutnya.

Walaupun proses di atas bisa terjadi secara otomatis, sebenarnya pengaktifan service worker baru juga bisa dilakukan secara manual, menggunakan developer tool atau Service Worker API.

Lalu, setiap kali ada permintaan (request) setelah service worker terpasang, sebuah Fetch Event akan aktif dan lalu menampilkan konten yang diminta. App shell dengan resource lokal ditambah dengan konten dinamis akan membentuk sebuah halaman website yang lengkap.

Baca Juga: Mengenal NoSQL – Pengertian dan Kegunaannya

Ketika sebuah permintaan berhasil terselesaikan, service worker akan berada dalam posisi diam (idle) hingga perintah berikutnya. 

Pada prakteknya, pengguna tidak akan mengetahui proses yang berjalan tersebut karena berada di balik layar. 

Kita ambil contoh penggunaan PWA Twitter. Pertama kali, pengguna akan menyentuh ikon Twitter dari home screen. Lalu, aplikasi akan menampilkan tampilan default sesuai web app manifest yaitu halaman lini masa (timeline) Twitter.

Ketika mengakses ke salah satu menu, maka service worker akan melakukan pengecekan apakah sudah ada aset berupa gambar, text dan lainnya yang sudah tersimpan di cache. Jika ada, maka akan langsung ditampilkan. Jika, tidak maka akan langsung meminta server untuk memberikan data konten yang diminta. 

Cara Cek Status PWA di Sebuah Website

Setelah membuat PWA, bagaimana jika Anda ingin mengetahui status PWA pada website Anda?

Caranya sangatlah mudah. Dengan menggunakan Google Chrome, Anda bisa mengikuti langkah berikut:

1. Klik kanan pada halaman website yang ingin kamu cek, pilih Inspect:

2. Klik pada ikon tampilkan lebih lanjut (>>), pilih Application:

3. Pilih menu Service Worker, cek status apakah sudah berwarna hijau.

Jika status service worker is running dengan indikator hijau, artinya website tersebut sudah menerapkan PWA. 

Tertarik Menggunakan Progressive Web Apps?

Ternyata, telah banyak kemajuan teknologi yang bisa membantu Anda untuk melayani pengunjung Anda dengan lebih baik. Salah satunya adalah PWA (Progressive Web Apps).

Aplikasi yang menggabungkan kelebihan dari web app dan native app ini telah banyak digunakan oleh website terkenal di seluruh dunia. Hal ini tentu karena banyaknya manfaat yang ditawarkan, seperti telah kami ulas di atas.

Anda juga sudah memahami bagaimana cara kerja PWA dengan baik termasuk cara mengecek status PWA pada sebuah website. 

Tunggu apa lagi? Jadikan website Anda yang terbaik dengan memastikan akses yang cepat namun tetap memanjakan pengguna mobile dengan beragam fitur yang bermanfaat.