Artikel terbaru leafcoder ini akan membahas secara lengkap tentang PWA ( Progressive Web Application ) : Pengertian, Manfaat, dan Cara Membuat PWA dengan mudah menggunakan PWABuilder dan bisa langsung diimplementasikan di Website Anda. Sebelum membahas tentang PWABuilder, ada baiknya Anda tahu terlebih dahulu tentang Progressive Web Application ini.

Pengertian PWA

Apa itu PWA? Progressive Web Application (PWA) adalah salah satu metode pembuatan perangkat lunak (software) berbasis mobile experience. PWA adalah kombinasi antara website in general dengan aplikasi mobile dan dekstop.Hasil dari metode Progressive Web Application adalah fitur dari website dengan optimasi mobile experience yang lebih baik.

Manfaat PWA

Mengapa harus Progressive Web Application? Lebih bagus pakai native apps kan? mungkin pertanyaan ini terlintas dipikiran Anda para mobile developer yang baru tahu dan baru ingin mulai belajar PWA. Jika hanya dengan native sudah cukup, mengapa sebagian besar perusahaan IT di dunia sudah mengimplementasi PWA ini di website-website mereka? Tentu ini akan menjadi pertanyaan selanjutnya yang terpikirkan dibenak kita semua. 

Inilah Manfaat dan Alasan Mengapa Harus Menggunakan PWA pada Website Anda

1. Faster alias Lebih Cepat

Lebih Cepat? Ya, dengan Progressive Web Application (PWA), Website Anda akan lebih cepat dibanding sebelumnya. Dengan fitur cache dan service worker, Website PWA Anda akan running secara seamless seperti native app, data lebih hemat seperti website pada umumnya. Kombinasi yang cukup sempurna untuk saat ini.

2. Reliable alias Bisa Diandalkan

Metode Progressive Web Application (PWA) jika diimplentasikan pada website akan tetap bisa digunakan kapanpun meski jaringan internet sedang tidak stabil ataupun saat offline. Mengapa demikian? karena adanya fitur Service Worker didalamnya. Fungsi dari service worker ini adalah menyimpan data yang masuk kedalam perangkat saat mengakses URL website. Data disimpan dalam bentuk Cache. Selama perangkat belum di cleaning menggunakan software cleaner, maka cache dari service worker ini akan tetap ada dan bisa tetap di buka meskipun tanpa menggunakan koneksi internet. Sangat bisa diandalkan bukan?

3. Meningkatkan Engagement dan bisa Kurangi Bounce Rate

Aplikasi yang dibuat menggunakan metode PWA akan lebih cepat dari sisi akses dan juga lebih nyaman digunakan oleh penggunanya. Mengapa? Karena saat menggunakannya, tidak perlu menginstall aplikasi yang membutuhkan space penyimpanan. Dengan PWA, tidak perlu khawatir memori penyimpanan terpakai banyak seperti saat menginstall aplikasi mobile lainnya.

PWABuilder: Pengertian, Manfaat, dan Cara Membuatnya

Pengertian PWABuilder

PWABuilder adalah tools yang berfungsi untuk mengubah sebuah aplikasi web menjadi PWA (Progressive Web Application)  dengan standar resmi Manifes Aplikasi Web W3C. Anda dapat menggunakan dan membuat langsung secara online di pwabuilder.com atau mengunduhnya dari repositori GitHub mereka dan menjalankannya di terminal Anda.

Siapa yang menciptakan PWABuilder?

PWABuilder dibuat oleh Microsoft dan saat ini dikembangkan sebagai open source project berbasis komunitas. Google juga memberikan Bubblewrap CLI sehingga PWA Package yang dihasilkan oleh PWABuilder ini dikenal sebagai TWA di Play Store.

Apa yang dapat Anda lakukan dengan PWABuilder ini?

Dengan hanya melakukan submit URL, Anda bisa langsungmengubah aplikasi web yang ada (berjalan secara lokal atau diterapkan ke cloud) menjadi PWA ataupun juga bisa menggabungkannya untuk platform yang berbeda.

Apa yang membedakan PWA dari aplikasi web biasa?

Meskipun PWA masih berjalan di browser seperti aplikasi web lainnya, PWA terlihat dan terasa seperti aplikasi asli. Mereka dapat diinstall, menskalakan secara visual untuk mengisi ruang layar platform apa pun (sering disebut dengan istilah responsive) dan bahkan mendukung fungsionalitas offline alias bisa tetap diakses meskipun tidak ada koneksi internet! Dibandingkan dengan aplikasi web biasa, mereka menggunakan dua teknologi baru yaitu :

1. Web Apps Manifest

Manifes aplikasi web adalah file JSON yang mendeskripsikan aplikasi ke browser dan memberi tahu cara berperilaku saat diinstall di perangkat. Manifes aplikasi web biasanya mencakup nama, ikon, dan URL aplikasi web.

2. Service Worker

Service Worker adalah file JavaScript berbasis event yang memberikan fitur "app-like", seperti push message, tanpa mengonsumsi sumber daya (storage) berlebih di perangkat sehingga tidak perlu khawatir ruang penyimpanan berkurang saat menginstall PWA ini. Selain it, service worker juga berperan langsung menyimpan cache yang nantinya bisa tetap diakses meskipun tidak ada jaringan internet atau sering disebut dengan offline mode.

Bagaimana Cara Membuat Aplikasi Mobile menggunakan PWABuilder?

Contoh Aplikasi Mobile Android berbasis webview yang pernah Leafcoder.org buat adalah Leafcoder Mobile. Selain Aplikasi Mobile Android, Anda juga bisa membuat aplikasi mobile khusus untuk Samsung dan juga Windows.

Bagaimana cara membuatnya? Cara membuat PWA menggunakan PWABuilder sangatlah mudah dan 100% Gratis. Simak step by step cara membuat aplikasi android, samsung, dan windows berbasis webview dengan menggunakan PWABuilder dibawah ini :

1. Buka website PWABUILDER.COM, masukkan URL Website Anda dan klik Start

Langkah 1 Tutorial PWABuilder by Leafcoder

2. Klik Build My PWA yang berada pada kanan atas halaman (lihat screenshot dibawah ini)
 

Langkah 2 Tutorial PWABuilder by Leafcoder

3. Akan muncul tampilan seperti berikut ini, jika Anda belum pernah mengkonfigurasi Progressive Web Application di website Anda, klik download (icon tanda panah ke bawah) di section Progressive Web Application. 

Langkah 3 Tutorial PWABuilder by Leafcoder

4. Jika sudah terdownload, extract file lalu temukan file manifest.json. Buka menggunakan teks editor kemudian edit bagian-bagian yang kami checlist kuning dengan data website Anda. Pastikan sudah sesuai semua dengan website Anda, lalu Save (CTRL+S).

Langkah 4 Tutorial PWABuilder by Leafcoder

5. Upload file manifest.json tadi di Root Directory website Anda, atau jika Anda pengguna Blogger bisa menggunakan Github untuk menyimpan file tersebut. Contoh implementasi upload file minfest.json pada Github :

https://raw.githubusercontent.com/prasetyalc/leafcoderPWA/main/site.webmanifest

6. Jika sudah memiliki link RAW Github seperti diatas, langkah selanjutnya adalah meletakan beberapa script dibawah ini dibawah <head>, Save.

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6hZOFIUVHyb6eo7lXdMXE1NQPMyY4aXZiOGozWuSx5EdXfEx9SWVvXM3fhdyhx_Da436MYJyb3fpxinGT_GsLn5-LuBaDbi0mv8LuH97xE6engi6S0mtWq6GN5QM7JC9fge4B5GpCNzup/s0/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rNHOfCZoAdzo3XusRjgWNigYrZ55DNlh_LMHL8EVSWnEaHik_8rO6XRg5b8uZ3n386QzUel2372t7fwarXe8to22v8RzZvC1ArqCnGKjU7qy7R8uvnA60NNjBbpMKykTZ20rES2Hx2XR/s0/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgpO6JdiN5yBfOgg6WiaFOuzQbQ278cNzrQQQFQ4VFDzDp38GgCkGLR-b7fziqfsp-diTirZRqFJL_6o4m2tU-ueLaUWHgAxDqxgXW_MAHcaACWX5xEV_walPkAfDLGg6cHANVhtBF7fkg/s0/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>

<link href='https://raw.githubusercontent.com/prasetyalc/leafcoderPWA/main/site.webmanifest' rel='manifest'/>

Tips : Untuk membuat app icon, Anda bisa gunakan tools Image Generator dari PWABuilder disini

Implementasi :

Langkah 6 Tutorial PWABuilder by Leafcoder

7. Jika sudah selesai, Anda bisa langsung mendownload File instalasi Android, Windows 10, dan juga Samsung.

Langkah 7 Tutorial PWABuilder by Leafcoder

Nah itu dia Penjelasan tentang PWABuilder: Pengertian, Manfaat, dan Cara Membuatnya. Jika ada pertanyaan atau ingin berdiskusi tentang artikel ini, silakan tingkakan pada kolom komentar dibawah ya. Semoga bermanfaat.