BerandaMobileApa itu Progressive Web Apps? Penjelasan Lengkap

Apa itu Progressive Web Apps? Penjelasan Lengkap

Apa Itu Progressive Web Apps Header

Untuk mendapatkan aplikasi di smarphone kita, pastinya kita selalu menggunakan Play Store untuk Android dan App Store untuk perangkat iOS. Lalu, apakah ada tempat untuk bentuk lainnya? Ya, itulah PWA atau Progressive Web Apps. Lalu, apa itu Progressive Web Apps sebenarnya?

Apa itu Progressive Web Apps?

Apa itu Progressive Web Apps (Logo)

Progressive Web Apps adalah sebuah aplikasi yang berasal dari situs web dan bisa menjadi aplikasi standar di perangkat. Sehingga, anda bisa mengakses situs tersebut layaknya sebuah aplikasi yang biasa anda pasang melalui Play Store, App Store, maupun Microsoft Store.

Dari pengertian diatas, sudah jelas bahwa aplikasi berbentuk PWA hanya bisa didapatkan jika anda mengunjungi situs tersebut. Dan jika anda sudah mendapatkannya, situs tersebut nantinya tersedia persis layaknya sebuah aplikasi yang biasa anda pasang melalui Play Store, App Store, maupun Microsoft Store.

Fungsi Progressive Web Apps

Fungsi utama PWA adalah meningkatkan jumlah kunjungan seseorang ke situs dengan mengubah situs layaknya aplikasi standar yang biasa di-install. Dengan pengguna smartphone yang semakin banyak, mengakses konten melalui aplikasi standar merupakan cara tercepat dan terbanyak. Namun, hal ini tidak berlaku untuk situs yang harus kita akses melalui browser.

Contoh paling nyata adalah aplikasi e-commerce seperti Lazada atau Bukalapak. Kita semua tahu bahwa Lazada bisa kita gunakan menggunakan browser, termasuk browser smartphone. Namun, cenderung kita pasti install aplikasi Lazada melalui Play Store ketimbang membukanya di browser smartphone anda.

Dengan ada PWA, perusahaan tak perlu membuat aplikasi standar dan cukup menggunakan PWA di situsnya.

Tujuan Progressive Web Apps

Berdasarkan dari situs Google Developers, berikut beberapa pondasi utama atau tujuan dari PWA.

  1. Fast (Cepat) – PWA cepat dalam berinteraksi dengan pengguna dengan animasi yang halus dan cepat.
  2. Integrated (Terintegrasi) – Pengguna tidak perlu menggunakan browser untuk mengunjungi situs. Cukup luncurkan layaknya anda menggunakan aplikasi biasa.
  3. Reliable (Dapat diandalkan) – Muat konten dengan cepat, tidak seperti ketika anda menggunakan browser dan lebih mirip seperti aplikasi standar.
  4. Engaging (Menarik) – Dengan tampilan yang sama seperti ketika anda membuka situs pertama kali dan diluncurkan sama seperti aplikasi standar membuat PWA menarik dan fitur seperti notifikasi juga bisa digunakan.

Cara install dan menggunakan Progressive Web Apps

Sangat mudah! Namun, tidak semua situs bisa menggunakan PWA. Ini semua sangat tergantung dari pembuat situs tersebut apakah mendukung PWA atau tidak. Dan sangat disayangkan juga bahwa tidak ada tempat khusus untuk mencari PWA ini, sehingga anda harus mengeceknya satu persatu.

  • Tombol Untuk Menambah Pwa
  • Menambahkan Ke Layar Utama
  • Twitter Berbasis Pwa Sudah Terpasang
  • Tampilan Twitter Pwa

Sebagai contoh paling mudah adalah Twitter. Twitter saat ini bisa anda gunakan sebagai PWA. Cara memasangnya adalah kunjungi Twitter di browser anda seperti Chrome. Kemudian, akan ada kalimat seperti ini: “Tambahkan Twitter ke layar Utama” atau “Add Twitter to Home screen”. Jika anda klik atau sentuh tombol tersebut, maka Twitter akan membuat shortcut layaknya ketika anda memasang aplikasi dari Play Store maupun App Store.

Jika anda sentuh PWA-nya, maka ia akan meluncur layaknya aplikasi standar. Bahkan, jika ada Tweet baru dari orang yang anda follow, notifikasi akan muncul juga di smartphone anda.

PWA juga bisa diakses secara offline atau tanpa internet. Namun, konten yang tampil di PWA adalah konten yang lawas yang sebelumnya sudah anda lihat. Jika anda terkoneksi dengan internet, PWA secara otomatis memperbarui kontennya.

Cara kerja Progressive Web Apps

Ketika anda menambahkan sebuah situs PWA ke perangkat anda, situs tersebut akan memindahkan seluruh elemen statis atau elemen yang akan terus digunakan kedalam perangkat. Elemen-elemen ini contohnya adalah nama aplikasi, tombol-tombol, logo aplikasi, dan masih banyak lagi. Karena elemen-elemen ini sangat jarang untuk tergantikan, sehingga elemen tersebut tidak perlu di muat ulang untuk digunakan secara offline.

Kemudian, ada komponen bernama Service Worker. Komponen ini dibuat menggunakan kode Javascript yang berfungsi untuk mendapatkan konten terbaru baik ketika anda membuka dan menggunakan PWA. Sehingga, anda selalu mendapatkan konten terbaru apapun keadaannya. Kelebihan dari Service Worker ini adalah komponen ini bisa bekerja walaupun dengan koneksi yang lambat sekalipun.

Service Worker juga dapat menyimpan konten baru berupa gambar sebagai cache yang disimpan di perangkat anda. Sehingga ketika anda membuka PWA dan ada konten yang sama, maka PWA tidak perlu memuat kembali dan cukup memuatnya melalui cache. Cache ini juga berperan ketika anda tidak terkoneksi internet dan PWA dapat menampilkan cache, sehingga konten tetap terlihat walaupun tidak terkoneksi internet.

Apakah semua browser bisa memasang PWA?

Versi Chrome Android

Hampir semua browser ternama bisa memasang PWA. Namun, perlu anda perhatikan versi berapa browser anda. Misalnya kalau anda menggunakan Chrome di Android, anda bisa buka menu dan buka “Pengaturan”. Gulir sampai kebawah dan sentuh “Tentang”. Tampilannya seperti diatas.

Is Service Worker Ready

Setelah anda mengetahui versi berapa browser anda, anda bisa mengecek situs Is Service Worker Ready untuk melihat browser versi apa saja yang mendukung PWA dan komponen yang wajib ada di PWA adalah Service Worker ini.

Terjawab sudah Apa itu Progressive Web Apps

Dengan adanya PWA, banyak pihak yang mendapatkan keuntungan. Dari segi perusahaan pemilik situs, mereka tidak perlu membuat aplikasi tambahan agar bisa masuk ke perangkat anda. Dan kita sebagai pengguna, bisa mendapatkan aplikasi standar yang tidak memakan banyak ruang kosong perangkat.

Tag:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.