Progressive Web Apps (PWA): Apa Itu dan Cara Kerjanya

Apa itu Progressive Web Apps atau PWA?

Progressive Web Apps adalah kombinasi teknologi aplikasi native dan aplikasi web berbasis HTML5 yang kita kenal. PWA telah datang untuk menjembatani kesenjangan teknologi antara aplikasi dan halaman web.

Google telah menjadi salah satu advokat utama dalam mendorong pengembangan jenis teknologi ini. Untuk memahami fiturnya dengan lebih baik, kita perlu berbicara tentang aplikasi yang harus andal, cepat, dan menarik.

Fitur yang harus dimiliki Progressive Web Apps

Untuk membuat konsep PWA cukup jelas dan dijelaskan, mari kita selami fitur-fitur esensial yang harus dimiliki teknologi ini.

Tentu saja, kita berbicara secara umum. Dari sana, setiap model bisnis/layanan akan menyesuaikan tujuannya dengan kebutuhan target audiens-nya.

Kecepatan

Waktu adalah uang, tidak hanya untuk Google tetapi untuk semua bisnis di mana loading lambat dari produk mereka dapat menyebabkan pengguna meninggalkan potensi pembelian.

Google telah menekankan premis ini sejak lama. Kelahiran proyek AMP memiliki tujuan ini, dan sekarang PWA bergabung dengan kebutuhan akses cepat ke informasi dari aplikasi.

Pengguna saat ini tidak memiliki kesabaran; mereka tidak menunggu situs untuk dimuat sepenuhnya. 53% pengguna tidak akan menunggu lebih dari 3 detik agar situs web dimuat, menurut Think with Google

Andal

Ketika kita berbicara tentang keandalan, kita merujuk pada jaminan operasi situs. Berkat apa yang dikenal sebagai Service Worker, masalah koneksi jaringan seharusnya tidak mencegah PWA dimuat.

Dapat diinstal

PWA dapat diinstal tanpa perlu pergi ke Chrome Store, Apple Store, atau toko aplikasi yang ada. Ingatlah bahwa mereka bukan aplikasi native, jadi kita dapat mengaksesnya tanpa melalui toko-toko ini.

Instalasi berperilaku sederhana sebagai shortcut; ia tidak membutuhkan ruang untuk menyimpan berbagai file.

Perangkat berbeda: Mobile dan Desktop

Codebase dipersatukan antara kedua perangkat, yang berarti teknik responsive design berlaku untuk mobile dan desktop.

Kelebihan dan kekurangan PWA

Beberapa keunggulan telah disebutkan di atas saat menjelaskan fitur aplikasi progresif. Tetapi ada banyak alasan lagi untuk mempertimbangkan menggunakan teknologi ini dalam bisnis kita.

• ›Penghematan sumber daya
• ›Tidak perlu instalasi
• ›Kecepatan loading sangat tinggi
• ›Push notification langsung ke smartphone
• ›Berjalan di semua sistem operasi
• ›Keamanan yang ditingkatkan
• ›Pekerjaan pengembangan dan pemeliharaan lebih sedikit dibandingkan aplikasi native.
• ›Lebih ekonomis daripada aplikasi native.

Kekurangan

• ›Membutuhkan koneksi internet.
• ›Tidak semua browser mendukung PWA.
• ›Konsumsi baterai tinggi

Apa itu Service Worker?

Kembali sebentar ke sisi teknis, kita perlu berbicara tentang aspek tertentu yang tanpanya aplikasi progresif tidak dapat berfungsi. Service worker adalah script yang berjalan di latar belakang, membuat permintaan ke aplikasi web, cache, atau jaringan itu sendiri.

Satu hal penting yang harus kita ketahui adalah bahwa Service Worker hanya dapat berfungsi jika Anda memiliki sertifikat SSL dan menyajikannya melalui https.

Sekarang mari kita lihat semuanya dengan contoh: situs web BMW dan PWA-nya.

Contoh PWA: BMW

Saya telah mencoba menulis artikel tanpa mendalam ke aspek teknis, dan sekarang kita akan melihat contoh aplikasi yang akan membantu lebih memahami konsep PWA.

Jika kita memasuki situs web BMW, kita dapat melihat bahwa mereka memiliki desain yang sangat menarik, memprioritaskan visual, tetapi di luar berbicara tentang desain, mari kita lihat jenis situs web yang sedang kita hadapi.

Tampaknya itu adalah situs web "normal", tetapi jika Anda menggali kodenya kita mendapatkan kejutan pertama kita. Memang, ini adalah situs web yang sepenuhnya dikembangkan dalam AMP, tidak hanya versi mobile.

Tetapi mari kita masuk ke masalah yang ada hari ini.

Setelah di dalam situs web, mari kita pergi ke bilah "customize and control" Chrome.

Seperti yang Anda lihat, jendela telah terbuka dengan konten situs web BMW. Membandingkan kedua konten, kita melihat bahwa mereka praktis identik.

Gambar situs web di browser (Chrome)

Gambar situs web di PWA desktop

Pengembang BMW berhasil mempertahankan tampilan visual yang identik. Ketika kita menerima "instalasi" PWA di folder aplikasi Chrome kita atau bahkan di desktop (tergantung OS, saat ini saya menggunakan MacOS), shortcut ke PWA telah diunduh.

Jika kita kewalahan dengan menginstal aplikasi dan ingin menghapus, kita hanya perlu pergi ke jendela versi PWA kita, klik di sisi kanan seperti di Chrome, dan pilih uninstall.

Pada versi mobile praktis serupa. Ketika kita memasuki situs web dengan versi PWA, kita menerima notifikasi untuk "buat shortcut."

Saat memasuki situs web dengan PWA; kita akan melihat opsi untuk membuat shortcut.

Jika kita menerima, kita akan melihat ikon PWA di desktop mobile kita.

DevTools untuk mempelajari lebih lanjut tentang PWA

Pada titik ini, saya ingin menyelami contoh untuk menjelaskan konsep dan fitur jenis aplikasi ini.

Untuk ini kita akan menggunakan alat developer yang disediakan Chrome (DevTools). Kita membuka inspector dengan tombol kanan dan pergi ke Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifest adalah file JSON kecil dengan aspek style dasar yang disediakannya ke browser untuk menghindari perubahan abrupt.

Contoh Manifest (JSON)

Service Worker

Seperti yang kami jelaskan sebelumnya, sekarang kita dapat melihat tentang apa itu. Kita melihat file JS dan di dalamnya script yang digunakannya. Service Worker diinstal di browser. Kita akan memiliki beberapa dari aplikasi web lain.

Salah satu fungsi utama dari jenis kode ini adalah memastikan bahwa versi yang sama selalu disajikan (ia mengontrol cache) bahkan jika kita membuka tab lain.

Bagaimana mengimplementasikan PWA di WordPress?

Sementara jika kita telah mengembangkan situs web kita dengan kode kita sendiri kita harus melakukan cukup banyak pekerjaan manual, situasi akan sangat berbeda jika kita telah mengembangkan situs web kita di WordPress. Jika ini kasusnya, kita akan memiliki beberapa plugin yang tersedia yang akan memungkinkan kita mengaktifkan teknologi PWA dalam beberapa klik. Versi PWA SEO Alive, sebenarnya, adalah hasil dari plugin yang kami rekomendasikan ini.

Plugin paling populer untuk mengimplementasikan PWA di WordPress.

PWA dalam Marketing

Bagi kita yang bekerja di marketing, Progressive Web Apps dapat membantu kita mencapai tujuan yang dimiliki setiap departemen marketing untuk menumbuhkan brand.

Loyalitas dan Penjualan

Salah satu tujuan yang paling buruk dikerjakan oleh beberapa brand. Kita semua tahu rendahnya keterlibatan yang dimiliki brand ponsel saat memperlakukan pelanggan mereka, untuk memberi contoh.

Push notification di PWA adalah salah satu tindakan yang paling baik bekerja dan berkontribusi pada generasi penjualan.

Sebuah studi yang dilakukan oleh Gartner tentang PWA memberi kita serangkaian statistik yang sangat menarik tentang Lancome dan Alibaba; Lancome melaporkan peningkatan 17% dalam konversi, 51% dalam sesi dari perangkat seluler, dan 52% di iOS. Alibaba (grup tempat Aliexpress berasal) telah meningkatkan tingkat konversinya sebesar 76%.

Meskipun kita telah berbicara tentang 2 raksasa global, memiliki aplikasi di mobile Anda di mana waktu loading dan eksekusi tidak lambat, ditambah menghormati desain yang baik, telah terbukti meningkatkan tingkat konversi.

Sebagai kesimpulan, kita dapat mengatakan bahwa PWA semakin menyebar, terutama di antara brand besar. Di Spanyol, kita mungkin akan butuh sedikit waktu untuk menyadari potensi besar teknologi ini, tetapi cepat atau lambat akan diimplementasikan.

Setiap teknologi yang memfasilitasi navigasi mobile memiliki kepentingan besar; kita menghabiskan banyak jam dengan smartphone kita, dan pada akhirnya, akses ke konten dan produk adalah bisnis.

Referensi

• ›Dokumentasi Google tentang PWA