Apa itu PWA? Penjelasan Mudah untuk Non-teknisi

Anda harus tahu sebelumnya bahwa posting ini ditulis berdasarkan sudut pandang pemasar. (Yah, saya bisa membaca dan menulis beberapa HTML dan CSS, saya bisa memahami Javascript sampai batas tertentu, tapi itu tidak membuat saya seorang teknisi).

Apa itu PWA?

PWA ( P rogressive Web A pps) memungkinkan browser web memiliki tampilan dan nuansa aplikasi seluler asli (yaitu aplikasi yang diunduh dari iOS & Android Stores). Aplikasi asli ini dioptimalkan untuk pengalaman seluler yang lancar sambil memiliki beberapa fungsi unik seperti pemberitahuan push web. Teknologi PWA memanfaatkan pengalaman menjelajah web di browser seperti Chrome & Safari, sehingga mendekati aplikasi asli. Akibatnya, meningkatkan lalu lintas & keterlibatan ke web.

Istilah ini pertama kali diperkenalkan oleh Google pada tahun 2015. Bagian "progresif", menurut Pete LePage - Advokat Pengembang Google, dapat dijelaskan sebagai " karena pengguna semakin membangun hubungan dengan aplikasi dari waktu ke waktu, itu menjadi semakin kuat. ”.

Apakah PWA sama dengan situs web?

Ya, Aplikasi Web Progresif adalah situs web.

Namun, berkat teknologi web modern, mereka hanya terlihat dan terasa seperti sebuah aplikasi. Ini berarti pengguna akan menelusuri Aplikasi Web Progresif di browser mereka dengan URL seperti yang mereka lakukan di situs web mana pun, tetapi segera setelah mereka mendarat di PWA, mereka mendapatkan pengalaman menggunakan "aplikasi", langsung di browser mereka, tanpa perlu Unduh dan pasang.

Menjadi "aplikasi" tidak berarti PWA terbatas pada seluler. Mereka dapat diimplementasikan di desktop juga. Bahkan, kemungkinan Anda sudah sering mengunjungi PWA sebelumnya tanpa Anda sadari. Jika Anda pernah browsing Instagram, Pinterest, atau Tinder di laptop Anda, maka selamat! Anda telah menemukan beberapa pengadopsi PWA paling sukses di web.

Mari kita lihat contoh situs web PWA, karena dapat membantu Anda memahami PWA dengan lebih mudah.

Contoh PWA

Situs web eCommerce G-SP adalah PWA. Saat Anda mengunjungi situs web di ponsel, Anda sebenarnya dapat menambahkan URL situs web ke layar beranda ponsel Anda.

Kemudian, kapan pun Anda ingin mengunjungi kembali situs web, itu ada di sana dengan ikon di layar beranda Anda sama seperti aplikasi lain seperti Facebook atau Linkedin.

Membuka aplikasi web G-SP dari layar beranda, Anda dapat melihat situs web sekarang dalam layar penuh tanpa bilah pencarian browser. Juga, ada menu navigasi seperti aplikasi di bagian bawahnya. Terlebih lagi, saat Anda menggulir dan mengetuk, rasanya sehalus mentega, yang tidak seperti beberapa pengalaman penelusuran web yang mungkin Anda miliki sebelumnya.

 Bacaan yang disarankan:
- Studi kasus G-SP PWA: transformasi untuk pengalaman seluler terbaik
- Top 3 kasus penggunaan PWA

Kiat untuk mengetahui apakah situs web adalah PWA

Kecuali Anda seorang pengembang dan menggali kode sumber situs, tidak ada cara pasti bagi Anda untuk mengetahui dengan tepat apakah sebuah situs web dibangun di atas teknologi PWA.

Meskipun demikian, ada beberapa trik yang, meskipun tidak menjamin hasil yang pasti, dapat memberi Anda beberapa tanda bahwa situs web tertentu adalah PWA.

Situs web satu halaman

Ini adalah cara paling sederhana untuk mengetahui apakah suatu situs web merupakan PWA. Ini didasarkan pada sifat PWA: Aplikasi Web Progresif secara teknis adalah situs web satu halaman. Ini tidak berarti situs web yang dibangun di atas PWA hanya memiliki satu halaman. Ini berarti acara tampilan halaman hanya terjadi sekali, ketika pengguna pertama kali memuat situs web. Setelah itu, semua pemuatan halaman ditangani oleh Javascript. Ini berbeda dengan situs web biasa, di mana setiap perubahan halaman menyebabkan halaman dimuat ulang bersama dengan seluruh sumber HTML-nya.

Jadi bagaimana ini bekerja? Sangat sederhana: lihat tab aktif di browser Anda. Jika situs tersebut adalah PWA, saat Anda mengubah halaman situs tersebut tidak memuat ulang, artinya tidak ada animasi “memuat” di tab browser.

Kami dapat memberi tahu bahwa situs web The New York Times bukan PWA:

Mari kita lihat situs web kami, SimiCart, sebagai contoh:

Lihat apa yang saya maksud? Situs tidak dimuat ulang saat Anda mengganti halaman! Secara teknis Anda hanya tinggal di satu "halaman" sepanjang waktu. Itu sebabnya halaman PWA dimuat dengan sangat cepat dan lancar. Semua halaman dimuat sebelumnya saat pertama kali Anda mengunjungi situs dan dikirimkan kepada Anda setelahnya. Mereka tidak bergantung pada kecepatan jaringan Anda, dan bahkan dapat bekerja secara offline!

Pekerja Layanan

Tidak, ini bukan pekerja manusia. Service Worker adalah nama teknologi di balik Progressive Web App, yang mendukung kemampuan offline, pemberitahuan push, dan caching sumber daya. Menurut Google, Service Worker adalah inti dari teknik PWA. Jadi, jika kami dapat mengetahui apakah sebuah situs web menggunakan teknologi Service Worker, kami dapat mengetahui apakah situs tersebut mungkin PWA.

Jika Anda menggunakan browser berbasis Chrome, Anda dapat memeriksanya dengan mudah menggunakan Alat Inspektur. Klik kanan pada situs web yang ingin Anda periksa, klik Inspect Element. Lalu, buka tab Aplikasi > Pekerja Layanan. Anda dapat dengan mudah melihat apakah ada Service Worker di situs itu.

Sekali lagi, trik ini hanya memberi Anda petunjuk tentang kemungkinan situs web tertentu adalah PWA. Meskipun menjadi bagian inti dari PWA, Service Worker tidak eksklusif untuk PWA. Situs web non-PWA juga dapat memanfaatkan Service Worker untuk meningkatkan fungsionalitasnya.

Jika Anda ingin mengetahui lebih lanjut tentang PWA Service Worker, kami memiliki artikel eksklusif untuk Anda pelajari semua tentang teknologi luar biasa ini.

Asal aman HTTPS

Namun, Anda dapat mengetahui dengan tepat apakah sebuah situs web bukan PWA dengan melihat URL-nya. Jika URL situs web dimulai dengan http:// bukan https:// , itu bukan PWA. Ini karena PWA hanya dapat bekerja pada situs web yang berjalan di domain aman, yaitu HTTPS .

Seberapa populer PWA?

Seperti yang disarankan Google, PWA adalah "masa depan aplikasi seluler", PWA mendapatkan popularitas, pertama di antara pemain besar, kemudian bisnis dan organisasi yang lebih kecil.

Ini mendorong kompetisi hampir di mana-mana—dari platform Windows hingga pasar aplikasi utama seperti Google Play Store

Anda dapat menemukan bahwa banyak situs web nama besar adalah PWA seperti Telegram, AliExpress, FlipBoard dan bahkan versi PWA dari game PWA yang sudah dikenal seperti 2048 atau Web Flap.

Manfaat PWA: Apa yang dapat dilakukan Aplikasi Web Progresif?

Pada saat artikel ini ditulis, PWA sudah dapat melakukan sebagian besar hal yang sebelumnya eksklusif untuk aplikasi asli. Itu termasuk akses ke fungsionalitas tingkat perangkat seperti kamera & mikrofon, GPS, mode offline, akses file, dan banyak lagi. Untuk mendapatkan gambaran tentang kemampuan PWA, Anda dapat melihat https://whatpwacando.today/ .

Oleh karena itu, aplikasi web adalah pilihan tepat bagi mereka yang ingin meningkatkan pengalaman seluler merek mereka secara online, tanpa berinvestasi dalam aplikasi seluler.

Mari selami lebih dalam manfaat PWA dibandingkan aplikasi seluler biasa dan situs web responsif:

PWA vs situs web responsif

Dibandingkan dengan, katakanlah, sebuah situs web , PWA lebih unggul karena alasan berikut:

• Kecepatan: Dengan konten yang sama, PWA memuat lebih cepat daripada situs web biasa berkat teknologi Service Workers . Ini cepat pada pemuatan pertama dan bahkan lebih cepat pada pemuatan kedua dan seterusnya karena pra-cache semua konten dan mengirimkannya saat dibutuhkan.
• Mode offline : Ketersediaan offline juga dimungkinkan dengan teknologi Service Worker. Dengan pekerja layanan terintegrasi dengan benar, semua konten dimuat sebelumnya saat pertama kali Anda mengunjungi PWA dan dikirimkan setelahnya menggunakan Javascript, menjadikan PWA pendekatan baru untuk situs web yang pengalaman tanpa gangguan adalah suatu keharusan . Kami memiliki panduan tentang Cara membuat PWA Anda berfungsi offline, jika Anda membutuhkannya.
• Pemberitahuan push web: Sama seperti aplikasi seluler asli, PWA dapat mengirim pemberitahuan push ke layar beranda pengguna langsung dari browser web seluler. Ini sangat membantu toko eCommerce untuk mengirim penawaran & penawaran yang dipersonalisasi kepada pelanggan mereka. Push web untuk PWA Android telah diaktifkan selama berabad-abad, dan untungnya, itu akan segera hadir di PWA iOS.
• Tambahkan ke layar beranda : Fungsi ini meminta pengguna ponsel untuk “menginstal” PWA. Setelah pengguna menerima prompt, PWA akan ditambahkan ke layar beranda ponsel mereka, dan itu akan berjalan seperti aplikasi terpasang lainnya. Berikut adalah panduan kami untuk Menambahkan PWA ke Layar Beranda. Jangan lewatkan!

Prompt "Tambahkan ke layar beranda" lama di Chrome akan terlihat seperti ini:

 >> Bacaan yang disarankan: Perbandingan lengkap PWA vs Situs Web Responsif

PWA vs Aplikasi Asli

Dan tidak hanya PWA lebih baik daripada situs web, tetapi merek juga sekarang memilih PWA daripada aplikasi asli karena fasilitas berikut yang dibawa PWA:

• Cross-platform : Setelah PWA dibuat, PWA dapat diakses melalui platform seluler apa pun seperti Android, iOS, atau Windows, karena PWA berbasis browser, bukan berbasis OS.
• Up-to-date : Perubahan yang dibuat pada PWA akan segera berlaku, segera setelah pengguna me-refresh halaman.
• Indexability : Karena PWA secara teknis masih sebuah situs web, isinya dapat diindeks dan ditemukan di mesin pencari seperti Google. Ini membuka peluang untuk praktik SEO (Search Engine Optimization), yang memungkinkan PWA menjangkau basis pengguna yang lebih besar dibandingkan dengan aplikasi asli.
• Tidak perlu mempublikasikan : Dengan aplikasi asli, proses penerbitan toko aplikasi terkadang bisa sangat merepotkan. Bayangkan mengirimkan aplikasi Anda ke toko aplikasi, menunggu dengan penuh semangat selama 5 hari, hanya untuk mendapatkan kembali penolakan dengan alasan yang membawa Anda 10 kali untuk membaca ulang dan masih tidak tahu apa yang dibicarakan. Dan dalam beberapa kasus, aplikasi Anda mungkin tidak akan pernah diterima. (Toko seks atau produk vape, siapa saja?). Dengan PWA, tidak ada pengajuan aplikasi. Apa yang lega! Jika Anda ingin memublikasikan PWA Anda ke Apple Appstore, Google Play, dan Microsoft Store, berikut caranya!
• Biaya pengembangan rendah : Karena PWA dapat dikembangkan sekali dan kemudian tersedia untuk semua platform seluler dan browser yang mendukungnya, biaya pengembangan untuk PWA relatif kecil dibandingkan dengan aplikasi asli. Alasan lainnya adalah PWA menggunakan bahasa dan teknologi pemrograman yang lebih umum dipahami dan memiliki basis pengembang yang jauh lebih besar.

 Bacaan yang disarankan:
- Aplikasi Web Progresif vs Aplikasi Asli: Mana yang lebih cocok untuk Anda?
- Manfaat PWA untuk eCommerce

Kekurangan PWA

Jelas, semua ini terdengar terlalu bagus untuk menjadi kenyataan; dan ketika sesuatu tampak terlalu bagus untuk menjadi kenyataan, orang sering bertanya "Oke, apa masalahnya".

PWA, terlepas dari karakteristiknya yang menentukan industri, masih memiliki kekurangan:

• keterjangkauan

Mengingat teknologinya masih baru dan semuanya, tidak ada pasar aplikasi saat ini untuk PWA yang pada gilirannya mengurangi kemampuannya untuk menjangkau audiens yang lebih luas dengan cara tertentu. Namun, ada gerakan dari perusahaan terkenal seperti Microsoft dengan penggabungan PWA ke dalam Microsoft Store, membuat masa depan semua hal PWA di Windows 10 tampaknya tidak terlalu mengada-ada.

• Komunikasi dengan aplikasi lain yang diinstal :

Karena PWA pada dasarnya masih merupakan halaman web seperti aplikasi, PWA dapat dibatasi dalam banyak hal. Keterbatasan terbesar mungkin adalah keterbatasan komunikasi lintas aplikasi , yang mungkin menjadi masalah bagi pengembang.

FAQ

Untuk apa PWA digunakan?

Aplikasi web yang cepat, andal, dan menyenangkan untuk digunakan dapat disajikan untuk berbagai tujuan. Misalnya, Tik Tok, PWA Aliexpress membuat orang membiasakan diri dengan situs, sehingga, mendorong mereka untuk mengunduh aplikasi asli mereka. Spotify menggunakan PWA untuk mengoptimalkan kinerja dan daya tanggap situs web mereka lebih jauh, dengan demikian, menawarkan opsi lain kepada pengguna selain mengunduh aplikasi mereka. Game seperti pacman atau 2048 juga menggunakan PWA untuk menjangkau lebih banyak pengguna web.

Apa perbedaan antara PWA & aplikasi biasa?

Dari perspektif teknis, aplikasi asli perlu diunduh dari toko aplikasinya sementara Anda dapat mengakses PWA melalui browser web. Dari segi bisnis, PWA bisa lebih SEO-friendly, lebih murah & lebih cepat untuk dikembangkan. Sementara itu, aplikasi asli masih terbaik untuk proyek seluler yang rumit, juga dapat menciptakan kredibilitas merek yang lebih kuat.

Apakah PWA hanya berfungsi di perangkat seluler?

Tidak, PWA berfungsi di desktop, seluler, dan tablet.

Apa bahasa pemrograman PWA?

PWA dibangun dengan bahasa pemrograman populer dan teknologi web termasuk HTML, CSS, Javascript dan WebAssembly.

Kesimpulan

“Akankah PWA menggantikan aplikasi asli?”

Kami pikir tidak.

Belum.

Pada kuartal keempat 2019, ada hampir 3 juta aplikasi di Google Play dan lebih dari 2 juta aplikasi di Apple App Store (Statista, 2019). Jumlah ini masih terus bertambah dan sepertinya semua aplikasi itu tidak akan diganti dalam waktu dekat. Kebiasaan pengguna adalah suatu hal dan tidak mudah diubah.

Meskipun demikian, Aplikasi Web Progresif memang memiliki potensi besar. Di SimiCart, kami percaya Progressive Web Apps adalah masa depan. Dengan kecepatan, fleksibilitas tata letak, dan kemampuan fitur, PWA ditakdirkan untuk menggantikan situs desktop, situs seluler, aplikasi seluler asli, dan bahkan aplikasi windows asli. Ya, Anda mendengarnya dengan benar, aplikasi windows . Di dunia e-Commerce saja, Progressive Web App saat ini merupakan pendekatan yang tepat bagi pemilik toko yang menginginkan pengalaman yang ringan, responsif, dan menarik bagi pembeli online.

Faktanya, statistik menunjukkan bahwa penundaan 1 bulan dalam implementasi PWA dapat mengakibatkan kerugian pendapatan sebesar $1,4 juta , dan $6,8 juta lainnya jika merek memutuskan untuk menundanya selama enam bulan.

Untuk pemilik toko e-Commerce yang mencari solusi PWA Magento yang sempurna, di sini di SimiCart kami menawarkan paket lengkap untuk Anda dan toko Anda.