Selamat datang di tahun 2018, dimana website telah memasuki era baru. Kita akan memanggilnya dengan sebutan webapps (aplikasi web) dan bukan website lagi. Setiap developer berlomba untuk memberikan byte pertama tercepat. Forbes dengan situs mobile terbarunya merender dalam waktu 2.5 detik, konversi web BookMyShow’s naik sebesar 80% dan OLX telah melihat lebih dari 250% keterlibatan kembali dengan pengguna (re-engagement user) di situs mereka. Apa yang sebenarnya terjadi di dunia web? Dengan grafik JavaScript-CPU-Profiler yang menyeramkan seperti kardiogram monster lochness, semua hal dilakukan untuk mengoptimalkan setiap bit yang kita kirimkan dari sebuah kabel. Dengan Google memimpin kereta musik, semua developer telah diberikan jalur untuk membuat web kembali lebih hebat (#MakeTheWebGreatAgain). Oh, apakah saya sudah memberitahu Anda bahwa situs web bisa mengirim notifikasi? Dan ya, web yang bisa offline adalah sesuatu yang penting di jaman now.

Kegilaan Aplikasi 201X

Mari kita menengok ke tahun 2010, munculnya “pandemi” smartphone. Berkat iPhone & ponsel android murah, Anda bisa menemukan orang menggunakan smartphone setiap detiknya. Setiap orang menembak Angry Birds atau menjadi Fruit ninja, WhatsApp menjadi saluran pengganti komunikasi dua arah dan orang rela membayar untuk mendownload sebuah aplikasi. Seketika itu setiap perusahaan ingin memiliki sebuah aplikasi. Mengapa?

Akses offline: Karena aplikasi diunduh-sekali-gunakan-selamanya, setelah mengunduh pengguna dapat mengaksesnya hanya di ketuk.

Penargetan ulang melalui notifikasi: Anda dapat membuat pengguna kembali ke aplikasi dengan mengirimkan pemberitahuan, informasi produk yang relevan untuk menarik perhatian mereka.

Fitur native: Aplikasi native memiliki kompatibilitas dengan perangkat keras dan fitur perangkat seperti kamera, lokasi, sensor, sistem file, dll.

Kinerja yang lebih baik: Karena aplikasi memiliki akses ke perangkat keras dan mereka memiliki kebebasan desain, aplikasi seharusnya memiliki kinerja dan kecepatan yang lebih baik.

Permasalahan pada aplikasi mobile

Sedikitnya unduhan aplikasi baru: Mayoritas pengguna ponsel pintar tidak mengunduh aplikasi baru. Pengguna menghabiskan 80% waktunya pada lima aplikasi. 10 aplikasi yang banyak digunakan dimiliki oleh Facebook & Google.

image

Jumlah unduhan aplikasi per bulan pengguna smartphone di Amerika Serikat.

Penghalang untuk masuk: Membuat user untuk mengunduh sebuah aplikasi, menghabiskan waktu dan paket data untuk mengunduh dan kemudian menggunakannya adalah sebuah penghalang besar dalam akuisisi aplikasi.

Aplikasi bersifat penyimpanan intensif: Sering kali pengguna ponsel pintar mengalami keterbatasan bahkan kehabisan ruang penyimpanan menjadi pilihan yang berat bagi pengguna di negara berkembang.

image

Kemenangan web (Peluang)

Website telah menjadi konsumsi sumber informasi sejak kedatangan internet. Mari kita lihat mengapa website masih ada dan menang:

Mudah ditemukan: Anda mencari sesuatu di mesin pencari dan boom! Anda memiliki semua daftar situs yang anda tak pernah tahu bahwa itu ada. Ini mudah bagi anda untuk menemukan konten baru di sebuah web.

Jangkauan jangka panjang dan akses instan: Dari ponsel pintar kelas bawah hingga kelas atas telah dibekali browser di dalamnya. Masukkan url, tekan enter dan voila, Anda memiliki konten dalam hitungan detik pada ponsel anda.

Mudah dibagikan: Bahkan ketika aplikasi asli perlu berbagi sesuatu melalui web, mereka memerlukan URL web. URL adalah cara terbaik untuk mengarahkan seseorang ke sumber yang ingin dibagikan.

Pengembangan: Website tidak perlu dikembangkan berbeda untuk setiap OS atau device. Ini seperti mantra “write-once-run-everywhere”.

Pembaharuan dan perbaikan: Anda dapat memperbaharui website anda berkali — kali dalam sehari tapi, kalau memperbaharui aplikasi setiap kali?Anak muda, bersiaplah membuat pengguna anda murka.

Solusi? Progressive Web Apps (PWA)

Bagaimana kalau kita jodohkan hal yang terbaik pada web dengan fitur yang telah dimiliki oleh aplikasi native? Selamat, anda mendapatkan aplikasi web yang progresif (Progressive Web Apps). Mari kita lihat apa yang bisa dilakukannya.

Bisa diinstall: Dengan sekali ketuk, website anda terinstal di ponsel anda dan telah ditambahkan ke homescreen layaknya aplikasi native.

Notifikasi: Anda dapat mengirimkan sebuah notifikasi mendalam (push notification) layaknya aplikasi native.

Offline: Menggunakan offline cache APIs webapp yang anda install dapat berfungsi offline sebagaimana mestinya. Terima kasih kepada Service Worker.

Pembaharuan: Jika ada pembaharuan dari website di sisi server, cache aplikasi akan memperbaharuinya saat itu juga tanpa pemberitahuan pengguna.

Progresif: Dukungan terhadap PWA meningkat pesat tetapi, terdapat beberapa API yang tidak didukung oleh beberapa vendor browser. Namun, tidak perlu khawatir, PWA yang anda buat tetap berfungsi layaknya website. Sesuai dengan namanya, perlu setahap demi setahap agar sebuah web yang dikembangkan menjadi PWA.

Masa depan

Sudah jelas bahwa generasi selanjutnya dari webapps atau Progressive Web Apps akan menjadi standar yang jelas dalam beberapa tahun ke depan. Dengan pertumbuhan dukungan browser dan edukasi pengguna, pengguna akan berharap situs web menjadi PWA. Terdapat hal menarik yang muncul di PWA:

  • Install PWA di komputer anda dari Windows Store. Microsoft telah berjanji membawa PWA ke browser Edge dan kemudian PWA dapat ditambahkan ke Windows Store yang mana user dapat mengunduhnya di komputer mereka. Bukankah hal ini luar biasa?
  • Dukungan Progressive Web Apps di Firefox untuk smartphone Android.
  • Apple menambahkan dukungan Service Worker ke Safari Tech preview.
  • Tinder meluncurkan PWA. Seperti yang dilakukan Twitter, Uber, Pinterest, Google Maps dan banyak pemain besar lainnya.

Tantangan

Meskipun terdapat peluang besar bagi kita selaku web developer, ada beberapa tantangan internal dan eksternal yang mesti kita perhatikan. Dapatkah kita melewatinya?

Pengembangan sebuah web sebenarnya mudah, namun yang sulit adalah membuat sebuah kemajuan.

  • Dukungan API yang berubah — ubah dan prioritas para browser vendor menyebabkan kesulitan dalam membangun sebuah pengalaman yang konsisten.
  • Pertimbangan mempertahankan penggunaan teknologi jadul menyebabkan celah yang besar ketika ingin diimplementasikan ke tahap yang lebih tinggi.
  • Platform yang quirks dan masalah kompatibilitas menyebabkan frustrasi yang begitu besar dan testing ekstra dalam jumlah yang besar.
  • Ada sejumlah besar abstraksi yang dibuat yang membuat para developer menjauh dari pemahaman platform.
  • Kurangnya interaksi layaknya aplikasi dari platform level primitif: views, models, controllers, recyclers, hero transitions, view transitions.
  • Web developer harus bagus dalam segala hal: Offline, Accessibility, Localisation, Performance, Security…

Developer begitu bersemangat terhadap PWA, tetapi PWA bisa jadi sulit untuk dibuat dan berjalan dengan baik

  • Kurangnya dukungan browser utama (yang sering digunakan pengguna) untuk PWA.
  • Ujung — ujungnya sulit sekali untuk membangun sebuah aplikasi web yang progresif. HTTPS, Service Worker adalah semua hal yang rumit untuk dimulai.
  • Nilai PWA tidak dijelaskan dengan jelas terutama di OS dan browser. Ini adalah alasan sederhana mengapa tidak ada yang menggunakan PWA.
  • Nyaris mustahil untuk membangun sebuah “PWA yang bagus” dan tidak ada satupun yang peduli bagaimana semestinya.
  • Developer sering kali harus memulai dari awal dan tidak melakukan migrasi terhadap pengalaman yang sudah ada.
  • Developer dan kalangan bisnis tidak tahu mengapa mereka harus membuat sebuah aplikasi web yang progresif.
  • Kata “progresif” tidak dihargai. Kesulitan untuk menawarkan pengalaman/fitur yang konsisten dari beragam browser web dan sistem operasi.
  • Aplikasi web progresif yang sedang dibangun tidak responsif dan dengan demikian meningkatkan biaya perawatan karena anda harus merawat situs desktop secara terpisah.

Terlalu sulit untuk membangun sebuah fungsionalitas pengalaman yang baik (UI/X)

  • Alat ukur bagus-cukup untuk developer terlalu rendah. Apa itu bagus? Mengapa hal tersebut penting? Bagaimana cara anda sampai ke sana?
  • Mudahnya menjadi seorang aktor buruk ketika membangun components, A11y, layout, performa yang sulit dibangun dan tidak diprioritaskan oleh developer.
  • Developer tidak melihat nilai dari web components dan platform tools untuk membantu mereka membangun dengan cepat.
  • Banyaknya pencipta framework yang tidak percaya bahwa web components sebaiknya harus digunakan dan ini mungkin atau mungkin tidak benar — tidak jelas bagi developer.
  • Developer ingin sebuah framework UI seperti Bootstrap untuk menghilangkan UI pains dan membiarkan mereka fokus pada produk.
  • Primitif untuk banyak pengalaman terlalu sulit untuk dibangun dengan baik: menus, nav, transitions, takeovers, data-binding, views, controllers.
  • Sulit untuk membangun pengalaman performan — Primitif adalah masalahnya (platform tidak memiliki apa yang dibutuhkan developer, atau mereka ada tapi tidak ada yang tahu atau peduli).
  • Dukungan API yang tidak merata seperti animasi membuat sesuatu yang mustahil bagi pengembang untuk mengadopsi platform primitif baru — primitif biasanya bersifat mendasar dan hampir tidak mungkin dilakukan pada polyfill.

Terlalu sulit untuk membangun sebuah website yang cepat

  • Para web developer membangun pengalaman lambat sehingga menghasilkan UX yang buruk dan tidak dapat dijangkau. Mereka ingin membangun lebih baik namun tidak tahu bagaimana caranya.
  • Developer dan perusahaan tidak memprioritaskan performa karena tidak ada panduan yang jelas yang berdampak pada bisnis mereka.
  • Developer tidak mengerti kenapa sebuah website bisa lambat.
  • Terlalu sulit untuk membangun website dengan loading cepat — terlalu banyak “senapan” dan browser.
  • Developer tidak tahu apa tujuan yang mereka butuhkan untuk membidik target mereka.
  • Developer tidak memiliki panduan yang mereka perlukan untuk mencapai tujuan yang ditetapkan untuk mereka (pola PRPL, chunking berbasis rute, streaming adalah masalah pinggiran saat ini dan tidak memiliki dokumentasi nyata, dll).
  • Perkakas (tooling) dan kerangka kerja (framework) tidak cepat secara default dan developer tidak tahu atau peduli — bundling adalah masalah besar — DX > UX. Catatan: DX adalah singkatan dari Developer Experience.
  • Developer tidak menguji perangkat keras yang dijalankan pengguna mereka dan beranggapan rasanya “cukup baik”.
  • Developer tidak memiliki semua informasi tentang basis pengguna mereka dan dampak keputusan mereka terhadap pengguna mereka.
  • Developer memprioritaskan urusan performa loading dibandingkan performa “halaman”.
  • Terlalu sulit untuk mendapatkan UI website anda beroperasi dengan lancar di semua perangkat.
  • Ketakutan mempermalukan publik semakin meningkat dan membuat para pengembang tidak peduli.
  • Developer merasa kita “memukuli” mereka di atas kepala sepanjang waktu hingga mematikan.

Terlalu sulit untuk membangun sebuah website yang aman

  • Migrasi ke HTTPs adalah penghambat adopsi beragam teknologi baru
  • Developer dan perusahaan tidak melihat kebutuhan membuat website mereka aman. (contoh, kenapa saya membutuhkan ini untuk sebuah situs berita?)
  • Terlalu sulit untuk men-setting HTTPS.
  • Masih bisa dibilang mahal bagi developer untuk men-setting sebuah situs HTTPS — tidak semua dapat menggunakan LetsEncrypt. Situs besar dan kecil harus membayar lebih untuk hal tersebut.
  • Pengembang tidak memahami nilai “teknologi Aman” seperti CSP dan mereka melihat adopsinya rendah.

Perusahaan dan developer tidak tahu mengapa harus “Web”

  • Konversi pengguna ke mobile web begitu sulit sehingga menghasilkan uang juga sulit.
  • Kasus dan kebutuhan bisnis bervariasi menurut wilayah, vertikal, dan pengguna sehingga sulit diterapkan dengan cara yang berarti tanpa investasi lebih banyak.
  • Kurangnya kemampuan dari web menandakan bahwa sebaiknya anda tidak perlu menggunakan web.
  • Web hanya peralihan ke model aplikasi jadi mengapa tidak langsung ke ‘aplikasi’.
  • Kurangnya dukungan beragam browser terhadap API yang dinilai penting menyebabkan perusahaan sulit untuk membenarkan investasinya.
  • Tidak begitu jelas nilai dari sebuah web ketika begitu banyak platform yang berkompetisi.

Web begitu kental dan menyebabkan developer menderita

  • Browser sering kali berubah baik itu penambahan atau penghapusan taktis dari platform web dan developer tidak tahu apa yang sedang terjadi, bagaimana cara tetap up to date atau bagaimana cara mengubahnya. Inilah penyebab developer menderita.
  • Chrome terus-menerus menerobos platform dengan “intervensi” mereka.
  • Siklus update browser menyebabkan ketidakpastian dan “shifting sands”
  • Pemain platform tidak dalam satu jalur. Safari, UC, Edge dan lain-lain mempunyai prioritas berbeda.
  • Developer harus membuat semuanya berjalan lancar di manapun (dari iOS sampai UC Browser) dan mereka memiliki tools, panduan, atau fata untuk mem-backup keputusan mereka.

Web adalah ekosistem yang dinamis, namun berisik.

  • Ada sejumlah besar opini yang dihasilkan setiap hari dan juga praktik terbaik (best practice) yang didefinisikan tidak akurat atau lengkap dan developer melakukan googling dan yang lainnya untuk mempresentasikan panduan terpadu.
  • Terdapat banyak tool, library dan framework yang dibuat dan developer tidak tahu apa yang harus dipilih.
  • Google memiliki framework dalam jumlah yang banyak dan developer tidak yakin yang mana harus digunakan.
  • Kita membuat banyak konten dan tidak disajikan secara merata.
  • Terlalu banyak tool dan framework yang bersaing dan developer tidak tahu yang mana harus digunakan.
  • Terlalu banyak saran yang beradu / bersaing dan developer tidak tahu yang mana harus diikuti atau dipercaya.

Web itu global

  • Developer tidak hanya berbicara bahasa Inggris. Banyak developer datang dari negara yang tidak pernah kita targetkan: China, India, Indonesia, Thailand, Pakistan, dan lain-lain; Kita harus membantu mereka.
  • Banyak developer belahan dunia barat melihat hasil ‘Lite’ sebagai ‘emerging market only’ dan mereka tidak memiliki kesetiaan tinggi.

Jajak pendapat tentang kondisi PWA di Indonesia

Meskipun PWA telah digalakkan mulai dari tahun 2015 dengan Flipkart sebagai pelopornya, masih banyak perusahaan di Indonesia masih tetap memilih mobile apps (native) sebagai jalan untuk menarik user mereka. Mengapa demikian? Berikut pendapat yang saya rangkum dari beberapa teman dan kenalan di Twitter per tanggal 11 November 2017.

[](https://twitter.com/_satyakresna/status/929146491305738240) Jajak pendapat tentang PWA di Indonesia

Catatan: pendapat ini bisa saja ditepis seiring dengan perkembangan jaman.

  1. Dari sisi pengguna Android banyak, perusahaan melihat data yang ada dari #thinkwithgoogle dan sumber lainnya. PWA unik dan BukaLapak juga sudah dipakai. Tapi, dengan aplikasi native performa dapat dicapai dengan baik dan bagus bagi branding perusahaan.
  2. Banyak aplikasi mobile dengan size yang besar tetapi tidak bisa diinstall bleh user karena sisa penyimpanan internal atau eksternal tidak memadai. Walaupun sudah ada Android Instant Apps belum menjamin karena Android Instant Apps seingat saya hanya bisa dipakai mulai dari Android API 23. Apakah distribusi API 23 sudah melampaui dari para pendahulunya?
  3. Sosialisasi kurang, contoh aplikasi lokal yang full PWA belum ada, dan mindset perusahaan ingin exist di play store.
  4. Beberapa Web API belum lengkap. Jadi, untuk membuat fitur sama seperti native belum bisa 100%. Contoh Web bluetooth API, dll.
  5. Karena untuk memakai apps kita harus install, dan hanya user yang loyal yang mau ngorbanin space di HP nya. Inilah mengapa apps masih menjanjikan revenue yang lebih baik dibandingkan Web (meskipun PWA).
  6. Performa, native notification (PWA tidak jalan di iOS), bisa akses API HP (tidak ketat seperti web) dan mungkin UX (ayah saya tidak mengerti bagaimana menggunakan browser, tetapi mengerti bagaimana cara mengunduh aplikasi).
  7. PWA dan native masih punya perbedaan yang cukup besar, salah satunya memang kurangnya sosialisasi yang bisa bikin tech itu hype untuk dioprek. Tapi, semuanya balik lagi ke kebutuhan bisnis.

FAQ

  1. Darimana saya bisa membuat website saya menjadi PWA? WWWID sudah menyediakan artikel yang berjudul “Progressive Web Apps, mulai dari mana?
  2. a). Adakah panduan atau tutorial yang bisa saya pelajari tentang PWA? Anda bisa menemukannya di Google Codelabs dan masukkan keyword PWA. b). Saya lihat ini masih kurang ada sumber yang lain? Anda bisa menemukannya di Gitbook: PWA concepts dan PWA codelabs.
  3. Saya sudah belajar tentang PWA dari konsep sampai codelabs. Tapi, saya belum ada ide yang diangkat menjadi PWA. Apakah ada yang bisa ditawarkan? WWWID telah menyediakan tantangan yang berjudul “Tantangan Web Developer Untuk Membuat Aplikasi Web Bisa Digunakan Kurang Dari 5 Detik

Yuk, web developer mari kita buat Web lebih hebat lagi dan kita bisa!!!

image

Sumber artikel:

  1. Exciting year to be a web developer **** diterjemahkan ke dalam bahasa Indonesia.
  2. Challenges for web developers **** diterjemahkan ke dalam bahasa Indonesia.