Progressive Web Apps, Mulai Dari Mana?

Banyak orang salah kaprah pada saat berbicara tentang Progressive Web Apps (PWA), bahwa untuk bisa memiliki PWA harus Single Page Application (SPA), atau harus menggunakan framework modern seperti React, Angular, Polymer, dan lainnya. Sehingga banyak developer yang merasa bahwa mereka tidak bisa menerapkan PWA karena mereka masih menggunakan server rendered framework seperti PHP atau Ruby Framework. Padahal berbicara PWA, tentunya yang utama adalah kata progressive di mana maksud sebenarnya adalah peningkatan pengalaman user secara progresif atau bertahap. Nah pertanyaannya mulai dari mana sih kalau ingin membuat sebuah aplikasi PWA? Tulisan ini semoga bisa membantu kalian untuk menjawabnya.

Keamanan HTTPS Adalah Pondasi Dasar

Keamanan di web merupakan isu yang cukup besar karena banyaknya phising, content hijacking, dan isu keamanan lainnya. Sebagian besar isu ini mengeksploitasi kemudahan web yang sangat mudah diakses. Hanya dengan URL, kita bisa mengakses tanpa perlu meng-install apapun di perangkat kita. Dengan itu, penggunaan HTTPS adalah wajib di sisi web server, karena hampir semua fungsi dari PWA cuma bisa berjalan di HTTPS. Dan sekarang dengan adanya SSL certificate gratis, maka tidak ada alasan lagi untuk tidak menggunakan HTTPS di web kalian. Tentu ini juga panggilan buat para provider hosting untuk bisa menyediakan SSL gratis di semua server mereka. Tanpa dukungan pihak hosting provider maka web yang aman akan tetap menjadi isu.

Meningkatkan pengalaman pengguna secara bertahap

Skema komponen fungsi PWA.

Setelah memiliki pondasi, baru kita bisa memulai untuk meningkatkan pengalaman pengguna web kita secara bertahap. Dan tentu tidak semua harus didukung, tapi kita perlu memilih berdasarkan jenis aplikasi web kita. PWA bukanlah teknologi yang semua komponen harus dibuat. Komponen PWA yang ada di bawah ini bersifat modular, jadi bisa saja beberapa komponen tidak digunakan, atau cuma mengimplementasi 2 atau 3 komponen saja. Dan berikut adalah tahapan yang kalian bisa coba.

1. Siap untuk PWA

Yang pertama adalah apakah website kalian sudah siap untuk PWA. Karena sebelum kita mencoba menerapkan fungsi PWA maka website kita harus siap untuk dioptimasi. Dua checklist yang saya rekomendasikan untuk memastikan website kalian siap untuk PWA adalah:

1. Menggunakan protokol HTTPS. Tanpa HTTPS maka hampir sebagian besar komponen PWA tidak akan bisa diimplementasikan.
2. Menggunakan App Shell Architecture, ini merupakan hal yang paling susah karena terkadang memerlukan penulisan ulang aplikasi. Tapi menurut saya, PWA tetap masih bisa diimplementasi walaupun ada beberapa hal yang terbatasi tanpa App Shell Architecture ini.

2. Tingkatkan kecepatan loading dan respon

Kecepatan loading dan respon menurut saya adalah yang paling penting dan harus menjadi langkah pertama untuk optimalisasi PWA. Tanpa kecepatan maka pengguna akan meninggalkan website kalian tanpa mencoba pengalaman lainnya. Bahkan data yang ada menyebutkan 3 detik website tidak tampil, 53% pengguna akan pergi. Buat apa membuat sesuatu sedemikian baik tapi akhirnya orang tidak memakai karena terlalu lambat.

Dengan loading yang cepat maka pengguna akan dapat merasakan value yang kalian coba tawarkan dan selanjutnya baru menentukan apakah kalian bisa membuat mereka tinggal atau pergi.

Source: DoubleClick — The need for mobile speed, September 2016.

Untuk meningkatkan kecepatan website, kalian bisa melihat beberapa petunjuk di sini.

3. Memasang service worker untuk dukungan offline dan peningkatan kecepatan serta pengalaman extra

Service worker adalah komponen yang bisa diprogram dan berada di antara browser dan web server. Dengan memasang service worker maka kita bisa melakukan cache pada resources yang dibutuhkan dan juga memungkinkan aplikasi kita tetap bisa diakses dengan baik walaupun di jaringan yang tidak stabil atau bahkan offline.

Tujuannya adalah untuk kondisi pengguna yang sudah merasakan value yang kalian tawarkan dan mereka merasa ingin terus menggunakannya. Maka untuk pengguna seperti ini, mereka harus bisa merasakan pengalaman dari value yang ditawarkan lebih baik lagi. Seperti aplikasi tetap responsif di kondisi apapun.

Service worker juga memungkinkan kita untuk melakukan fungsi ekstra seperti background sync di mana aplikasi bisa melakukan sinkronisasi data pada saat kondisi kembali online walaupun website tidak sedang dibuka, dan push notification untuk mengirimkan notifikasi kepada pengguna atau menjalankan fungsi tertentu di aplikasi.

4. Push notification untuk mengingatkan value dan membawa pengguna kembali

Setelah pengguna betah dengan value yang ditawarkan, maka selanjutnya adalah bagaimana untuk mengingatkan mereka akan value kalian. Salah satu caranya tentu dengan mengingatkan mereka. Dan media yang bisa dicoba selain email adalah dengan push notification.

Tapi yang ini kalian harus berhati-hati jangan sampai terlalu sering mengingatkan dan akhirnya akan terganggu oleh notifikasi yang terlalu sering. Pastikan notifikasi yang kalian kirimkan memiliki kriteria agar pengguna tidak menganggap notifikasi kalian sebagai spam pengganggu. Karena hasil riset yang ada menunjukkan notifikasi adalah salah satu alasan sebuah aplikasi dihapus. Dan di web, bila notifikasi kalian diblok maka kemungkinan besar kalian akan diblok selamanya hingga pengguna mengganti perangkat.

Source: http://www.uxbooth.com/articles/rules-for-creating-perfect-push-notifications/

5. Add to homescreen untuk kemudahan akses

Setelah secara kecepatan akses sudah baik dan value sudah diterima dengan baik, selanjutnya adalah memudahkan pengguna untuk mengakses aplikasi kita semudah memilih icon aplikasi di layar smart phone. Untuk itu PWA sudah dilengkapi dengan komponen add to home screen di mana aplikasi webkalian akan menawarkan opsi untuk menyimpan icon aplikasi kalian di home screen perangkat mereka.

Add to home screen.

Cara agar tawaran ke pengguna bisa muncul adalah kalian harus melengkapi aplikasi kalian dengan file manifest lengkap dengan icon dan meta datalainnya. User yang merasakan value dan suka maka akan mencoba menggunakan aplikasi kalian lagi. Dengan memberikan kemudahan pada mereka untuk mengakses aplikasi kalian maka pengalaman pengguna akan lebih baik.

6. Memudahkan pengguna untuk registrasi dan masuk ke website kalian

Membuat user mendaftarkan diri mereka adalah salah satu bagian yang paling susah. Kendala pertama tentu memberikan alasan untuk mendaftarkan diri, kenapa mereka harus mendaftarkan diri mereka. Selanjutnya adalah adalah memudahkan usaha yang diperlukan untuk mendaftar atau masuk ke website kalian.

Dengan memudahkan pengguna mendaftar dan masuk ke website kalian maka kalian bisa lebih mudah dalam mempelajari tingkah laku mereka dan bisa mengetahui bagaimana kalian bisa memberikan value yang lebih baik lagi untuk pengguna kalian.

Beberapa cara untuk memudahkan pengguna untuk mendaftarkan diri dan masuk ke website kalian adalah pengaturan credentials, masuk dengan akun social media seperti Facebook atau Twitter, serta Google one-tap sign-up and auto sign-in.

7. Memudahkan proses pembayaran

Bila kalian adalah startup atau layanan yang memerlukan proses pembayaran, salah satu isu terbesar di mobile adalah kompleksitas pembayaran. Banyaknya informasi yang harus dimasukkan dengan layar dan papan ketik terbatas membuat orang kebanyakan jadi malas untuk melanjutkan.

Konversi pembayaran di mobile masih di bawah desktop padahal dari sisi trafik mobile masih lebih besar dari desktop. Salah satu yang kalian bisa lakukan implementasi auto fill checkout form atau Payment Request API untuk memudah pembayaran. Dua cara tersebut mampu mengurangi usaha yang diperlukan oleh pengguna untuk menyelesaikan proses pembayaran.

Penutup

Itulah 7 langkah yang kalian bisa coba untuk memberikan pengalaman progresif atau bertahap kepada pengguna kalian di web. Dari 7 langkah tersebut, tahapan 1–3 merupakan yang paling prioritas karena bertujuan untuk memberikan kemudahan untuk pengguna bisa mengenal value yang kalian tawarkan. Dan tidak harus sekaligus, kalian bisa mengimplementasikan komponen tersebut secara bertahap. Setelah itu kalian bisa melihat tergantung dari kebutuhan pengguna kalian.