Progressive Web App — Aplikasi Web Yang Bisa Di Install — Bagian 1

Salah satu pengalaman yang sangat memudahkan pengguna aplikasi native dalam mengakses aplikasi yang mereka ingin gunakan adalah kemudahannya dalam men-launch aplikasi tersebut dengan semudah men-tap icon aplikasi di layar home smart phone mereka dan aplikasi langsung siap digunakan. Bandingkan dengan aplikasi web yang harus melakukan tap beberapa kali karena selain men-tap icon browser di layar home, tentu juga harus mengetikkan alamat URL dari aplikasi web tersebut. Ini yang membuat retention dan tingkat interaktifitas aplikasi web terkadang lebih kecil dibandingkan aplikasi native.

Berkaca dari contoh di atas, maka komunitas web mencoba mencari cara bagaimana memberikan pengalaman yang sama, di mana pengguna dapat dengan mudah mengakses aplikasi web semudah melakukan sekali tap di layar smartphone. Salah satu caranya adalah adanya tombol add to home screen (A2HS) yang bila di-tap maka akan membuat icon launcher di layar smartphone pengguna. Ini tidak cuma ada di Android, tapi juga tersedia di iOS.

Tapi ternyata tidak semua pengguna bisa melihat adanya tombol tersebut sehingga pengguna smartphone masih mengeluhkan repotnya harus mengetikkan alamat URL berulang kali setiap ingin mengakses aplikasi web yang mereka gunakan. Karena memang posisinya tidak langsung tampak di kalau di Android, atau icon di iOS masih kurang familiar buat pengguna. Dari situ mulailah dikembangkan semacam dialog yang akan menanyakan apakah ingin menambahkan akses langsung di layar smartphone dengan icon launcher, bila pengguna mengakses suatu aplikasi web cukup sering dan memenuhi kriteria tertentu.

Syarat Agar Bisa Menampilkan Add To Homescreen

Agar website tersebut bisa memunculkan dialog add to homescreen maka diperlukan beberapa syarat yang harus dipenuhi:

1. Memiliki file web manifest
2. Memiliki service worker teregisterasi
3. Diakses di protokol aman HTTPS
4. Memenuhi tingkat interaktifitas tertentu dengan halaman web tersebut (ini selalu berubah dan berbeda di tiap browser)

Bila syarat di atas terpenuhi maka kita bisa menempatkan icon launcher web tersebut di home screen kita baik melalui menu add to homescreen di browser atau muncul secara otomatis berdasarkan tingkat interaktifitas pengguna.

Untuk menguji coba apakah website kalian sudah bisa menampilkan dialog add to homescreen, bisa menggunakan ChomeDevTool dengan masuk ke tab application dan mengklik tombol add to homescreen seperti di gambar ini.

Setelah aplikasi dapat diakses langsung dari layar smartphone langsung tanpa mengetikkan alamat URL, ternyata sebagian besar pengguna berekspektasi bahwa layar aplikas web yang dijalankan tersebut akan muncul tanpa location bar selayaknya sebuah aplikasi native, bukan seperti browser.

Web Application Manifest

Untuk menentukan apakah sebuah aplikasi web yang sudah terpasang di layar smartphone bisa muncul full screen tanpa location bar maka diperlukan sebuah manifest file yang mendeskripsikan bagaimana aplikasi harus ditampilkan pada saat dijalankan dari icon launcher, bukan dari mengetikkan alamat di browser. Manifest file ini dinamakan Application Manifest dengan format JSON file yang isinya kurang lebih seperti di bawah ini.

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": "/app",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

Di contoh di atas ada bagian start_url:"/app" yang menjadi pembeda antara aplikasi yang dijalankan dari browser dengan aplikasi yang dijalankan dengan tap di icon di home screen smartphone. Dengan demikian kalian bisa mengkontrol dan mencatat setiap akses dari launcher misalnya untuk keperluan analytics.

Hal Yang Perlu Diperhatikan Sebelum Implementasi Add To Homescreen

Kebanyakan developer akan mengeksploitasi fungsi dan menggunakan tanpa memikirkan bagaimana pengguna menggunakannya. Salah satu contohnya adalah push notification yang diminta oleh hampir sebagian besar website modern.

Hal ini sangat mengganggu bila kita tidak ingin menerima push notification tapi setiap website meminta secara otomatis pada saat website mereka dibuka pertama kali. Bahkan beberapa mulai mengakali agar tidak terblok dengan tetap memunculkan custom dialog pertanyaan apakah mau menerima push notification sebelum melakukan trigger request push notification browser. Hal ini karena di browser begitu pengguna melakukan block pada website tersebut maka kecil kemungkinan dia akan di-unblock lagi.

Dampak push notification inilah yang ingin dihindari oleh add to homescreen, karena kita tidak ingin setiap kita membuka website langsung muncul tawaran install seperti iklan pop-up yang menjadi hal wajib di website berita Indonesia. Padahal harusnya setiap penawaran yang dilakukan oleh sebuah website harusnya berdasarkan konteks tertentu yang kemungkinan besar user memang perlu apa yang kita tawarkan.

Contoh yang baik misalnya Twitter Lite yang menawarkan untuk mengaktifkan push notification hanya pada saat kita membuka halaman atau tab notification, bukan pada saat kita membuka Twitter lite. Selain itu memberikan konteks yang tepat kepada pengguna apa manfaat buat mereka bila mengaktifkan push notification.

Bila melihat dialog window add to homescreen default di atas, maka jelas bahwa add to homescreen tidak memiliki konteks yang baik. Tidak ada alasan yang diberikan kenapa pengguna sebaiknya add to homescreen. Sehingga pengguna yang awam akan bingung apa yang ditawarkan. Berikut adalah bagaimana memberikan informasi konteks untuk pengguna.

Lalu bagaimana mengontrol flow dan memberikan konteks pada penawaran add to homescreen ini? Sedangkan tidak ada API khusus untuk melakukan pemanggilan manual dialog add to homescreen. Tunggu di bagian 2 yang akan membahas cara implementasinya.

Progressive Web App — Aplikasi Web Yang Bisa Di Install — Bagian 1 was originally published in WWWID on Medium, where people are continuing the conversation by highlighting and responding to this story.