Mengenal Progressive Web App

Malam itu Coco baru pulang kerja, dia sedang ada di kereta Commuter Line dari Jakarta ke Depok. Sambil mengisi waktu, dia biasanya bermain HP -- ya, Coco adalah anak muda mainstream kekinian.

Tapi disaat kereta melewati beberapa daerah, koneksi internet di HP-nya seringkali tidak stabil, dan beberapa kali Coco gagal meload website yang sedang dia akses. Setiap kali itu terjadi, Coco harus me-reload halaman webnya dan berharap bisa te-render dengan baik. Ini seringkali membuat Coco kesal, dan akhirnya tidak jadi mengakses website yang dituju.

Situasi Coco ini sepertinya cukup familiar dialami banyak orang, terutama bagi yang tinggal di daerah koneksi internet yang relatif lambat. Sayang sekali, disaat semakin banyak orang bisa membeli mobile device, saat mereka semakin nyaman menggunakan mobile web karena kepraktisannya, hambatan ini membuat membuat kesal bukan hanya pengguna tapi juga publisher dalam hal ini para owner website.

Lalu kemudian, inisiatif untuk membuat teknologi yang mencoba menjadi solusi pun muncul, namanya Progressive Web App (PWA).

Apa itu PWA?

Progressive Web App atau PWA adalah pendekatan untuk membangun website, khususnya di mobile device yang bisa memberi kemampuan dan pengalaman penggunaan sama seperti sebuah native app.

Setiap komponen fitur dari Progressive Web App ini terus berkembang, tapi beberapa ciri dari PWA ini yang penting dan yang sudah bisa kita gunakan adalah:

1) Instant Loading

Ada teknologi yang namanya Service Workers, dengan ini kita bisa membuat aplikasi yang bisa di-load dengan instan dan _reliable, tidak peduli seberapa baik koneksi internet yang ada atau bahkan saat offline sekalipun.

2) Connectivity Independent

Masih nyambung dengan poin sebelumnya, dengan PWA kita bisa membuat offline experience saat koneksi tidak ditemukan, atau saat koneksi jaringan internet yang lambat. Data yang sebelumnya pernah diakses bisa disimpan dan akan ditampilkan pertamakali sesuai kebutuhan.

3) App-like  Mode.

Dengan PWA ini webapp yang kamu punya bisa dibuat mirip layaknya aplikasi native yang biasa kita install dari App Store, termasuk navigasi dan interaksi yang ada di dalamnya. Ini memungkinkan karena PWA sendiri dibuat dengan model App Shell dalam full screen mode.

4) Fresh

Selalu up-to-date dengan menggunakan proses komunikasi update dari Service Worker.

5) Safe

Syarat dari PWA ini adalah dia harus di-publish via HTTPS untuk mencegah snooping atau pengintaian dan memastikan konten yang ada didalamnya belum dirusak.

6) Discoverable

PWA bisa teridentifikasi sebagai "aplikasi" oleh mobile device, dengan menggunakan W3C Web App Manifest dan Service Worker registration scope yang memungkian mesin pencari bisa menemukannya.

7) Re-engageable

Membuat keterhubungan menjadi mudah dengan fitur seperti Push Notifications.

8) Installable

Memungkin pengguna bisa "menyimpan" Web App kedalam Home Screen device tanpa perlu repot-repot menggunakan App Store dan men-download dari sana.

9) Linkable

PWA bisa di-share dengan mudah via URL dan tidak memerlukan instalasi yang kompleks

Jadi, apa yang membuat PWA ini menarik dan bisa membantu kamu? Setidaknya ini:

• User Experience yang lebih cepat, dan juga aman.
• Performa Google ranking yang lebih baik
• Usability yang lebih baik
• Performance yang lebih baik, dan
• ada tampilan Offline access

Contoh Web populer yang sudah membuat versi PWA dari website mereka adalah Twitter (Twitter Lite), dan Flipkart (Flipkart Lite). Selain itu ada banyak lagi contohnya, dan kemungkinan di beberapa tech startup lokal kita juga sedang mengembangkan versi lite dari layanan mereka, tapi setidaknya dua itu yang cukup dikenal dan jadi patokan banyak orang.

Implementasi PWA

Walaupun namanya Progressive Web App, sebenarnya ini tidak berarti hanya berlaku pada "aplikasi". Nama "PWA" mungkin lebih berguna untuk mengkomunikasikan fitur-fitur app-like ini ke Manajemen, CEO, atau Investor sih.

Kalau kamu membuat Single Page App menggunakan React-Redux itu memang lebih terasa kekinian, tapi sekumpulan HTML statis pun sebenarnya bisa dibuat pendekatan Progressive Web App. Karena sebenernya semua website bisa dijadikan progressive web app, asalkan dia:

• Menggunakan HTTPS,
• Menambahkan JSON manifest file yang sesuai, dan
• Menggunakan Service Worker

Selengkapnya beberapa konsep dan teknologi yang dibutuhkan untuk membangun PWA:

App manifest

Yaitu sebuah JSON file yang mendeskripsikan semua meta data dari PWA yang kamu buat. Isinya adalah hal-hal seperti nama aplikasi, bahasa, dan icon dari aplikasi. Informasi-informasi ini akan memberi tahu browser bagaimana menampilkan aplikasi kamu ketika disimpan sebagai shortcut di Homescreen. Bentuknya seperti ini:

{
  "lang": "en",
  "dir": "ltr",
  "name": "This is my awesome PWA",
  "short_name": "myPWA",
  "icons": [
    {
      "src": "\/assets\/images\/touch\/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    }
  ],
  "theme_color": "#1a1a1a",
  "background_color": "#1a1a1a",
  "start_url": "/",
  "display": "standalone",
  "orientation": "natural"
}

Go HTTPS

Progressive Web Apps harus dilayani dalam koneksi yang secure, inilah kenapa HTTPS menjadi hal yang mandatory. HTTPS akan meng-enkrip data user yang dikirim ke server kamu dan mencegah orang luar untuk bisa mengacak-acaknya dengan koneksi mereka.

Service Worker

Inilah benda yang yang membuat PWA menjadi berbeda. Service Worker sederhananya adalah kode Javascript yang berperan sebagai perantara antara browser dan host. Dia akan secara otomatis terinstall dalam browser yang memang mendukung, dan bisa meng-intercept request yang dibuat ke website kamu, lalu meresponnya dengan cara-cara yang berbeda.

Service Worker dapat menjalankan kode meskipun aplikasi sedang ditutup atau tidak aktif. Dengan service worker ini, kita bisa membangun Offline experience bila aplikasi diakses dalam keadaan tanpa koneksi internet atau dalam koneksi yang lambat dan tidak stabil.

Dan kita bisa membuat halaman offline yang meaningful dengan data yang sebelumnya sudah dicache, dan ketika koneksi internet muncul lagi perubahan datanya bisa diupdate dari background. Jadi tidak harus bikin game seperti yang biasanya kamu mainkan di Chrome saat sedang offline. Data yang terbarui juga bisa diprogram kapan untuk diupdate dan diberikan.

Bagaimana Service Worker ini bekerja?

Kamu bisa anggap Service Worker ini sebagai sebuah proxy. Setiap HTTP request yang aplikasi kamu buat men-trigger fetch event. Event ini ditangkap oleh Service Worker yang dia bisa memilih mau memberikan kembalian dari cache atau fetch dari network.

Yang perlu kamu lakukan adalah mem-populate cache tadi ketika aplikasi sedang online. Bagaimana si Service Worker ini tahu kapan harus ke cache dan kapan harus fetch dari network? Terserah, kamu punya kontrol untuk mengatur itu -- namanya caching strategies: mau cache first (berguna kalau melakukan cache file-file App shell), atau bisa juga network first (berguna untuk melakukan cache remote assets atau data).

Contohnya, ini cara "klasik" Caching Strategies dengan Network First:

Ada banyak caching strategies lainnya tapi saya tidak akan bahas, selengkapnya tentang ini bisa langusung baca di Google Offline Cookbook.

Saat ini ada semakin banyak plugin yang bisa mendukung fitur service worker ini. Misalnya kalau kamu menggunakan webpack, kamu bisa mencoba plugin sw-precache-webpack-plugin dan webpack-pwa-manifest.

Beberapa library yang juga bisa digunakan:

sw-precache: Node module yang berguna untuk men-generate service worker code yang akan melakukan precache ke spesifik resources yang ditentukan, ini berguna untuk meng-cache static assets.

sw-toolbox: Runtime caching library.

offline-plugin: Offline plugin (ServiceWorker, AppCache) untuk Webpack

Atau kamu bisa menulis Service Worker sendiri. Tapi karena lama dan repetitif, saran saya sih pakai library aja.

Ketiga hal tadi adalah yang cukup fundamental untuk bisa dibilang sebuah aplikasi/website dikatakan PWA. Dan tergantung dari website apa yang sedang kamu buat, beberapa tambahan fitur PWA lain bisa juga diimplementasikan, misalnya:

• Push Notifications,
• Syncing data dari background (saat aplikasi sedang tidak dibuka)
• Install-Ability, memberi prompt pada user untuk menginstall Homescreen Shortcut saat mengakses website melalui device.

Testing PWA

Untuk menilai sebearapa baik PWA yang kamu punya, Google sudah menyiapkan tool untuk ini, Lighthouse. Tool ini selain tersedia dalam bentuk Chrome Extension, juga bisa digunakan sebagai npm package.

Lighhouse ini akan mengukur seberapa lengkap komponen PWA yang kita implementasikan. Semakin lengkap fitur PWA yang kita buat, dan semakin baik implementasinya (menggunakan best practice yang direkomendasikan), akan semakin tinggi skor PWA-nya.

Contoh percobaan aplikasi PWA AirHorner misalnya skor Lighthousenya seperti ini:

Terakhir tentang PWA

Ada beberapa miskonsepi yang seringkali muncul kalau membahas PWA ini:

Pertama, Aplikasi yang kamu buat tidak harus sebuah "App" untuk bisa jadi PWA.

Progressive Web App bisa aja sebuah blog, website marketing, toko online atau random website yang berisi gambar-gambar kucing. PWA itu hanya sebuah cara untuk mengoptimasi code app kamu untuk bisa jadi lebih baik dan di-deliver dengan lebih cepat. Kamu bisa -- bahkan direkomendasikan -- untuk implementasi fitur-fitur PWA ini ke apapun konten web yang kamu punya.

Kedua, Website kamu tidak harus dalam Javascript-powered Single Page App.

Sekali lagi, kalau kamu tidak ngehandle teknologi terbaru seperti React-Redux SPA, bukal alasan untuk menghindari teknologi PWA. Halaman statis blog yang dibuat dari Gohugo atau Jekyll pun bisa jadi Progressive Web App yang valid.

PWA sendiri tidak mengharuskan untuk menggunakan framework Javascript tertentu, atau bahkan framework Javascript apapun. Website kamu juga tidak harus dibangun dalam bentuk Single Page App. Intinya kalau bentuknya Website, berarti ada fitur PWA yang bisa diimplementasikan.

Ketiga, PWA tidak spesifik hanya untuk Google atau Android.

Yang keren dari PWA salah satunya adalah dia menawarkan keuntungan dari dua belah sisi -- bisa deep linking dan Urls dari www, offline access, push notifications, dan fitur native app lainnya -- sambil tetap bisa independen. tidak perlu App Store, tidak perlu App yang beda untuk iOS/Andorid, hanya sebuah website aja.

Keempat, PWA sudah siap dan aman untuk digunakan.

Yap, huruf "P" yang singkatan dari progressive ini berarti apapun fitur PWA yang ada bisa dianggap sebagai sebuah layar extra atau improvement dari website yang sudah ada. Kalau browser lama tidak men-support teknologinya (misal Safari yang belum mendukung Service Worker), websitenya tidak tiba-tiba jadi rusak, tapi hanya kembali ke defaultnya: sebuah website biasa, bukan PWA.

PWA ini masih terus berkembang dan kedepannya akan ada banyak update. Termasuk kombinasi dari PWA dengan Accelerated Mobile Pages (AMP), project inisiatif Google yang lain.

PS: Oh ya, tadinya sambil bikin contoh PWA ini juga, kalau sempet nanti artikel ini diupdate :)