Melanjutkan tulisan sebelumnya terkait bagaimana sebuah Progressive Web App(PWA) bisa di-install, di tulisan ini kita ingin membahas bagaimana sebenarnya untuk implementasi di aplikasi web kita dan kira-kira hal seperti apa saja yang bisa kita lakukan.

Sebelum implementasi kita harus memastikan terlebih dahulu apakah memang kita membutuhkan implementasi A2HS(Add To Home Screen) ini. Beberapa pertanyaan yang mungkin perlu kita jawab adalah:

Native atau PWA?

Bila kita sudah memiliki aplikasi native di platform yang sama, baik Android atau iOS, apakah kita lebih ingin pengguna memasang PWA kita atau aplikasi native kita? Beberapa aplikasi seperti Twitter dan Instagram menggunakan PWA untuk mengakomodasi pengguna dengan perangkat berspesifikasi rendah yang memiliki kapasitas penyimpanan dan memori yang rendah. Sehingga memasang aplikasi native adalah sesuatu yang membuat pengguna beripikir beberapa kali sebelum memutuskannya. Karena terkadang untuk memasang aplikasi mereka harus menghapus foto atau aplikasi lainnya.

Bila kita sudah memiliki aplikasi native, sesederhana mencantumkannya di web app manifest kita maka bila kondisi A2HS terpenuhi, dia akan menawarkan aplikasi native kita dibanding PWA kita. Berikut di bawah adalah deklarasi aplikasi native kita di web app manifest. "prefer_related_applications": true, "related_applications": [ { "platform": "play", "id": "com.google.samples.apps.iosched" } ]

Bila kita tidak mencamtumkan prefer_related_applications sebagai true maka browser akan menawarkan PWA kita dibanding aplikasi native kita. Bila kondisi A2HS terpenuhi, maka browser akan menawarkan aplikasi native kita seperti di bawah ini.

image

Browser menawarkan aplikasi native bukan PWA

Apakah memang pengguna perlu memasang PWA?

Terkadang memiliki icon di homescreen menjadi keinginan subyektif para pemiliki aplikasi web dengan alasan wajib, atau keren. Padahal harusnya keputusan ini berdasarkan aktivitas pengguna. Data yang bisa kita gunakan adalah:

  1. Perbandingan pengguna baru dan pengguna lama yang sudah mengakses web kita sebelumnya. Bila lebih besar pengguna lama maka mungkin kita bisa menawarkan A2HS.
  2. Seberapa sering pengguna kita mengakses aplikasi web kita. Apakah setiap hari atau cuma sekali seminggu?
  3. Aktivitas pengguna, apakah mereka datang dan pergi? Atau mengakses banyak halaman sebelum pergi? Karena dengan PWA, tampilan standalone atau fullscreen akan membuat pengguna bernavigasi antar halaman. Sehingga perlu PWA untuk pengalaman lebih baik dalam mengakses tiap halaman dengan tampilan lebih luas tanpa location bar browser.

Sebagai contoh, media online saat ini sudah sangat menjamur. Para pembaca berita tidak lagi mengkonsumsi media hanya dari satu sumber saja. Bahkan beberapa pengguna lebih memilih menggunakan news aggregator untuk membaca berita dari beragam sumber. Dengan kondisi seperti ini, harusnya A2HS tidak menjadi prioritas kecuali kita memiliki data pendukung bahwa pengguna kita rutin mengakses aplikasi web kita setiap hari.

Memberikan pengalaman lebih baik dalam A2HS

Nah bila berdasarkan dua pertanyaan di atas kita memutuskan untuk implementasi A2HS maka yang lebih penting lagi adalah pada saat momen seperti apa kita menjembatani pengguna kita dari web ke aplikasi yang terpasang pada perangkat?

Kenapa ini penting? Karena akan meyakinkan mereka dengan memberikan alasan lebih baik bagi pengguna kita untuk memasang PWA kita di perangkat mereka. Saya akan mencoba menunjukkan untuk dua vertical yang populer di Indonesia.

Online media atau publisher

Seperti sudah saya jelaskan di atas, saat ini pengguna sebagian besar tidak mengkonsumsi berita cuma dari satu sumber. Bahkan pengguna beberapa memilih menggunakan aggregator untuk membaca berita dari berbagai sumber di satu aplikasi saja. Lalu apa yang bisa kita tawarkan?

Kalau saya jadi pengembang aplikasi media, saya akan melihat media saya dari perspektif aggregator berita. Bahwa pengguna belum tentu ingin membaca semua topik di media saya. Maka yang akan saya tawarkan di PWA saya adalah pengguna bisa memilih topik atau kategori mana saja yang ingin saya ikuti dan PWA saya yang terpasang bukan menampilkan halaman utama, tapi hanya menampilkan berita hanya berita yang saya ikuti.

image

Kumparan memberikan opsi untuk mengikuti topik pilihan

Kemudian PWA saya bukan secara default membuka halaman depan tapi akan langsung membuka berita pilihan yang sudah difilter berdasarkan topik yang sudah saya pilih. Lalu untuk pengalaman lebih baik, saya akan membuat aplikasi PWA ini untuk memberikan opsi sikronisasi berita setiap pagi menggunakan kombinasi budget API, push API, dan background fetch. Atau kalau periodicsync API __ udah diadopsi luas, kita bisa menggunakan API service worker ini untuk sinkronisasi rutin. Dan lebih baik lagi, berita yang sudah tersinkronisasi akan tersimpan di cache dan bisa diakses tanpa jaringan.

Nah yang jadi pertanyaan berikutnya kapan kita perlu menanyakan untuk mengikuti pilihan topik tertentu? Mungkin ada beberapa pilihan, misalnya pada saat pengguna membaca topik yang lagi tren seperti #ThaiCaveRescue maka di akhir berita kita akan menawarkan seperti “Klik di sini untuk mengikuti topik pilihan ini”. Atau mungkin mempromosikan di halaman utama seperti “pilih topik bacaan harian anda anda di sini” dan diarahkan ke aplikasi aggregator topik pilihan. Nanti di aplikasi aggregator pilihan baru kita menawarkan A2HS dengan membuat tombol install dengan cara sebagai berikut:

Pertama kita perlu menangkap event beforeinstallprompt yang akan di-trigger bila browser sudah menganggap website kita memenuhi kriteria. window.addEventListener('beforeinstallprompt', (e) => { // Prevent Chrome 67 and earlier from automatically showing the prompt e.preventDefault(); //store event atlocal storage `window.localStorage.setItem('a2hs',`e); `**document.querySelector('btninstall').style.display = 'block';**});`

Baris tebal di atas menunjukkan bagaimana kita menampilkan tombol install setelah seebelumnya kita sembunyikan. Hasil event tangkapan tersebut bisa kita gunakan untuk memunculkan kembali event tersebut. btninstall.addEventListener('click', (e) => { // hide our user interface that shows our A2HS button btninstall.style.display = 'none'; const deferredPrompt=window.localStorage.getItem('a2hs'); // Show the prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt deferredPrompt.userChoice .then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } deferredPrompt = null; }); });

Namun bila kita ingin membuat dialog lebih informatif lagi, maka kita bisa membuat custom dialog seperti Instagram.

image

Custom dialog A2HS di Instagram

Untuk custom dialog di atas, event yang kita tangkap bisa kita gunakan pada button “Add to Home Screen” seperti contoh sebelumnya. Sehingga saat button itu di-tap, maka kita tinggal memanggil deferredPrompt.prompt() untuk memunculkan A2HS.

E-Commerce dan Marketplace

Untuk industri e-commerce juga sebagian besar pemain besar tentu sudah memiliki aplikasi native. Tapi mungkin yang menjadi pilihan adalah PWA bisa mengakomodasi pengguna dengan perangkat berspesifikasi rendah. Dalam hal berbelanja, saya rasa penggunaan aplikasi native bagi orang yang jarang berbelanja dan perangkat berspesifikasi rendah akan menjadikan pemasangan aplikasi native sebagai prioritas rendah. Karena belum tentu dalam sebulan kita pasti akan berbelanja kecuali memang kita adalah penjual yang akan rajin memeriksa apakah ada order atau tidak.

Dalam konteks e-commerce, saya mungkin akan mencoba mencari ide berdasarkan aktivitas yang paling sering pengguna lakukan. Asumsi saya, berdasarkan aktivitas yang saya lakukan di e-commerce atau marketplace adalah pengguna bolak-balik melakukan pengecekan pada status order aplikasi mereka bila membeli sebuah barang. Terkadang selalu harus mengetikkan URL di browser lalu memilih menu halaman order. Dua langkah ini bisa diminimalisasi dengan membuat PWA yang langsung membuka halaman order.

Lebih baik lagi, mungkin untuk di e-commerce harusnya permintaan notifikasi push diminta di halaman ini. Kita bisa menanyakan seperti “Apakah kalian ingin diberitahu bila status ordermu berubah?” sehingga kita hanya mengirimkan notifikasi hanya bila order pengguna sudah berubah. Sehingga mereka tidak perlu bolak balik mengecek status order.

Bagaimana untuk implementasinya untuk membuat custom URL pada A2HS? Caranya dimulai dari membuat web app manifest dengan start_url ke halaman order. Kalian bisa membuat web app manifest lebih dari satu, asalkan halaman HTML memberikan URL yang tepat pada halaman tersebut. { "short_name": "IDShop Orders", "name": "IDShop", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], **"start_url": "/orders/?source=pwa",** "background_color": "#3367D6", "display": "standalone", "scope": "/orders/", "theme_color": "#3367D6" }

Pastikan file web app manifest tercantum pada header file HTML halaman web seperti berikut
<link rel="manifest" href="/manifest-order.json">

Bila kalian menggunakan arsitektur Single Page Application (SPA) maka kalian harus memastikan link manifest tersebut berbeda bila kalian dengan halaman home. Untuk memodifikasi halaman yang dibuka pada saat kita mengakses dari icon di home screen, maka pastikan kalian mengubah start_url di web app manifest.

"start_url": "/orders/?source=pwa"

Dan parameter source=pwa di URL tersebut itu untuk memudahkan kita mengetahui di analytics berapa banyak akses lewat PWA kita, dan mana yang lewat browser.

Kesimpulan

Poin utama dari Progressive Web App adalah memberikan pengalaman lebih baik bagi pengguna secara bertahap dalam mengakses layanan atau informasi kita melalui web. Namun banyak yang mengimplementasikan fitur baru di web tanpa peduli konteks dan kenyamanan pengguna.

Jadi, pastikan sebelum kita mengimplementasikan sebuah fitur baru. Tanyakan kepada pengguna apakah mereka butuh, pada saat kapan mereka butuh, dan bagaimana idealnya kita melayani mereka.

Referensi

Add to Home Screen | Web Fundamentals | Google Developers

Changes to Add to Home Screen Behavior | Web | Google Developers

WICG/BackgroundSync