progressive webapps

Kecepatan dalam pembuatan suatu produk merupakan hal penting untuk bersaing di zaman yang serba canggih seperti sekarang ini. Tak terkecuali ketika kita ingin membuat sebuah aplikasi yang tidak hanya dapat diakses melalui smartphone. Namun, bisa terakses juga di browser. Tentunya kita membutuhkan teknologi yang dapat menangani hal tersebut maka dari itu munculah PWA (Progressive Web Apps)

Apa Itu PWA?

PWA (Progressive Web Apps) adalah sebuah aplikasi yang dibangun dengan menggunakan teknologi web namun, berjalan selayaknya aplikasi mobile. Dengan menggabungkan kelebihan dari website biasa dan native apps terciptalah PWA. Lalu, apa perbedaan dari Web App, Aplikasi mobile, dan PWA?

Web App Vs Aplikasi Mobile Vs PWA

Web App

  • Dibuat dengan mengandalkan browser dan bersifat cross-platform
  • Update berjalan otomatis
  • Hanya berjalan dalam kondisi online
  • Fitur terbatas
  • Biaya development murah

Aplikasi Mobile

  • Dibuat untuk platform tertentu dengan menggunakan bahasa khusus, seperti Switf untuk iOS dan JAVA/Kotlin untuk Android
  • Update harus dilakukan manual
  • Bisa berjalan dalam kondisi offline
  • Fitur lengkap yang menjamin kenyamanan pengguna
  • Biaya development cenderung mahal

PWA

  • Dibuat mengandalkan browser dan bersifat cross-platform
  • Update berjalan otomatis
  • Bisa berjalan dalam kondisi offline
  • Menghadirkan UX yang lebih intuitif dari web app
  • Biaya development murah

Dari sini sudah bisa terlihat jelas bahwa PWA itu sendiri merupakan gabungan dari Web App dan juga Aplikasi mobile. Nah, pertanyaan selanjutnya adalah Kapan kita membutuhkan PWA ini?

Kapan Membutuhkan PWA?

PWA atau Native app? mana yang lebih cocok untuk dikembangkan?

Pilih PWA development ketika:

  1. Aplikasi harus mudah terdistribusikan dan mencakup banyak pengguna
  2. Tidak memiliki budget development yang besar
  3. Tidak memiliki banyak waktu untuk meluncurkan aplikasi
  4. Aplikasi yang diinginkan cross-platform atau bisa digunakan diberbagai perangkat
  5. Membutuhkan update dalam waktu yang singkat
  6. Ingin terindex di search engine

Pilih native app development ketika:

  1. Akan dijual atau didistribusikan di app store, google play store atau semacamnya
  2. Kecepatan akses dan interface yang responsif merupakan key factor dari aplikasi
  3. Membutuhkan akses fitur hardware dari perangkat
  4. Aplikasi harus terintegrasi dengan third-party apps
  5. Business model yang sudah jelas, contoh: cost per download or IAP (In App Purchase)

Setelah tau kapan harus memilih development PWA atau native apps. Kita kupas lebih dalam lagi tentang PWA ini mulai dari karakteristiknya

Karakteristik PWA

  • Progressive. Berjalan di semua perangkat dan sinkron dengan apa yang ada di website dan apa yang ada di aplikasi
  • Discoverable. Karena PWA adalah sebuah website, maka dia juga harus terdaftar di search engine
  • Linkable. Sama seperti karakteristik sebelumnya yang diwarisi dari website, PWA harus mudah terhubung selayaknya website
  • Responsive. Harus memiliki UI yang ramah dengan mobile dan menyesuaikan dengan screen size perangkat
  • Installable. Bisa diinstall di beragam sistem operasi
  • Fresh. Ketika konten baru diupload pengguna yang terhubung ke internet sudah bisa melihat konten tersebut
  • Connectivity-independent. Bisa digunakan secara offline
  • App-like. Berjalan selayaknya native app
  • Re-engageable. Bisa menarik penggunanya dengan push-notification seperti native app

Contoh PWA

Pinterest



Source: miro.medium.com

Instagram



Source: miro.medium.com

Twitter



Source: media.wired.com

Starbucks

Sources: freePngClipart.com

Cara Cek Status PWA di Sebuah Website

Kita akan mencoba memeriksa apakah suatu website telah menerapkan teknologi PWA ini atau tidak yaitu dengan cara

  1. Buka halaman website yang ingin kamu cek

  2. Tekan ctrl + shift + i pada keyboard atau klik kanan inspect untuk membuka inspect element

  3. Klik ikon tampilkan lebih lanjut (>>), kemudian pilih Application

  4. Pilih menu Service Worker, cek status apakah sudah berwarna hijau

Jika status service worker sudah berwarna hijau maka website tersebut sudah menerapkan PWA dan berikut contoh website yang belum menerapkan teknologi PWA

Akhir

Penerapan PWA memang sangat menguntungkan contohnya perusahan perusahaan yang telah mengadopsi teknologi ini seperti twitter mengalami 65% peningkatan pages per session, 75% more tweets, dan 20% decrease in bounce rate, yang mana mengurangi size dari aplikasi juga sebesar 97%. Apakah di masa yang akan datang native apps development akan tergantikan dengan PWA? Jawabannya tergantung kebutuhan pasarnya. Kalau pendapat kalian bagaimana? apakah tertarik untuk mencoba mendevelop PWA? coba tulis di kolom komentar di bawah ya! and Happy learning!

Referensi

medium.com/iquii

smashingmagazine.com

youtube.com/womentechmakers

web.dev

niagahoster.co.id