{"id":7608,"date":"2021-08-28T08:19:00","date_gmt":"2021-08-28T01:19:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=7608"},"modified":"2022-08-26T10:31:15","modified_gmt":"2022-08-26T03:31:15","slug":"mengenal-apa-itu-progressive-web-app-pwa-demi-website-yang-lebih-cepat","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/mengenal-apa-itu-progressive-web-app-pwa-demi-website-yang-lebih-cepat\/","title":{"rendered":"Mengenal Apa Itu Progressive Web App (PWA) Demi Website yang Lebih Cepat"},"content":{"rendered":"\n

Guys, dengan terus berkembangnya tren di web development<\/em> atau pengembangan web, kini ada tren yang ramai dibicarakan lho, yaitu Progressive Web App (PWA). Tahukah kalian bahwa PWA itu ternyata salah satu solusi untuk membuat akses website lebih cepat. Okay deh, baca sampai selesai yuk Mengenal Apa Itu Progressive Web App (PWA) Demi Website yang Lebih Cepat<\/strong><\/p>\n\n\n\n

Apa Itu Progressive Web App<\/strong><\/h2>\n\n\n\n

Progressive Web App <\/em>atau PWA adalah gabungan dari web apps<\/em> dan mobile apps<\/em>. Mobile Apps adalah aplikasi JavaScript yang bekerja di browser dan bertujuan untuk membawa fitur-fitur native app ke website.<\/p>\n\n\n\n

Nah, dengan perkenalan API web yang baru, PWA dapat membantu membawa UI dan UX aplikasi ke browser web di perangkat mobile kalian. Jadi, Progressive Web Apps merupakan aplikasi web tradisional yang disempurnakan dengan teknologi web modern sehingga memungkinkan mereka untuk memberikan pengalaman yang lebih mirip aplikasi.<\/p>\n\n\n\n

Karakteristik Progressive Web App <\/strong><\/h2>\n\n\n\n

Berikut ini ada beberapa karakteristik dari Progressive Web App:<\/p>\n\n\n\n

PWA bersifat progresif <\/strong><\/h3>\n\n\n\n

PWA bekerja untuk semua user, tidak peduli browser apa yang digunakan atau di mana kalian mengakses website tersebut. Jadi, mau kalian memakai Chrome atau Opera atau kalian mengakses website dari Indonesia atau Eropa, kalian tetap dapat membuka website tersebut dengan waktu loading <\/em>yang cepat.<\/p>\n\n\n\n

Responsive<\/strong><\/h3>\n\n\n\n

Progressive Web App juga akan bekerja untuk semua device, baik itu desktop, mobile, atau tablet.<\/p>\n\n\n\n

Web App tidak bergantung dengan konektivitas<\/strong><\/h3>\n\n\n\n

PWA tetap bisa bekerja dengan jaringan yang lemah dengan bantuan service workers.<\/p>\n\n\n\n

Terasa seperti aplikasi<\/strong><\/h3>\n\n\n\n

PWA dirancang agar terasa seperti aplikasi. Mereka memiliki gaya interaksi dan navigasi seperti aplikasi handphone.<\/p>\n\n\n\n

Selalu up-to-date<\/em><\/strong><\/h3>\n\n\n\n

PWA akan selalu up-to-date <\/em>karena adanya service workers<\/em>.<\/p>\n\n\n\n

Mudah ditemukan<\/strong><\/h3>\n\n\n\n

Sesuai dengan manifest W3C, klasifikasi Progressive Web App adalah sebagai aplikasi. PWA juga akan lebih mudah ditemukan oleh mesin pencari karena adanya service workers<\/em>.<\/p>\n\n\n\n

Meningkatkan user engagement<\/strong><\/h3>\n\n\n\n

Dengan fitur-fitur PWA seperti push notifications maka ini bisa membantu meningkatkan user engagement<\/em>.<\/p>\n\n\n\n

Instalasi<\/strong><\/h3>\n\n\n\n

Pengguna dan pengunjung website dapat menyimpan progressive web app yang sering mereka akses langsung ke home screen<\/em> handphone mereka sehingga tidak perlu download <\/em>aplikasi dari app store.<\/p>\n\n\n\n

Linkable<\/strong><\/h3>\n\n\n\n

PWA bisa dengan mudah dibagikan ke orang lain dengan URL tanpa proses instalasi yang kompleks.<\/p>\n\n\n\n

Kelebihan PWA<\/strong><\/h2>\n\n\n\n

Google menyebut kelebihan PWA dengan istilah FIRE (Fast, Integrated, Reliable, and Engaging), yakni Cepat, Terintegrasi, Bisa Diandalkan dan Menarik. Berikut ini kelebihan PWA dilihat dari sisi pemilik website maupun pengguna aplikasi: <\/p>\n\n\n\n

Hemat Biaya Produksi<\/strong><\/h3>\n\n\n\n

Mengembangkan sebuah Progressive Web App tidak membutuhkan biaya besar. <\/p>\n\n\n\n

Kalian cukup mengembangkan sebuah website dengan metode progresif yang ditawarkan PWA. Hasilnya adalah sebuah aplikasi yang bisa digunakan di semua perangkat dan sistem aplikasi, yang tentunya biaya produksi lebih kecil.<\/p>\n\n\n\n

Kemudahan Digunakan di Berbagai Perangkat<\/strong><\/h3>\n\n\n\n

Membangun PWA memungkinkan kalian untuk merancang tampilan aplikasi yang seragam di berbagai perangkat dengan berbagai ukuran layar, baik ponsel maupun tablet. <\/p>\n\n\n\n

Kalian juga bisa mengatur fungsi yang konsisten meskipun digunakan pada sistem operasi yang berbeda, seperti iOS, Android, maupun Windows. <\/p>\n\n\n\n

Pengguna juga menjadi terbiasa jika harus mengakses PWA menggunakan perangkat yang berbeda. <\/p>\n\n\n\n

Tidak Bergantung App Store<\/strong><\/h3>\n\n\n\n

Kalian tidak lagi bergantung kepada AppStore, seperti Google Play Store, Apple Store, dan Windows Store ketika akan mempublikasikan aplikasi.  <\/p>\n\n\n\n

Dari sisi bisnis, kalian tidak perlu mengeluarkan biaya untuk registrasi atau berlangganan sehingga merasa lega. <\/p>\n\n\n\n

Kalian juga bisa lebih leluasa lho untuk mengembangkan aplikasi tersebut tanpa terjerat oleh persyaratan minimal yang harus dipenuhi, cukup fokus pada tampilan dan fungsi aplikasi yang optimal.<\/p>\n\n\n\n

Instalasi Cepat<\/strong><\/h3>\n\n\n\n

Kelebihan selanjutnya adalah proses instalasi yang cepat. <\/p>\n\n\n\n

Hal ini karena kalian memang tak perlu melakukan instalasi yang berbelit layaknya aplikasi mobile, cukup menambahkan website kalian ke HomeScreen maka aplikasi pun akan terpasang otomatis.<\/p>\n\n\n\n

Berfungsi Layaknya Aplikasi Mobile<\/strong><\/h3>\n\n\n\n

Pengguna mobile lebih suka mengakses informasi melalui aplikasi dibandingkan dengan browser. Itulah alasan jumlah aplikasi yang diunduh pengguna selalu meningkat tiap tahun.<\/p>\n\n\n\n

Hal ini karena user experience<\/em> yang ditawarkan aplikasi mobile lebih menyenangkan. <\/p>\n\n\n\n

Nah, kemampuan PWA menghadirkan pengalaman seperti aplikasi mobile sangat bermanfaat untuk meningkatkan engagement<\/em>. <\/p>\n\n\n\n

Ramah Bandwidth<\/strong><\/h3>\n\n\n\n

Berapa 23,5 MB untuk mengunduh aplikasi mobile Twitter. Jika menggunakan PWA, cukup membutuhkan 600 KB saja. Wow, amazing sih itu!<\/p>\n\n\n\n

Selain itu, interaksi ketika menggunakan PWA pun ramah bandwidth <\/em>karena hadirnya optimasi gambar yang memangkas kebutuhan data hingga 70%.\u00a0<\/p>\n\n\n\n

Ramah Storage<\/strong><\/h3>\n\n\n\n

Pengguna tak perlu merasa khawatir karena kehabisan storage saat menggunakan PWA. Alasannya adalah progressive web app <\/em>berukuran sangat kecil jika dibandingkan dengan aplikasi mobile.<\/p>\n\n\n\n

Contoh, aplikasi Pinterest hanya berukuran 688 KB saja untuk versi PWA, yang mana dengan ukuran kecil tentunya pengguna tidak akan ragu menggunakan karena tidak membebani kinerja perangkat. <\/p>\n\n\n\n

Cara Kerja Progressive Web App<\/strong><\/h2>\n\n\n\n

Kata progressive di depan kata web apps menandakan adanya peningkatan web modern pada website.<\/p>\n\n\n\n

Jika browser lama tidak mendukung fitur baru pada PWA, mereka masih tetap bisa menampilkan websitenya, kok. Tentunya website akan berfungsi lebih baik jika kalian mengaksesnya melalui browser modern.<\/p>\n\n\n\n

Aplikasi ini akan mendapatkan windows dan shortcut <\/em>sendiri di taskboard <\/em>kalian (di Windows 10 dan Chrome) atau ikon di homescreen <\/em>kalian (di perangkat Android dan smartphone lainnya).<\/p>\n\n\n\n

Saat membukanya, mereka akan loading <\/em>dengan cepat berkat API Cache dan IndexedDB, yang mana menyimpan sumber daya dan data aplikasi di perangkat kalian. Hal ini memungkinkan mereka bekerja bahkan ketika sedang offline.<\/p>\n\n\n\n

Teknologi seperti service workers dan push notifications akan memungkinkan aplikasi untuk melakukan background tasks<\/em>, seperti menyinkronkan dan mengirimi notifikasi bahkan ketika sedang tidak berjalan, seperti aplikasi asli.<\/p>\n\n\n\n

Fetch API membuat aplikasi dapat dengan lebih cepat dan lebih mudah meminta data. Mereka memiliki file Web App Manifest, yang memberikan nama, ikon, penulis, dan deskripsi yang digunakan saat memasang aplikasi ke homepage atau desktop.<\/p>\n\n\n\n

Mereka selalu ditampilkan melalui HTTPS terenkripsi, yang berarti mereka aman dan data tidak dapat diubah saat transit.<\/p>\n\n\n\n

Progressive Web Applications tidak seperti Chrome Packaged Apps milik Google atau Hosted Web Apps milik Microsoft. Mereka mengharuskan aplikasi untuk \u201cdikemas\u201d sebagai file dan diserahkan ke app store.<\/p>\n\n\n\n

Oleh karena itu, pengguna harus menginstall dari App Store Chrome atau Windows Store. Aplikasi-aplikasi ini juga hanya berfungsi di Chrome atau Windows. Pengembang harus mengubah file aplikasi offline dan mengirimkan versi baru ke app store untuk melakukan update.<\/p>\n\n\n\n

Sementara itu, Progressive Web Apps tidak pernah dikemas dalam file offline. Seperti aplikasi web tradisional yang kita gunakan saat ini nih, mereka di hosting sepenuhnya di server aplikasi.<\/p>\n\n\n\n

Jika developer <\/em>ingin memperbarui aplikasi web progresif mereka, mereka memperbarui persis seperti saat mereka memperbarui aplikasi web di server mereka. Semua platform dan browser yang mendukung PWA dapat menggunakan Progressive Web Applications yang sama.<\/p>\n\n\n\n

PWA dapat dicantumkan di app store untuk penemuan dan pemasangan yang lebih mudah tetapi app store hanya akan mengarah ke server aplikasi web. Pengguna akan dapat menemukan dan menginstal langsung dari browser mereka jika aplikasi tidak kompatibel dengan kebijakan konten app store.<\/p>\n\n\n\n

Contoh Progressive Web Apps <\/strong><\/h2>\n\n\n\n

Sebagian besar traffic <\/em>Twitter, kurang lebih 80%, berasal dari perangkat mobile. Inilah alasan mengapa pada tahun 2017 Twitter membangun PWA.<\/p>\n\n\n

\n
\"mengenal-progressive-web-app-1\"<\/a><\/figure><\/div>\n\n\n

Selain itu, Twitter meningkatkan performa websitenya dengan cara mengurangi penggunaan data melalui optimasi gambar dan pemanfaatan cache<\/em>.<\/p>\n\n\n\n

Tentu hasilnya adalah membuahkan hasil positif karena mereka mengurangi bounce rate<\/em> sebesar 20% dan jumlah tweet yang dikirim meningkat hingga 75%.<\/p>\n\n\n\n

Bagaimana Membangun Sebuah PWA <\/strong><\/h2>\n\n\n\n

Membangun sebuah PWA tidak terlalu sulit, kok Guys. Kalian cukup memenuhi ketentuan website yang baik lalu mengikuti tahapan cara membangun PWA sebagai berikut:<\/p>\n\n\n\n

Memastikan Website Kalian PWA-Ready <\/strong><\/h3>\n\n\n\n

Berbeda dengan aplikasi mobile, kalian tidak harus menunggu persetujuan Google dan Apple untuk mempublikasikan aplikasi. <\/p>\n\n\n\n

Untuk membuat website siap digunakan sebagai PWA, cukup menggunakan Lighthouse. Aplikasi ini akan mengaudit website apakah sudah sesuai dengan ketentuan penggunaan untuk PWA. <\/p>\n\n\n\n

Caranya sebagai berikut:<\/p>\n\n\n\n