PWA vs. AMP: Mana yang Lebih Baik & Apa Perbedaannya Satu Sama Lain?

Sekitar satu dekade setelah pengenalan iPhone pertama, web seluler akhirnya mengikuti gaya hidup penggunanya. Jepit dan zoom telah dihapus oleh halaman responsif. AMP dan aplikasi asli melawan waktu muat yang lambat…

Namun masih ada area masalah utama untuk web seluler: keterlibatan. 1.000 situs web seluler teratas menjangkau 4x lebih banyak orang daripada 1.000 aplikasi asli teratas. Namun, situs web tersebut melibatkan pengguna selama 20x lebih sedikit, rata-rata, daripada aplikasi seluler.

Tampaknya situs web seluler dapat menarik pengunjung, tetapi tidak mempertahankannya. Salah satu teknologi baru yang memecahkan masalah ini adalah aplikasi web progresif.

Apa itu aplikasi web progresif?

Aplikasi web progresif adalah pengalaman situs web seluler yang dirancang untuk terlihat, terasa, dan berfungsi seperti aplikasi seluler asli. Pengguna menemukannya di browser seperti yang mereka lakukan di situs web seluler mana pun. Setelah terlibat dengan situs itu, pengguna diminta untuk menginstal aplikasi web di perangkat mereka. Jika mereka memilih untuk menginstal, aplikasi akan mengunduh ke perangkat seperti halnya aplikasi asli.

Istilah "aplikasi web progresif" diciptakan oleh Google pada tahun 2015. Perusahaan mengatakan aplikasi web progresif memenuhi tiga kriteria:

• Andal – Muat seketika dan tidak pernah menunjukkan downasaur, bahkan dalam kondisi jaringan yang tidak pasti.
• Cepat – Tanggapi interaksi pengguna dengan cepat dengan animasi yang halus seperti sutra dan tanpa pengguliran yang tersendat-sendat.
• Terlibat – Merasa seperti aplikasi alami di perangkat, dengan pengalaman pengguna yang imersif.

Setelah memenuhi persyaratan ini, aplikasi web seluler dapat ditawarkan sebagai dapat diunduh kepada pengguna. Sebelum kita menyelam lebih dalam ke aplikasi web progresif, mari kita mundur ke permukaan sebentar dan mendefinisikan aplikasi asli dan teknologi lain yang mempercepat web seluler, Accelerated Mobile Pages (AMP).

Apa itu aplikasi asli?

Aplikasi asli dipasang melalui pasar seperti App Store atau Google Play dan ditampilkan sebagai ikon di layar beranda perangkat. Mereka dirancang khusus untuk perangkat tertentu, dan dapat menggunakan semua fiturnya, seperti GPS, kamera, daftar kontak, dan banyak lagi. Ini adalah aplikasi yang kemungkinan ada di perangkat Anda saat ini, seperti Google Maps, Gmail, atau Instagram.

Apa itu AMP?

Proyek Accelerated Mobile Pages open-source (singkatnya AMP) memungkinkan pengembang untuk membangun halaman web yang memuat hampir secara instan dengan bahasa pengkodean yang unik. Bahasa itu adalah versi sederhana dari HTML dan CSS yang membatasi penggunaan JavaScript. Halaman-halaman ini di-host di CDN, yang memberikan versi halaman yang di-cache saat dikunjungi oleh pengguna.

Aplikasi web progresif vs. aplikasi asli

Aplikasi asli menawarkan pengalaman pengguna yang instan dan mulus, dan didukung oleh pasar besar seperti App Store dan Google Play, jadi mengapa memilih aplikasi web progresif daripada versi asli tradisional? Dalam sebuah artikel untuk Forbes, Andrew Gazdecki menawarkan penjelasan tingkat tinggi:

Situs web seluler cepat dan mudah diakses, tetapi cenderung kurang menyenangkan terkait pengalaman pengguna. Aplikasi asli memberikan pengalaman pengguna terbaik, tetapi terbatas pada perangkat tertentu dan memiliki hambatan tinggi untuk adopsi. Aplikasi asli memerlukan pengunduhan, yang berarti menghasilkan banyak pembelian dari konsumen terlebih dahulu dan kehilangan manfaat dari perilaku impulsif. Duduk di antara opsi ini adalah solusi seluler terbaru: PWA.

Untuk penjelasan yang lebih halus, mari kita lihat beberapa perbedaan terbesar antara aplikasi asli dan aplikasi web progresif:

• Penggunaan fitur: Saat ini, sementara aplikasi web dapat memanfaatkan fitur perangkat, aplikasi asli dapat memanfaatkannya lebih dari itu. Hal-hal seperti GPS, pemberitahuan push, dan gerakan lebih mudah tersedia di aplikasi asli.
• Pembatasan konten: Untuk memberi aplikasi Anda kesempatan bersaing di Google Play atau App Store, Anda harus mematuhi aturan pasar. Pembatasan konten dan biaya mempersulit beberapa situs web untuk membuat aplikasi asli yang sukses. Namun, untuk aplikasi web, baik pembatasan konten maupun biaya tidak dikenakan, sehingga memudahkan siapa pun untuk membuat aplikasi apa pun jenis kontennya.
• Konektivitas offline: Di sini, keunggulannya mengarah ke aplikasi asli, yang menawarkan caching yang lebih lengkap daripada aplikasi web progresif yang dibangun di HTML5. Jika aplikasi Anda harus bekerja secara offline, saat ini pilihan yang lebih baik adalah yang asli.
• Pemasangan: Pemasangan aplikasi asli memerlukan tindakan signifikan atas nama pengguna. Mereka harus membuka pasar dan mencari aplikasi, lalu mengunduh. Harus ada niat yang serius. Untuk pemasangan aplikasi web progresif, gesekannya jauh lebih sedikit. Menambahkan satu ke perangkat Anda seperti membuat bookmark di layar beranda. Lebih mudah untuk menginstal aplikasi web progresif, tetapi prosesnya kurang familiar, yang dapat menghambat adopsi awal.
• Kecepatan: Saat ini, aplikasi web progresif tertinggal dari aplikasi asli. Namun, mereka terus menutup celah. Itu terutama benar ketika Anda mempertimbangkan perbandingan berikutnya.

Aplikasi web progresif vs. AMP

Orang-orang seperti Gazdecki percaya bahwa aplikasi web progresif pada akhirnya akan menggantikan aplikasi asli, tetapi bagaimana dengan AMP? Di mana halaman seluler yang dipercepat masuk ke sini, dan apakah ada tempat untuk keduanya? Beberapa perbedaan utama antara keduanya:

• Discoverability: AMP memenangkan pertempuran ini. AMP mendapat bantuan carousel dalam hasil pencarian Google, di mana aplikasi web progresif tidak diberikan dorongan dalam penemuan mesin pencari.
• Keterlibatan: Aplikasi web progresif tidak dibatasi untuk menggunakan AMP HTML atau CSS, sehingga mereka dapat menyertakan konten yang jauh lebih menarik daripada yang dapat dilakukan AMP. Apa pun interaktif yang memerlukan JavaScript tidak dapat dibuat menggunakan kerangka kerja AMP. Untuk AMP, konten dinamis tidak tersedia.
• Kecepatan: Keunggulan di sini adalah AMP untuk alasan yang sama dengan aplikasi web progresif memenangkan keterlibatan. AMP hanya dapat mendukung konten ringan, tetapi itu membuat waktu muat lebih cepat.

Dalam Majalah Smashing, Paul Bakaus merangkum tradeoff antara dua format dengan baik:

Untuk membuat pengalaman menjadi andal dengan cepat, Anda harus menghadapi beberapa kendala saat mengimplementasikan halaman AMP. AMP tidak berguna saat Anda membutuhkan fungsionalitas yang sangat dinamis, seperti Pemberitahuan Push atau Pembayaran Web, atau apa pun yang memerlukan JavaScript tambahan.

Selain itu, karena halaman AMP biasanya disajikan dari Cache AMP, Anda tidak akan mendapatkan manfaat Aplikasi Web Progresif terbesar pada klik pertama tersebut, karena Service Worker Anda sendiri tidak dapat berjalan. Di sisi lain, Progressive Web App tidak akan pernah bisa secepat AMP pada klik pertama itu, karena platform dapat dengan aman dan murah merender halaman AMP – sebuah fitur yang juga membuat penyematan menjadi lebih sederhana (misalnya, menjadi penampil inline).

Tapi, pada akhirnya, apakah kita benar-benar harus memilih salah satu dari yang lain?

Kerjasama atas persaingan

Anda dapat memilih untuk menggunakan AMP semata-mata untuk menciptakan pengalaman yang cepat namun sederhana. Anda dapat mengandalkan aplikasi web progresif untuk menciptakan pengalaman pengguna yang dinamis namun lebih lambat. Atau, Anda dapat memulai dengan cepat dan tetap cepat dengan memasukkan keduanya ke dalam desain web Anda.

Saat ini, penggunaan AMP bersama dengan aplikasi web progresif menjadi lebih umum, dengan pengembang memanfaatkan keduanya dalam tiga cara.

1. AMP sebagai aplikasi web progresif

Jika konten Anda sebagian besar statis dan Anda dapat menerima fungsionalitas terbatas AMP, opsi ini memungkinkan Anda membuat pengalaman secepat kilat sebagai aplikasi web progresif. AMP sebagai contoh, dibuat seperti ini — aplikasi web progresif sepenuhnya diisi oleh AMP. Ini memiliki pekerja layanan, yang memungkinkan akses offline, serta manifes, yang meminta spanduk "Tambahkan ke layar beranda".

2. AMP ke aplikasi web progresif

Cara lain untuk menggunakan AMP dan aplikasi web progresif bersama-sama adalah dengan menganggap halaman AMP Anda sebagai pengait ke situs web Anda. Ini menangkap pengguna dengan beban seketika, lalu menggulungnya ke dalam aplikasi web progresif Anda. Ini memungkinkan Anda untuk menggabungkan halaman AMP yang memuat cepat dengan PWA yang lebih dinamis daripada opsi pertama.

3. AMP dalam aplikasi web progresif

Seperti halnya AMP vs. PWA, tidak harus semuanya atau tidak sama sekali. Anda tidak perlu membuat semua halaman Anda dengan AMP; Anda juga tidak perlu memisahkan AMP dan PWA sebagai hook and rod. Sekarang, Anda sebenarnya dapat AMP hanya sebagian kecil dari satu halaman, sehingga mengurangi ukurannya dan menurunkan waktu muatnya tanpa mengorbankan fungsionalitas dinamis sepenuhnya.

Ini melibatkan penggunaan bentuk AMP lain yang disebut “Shadow AMP”, yang memungkinkan AMP bersarang di dalam area halaman web. Hasilnya adalah AMP di dalam cangkang aplikasi web progresif. Untuk melihatnya beraksi, lihat demo yang dibuat Google bernama ShadowReader:

Siap membuat aplikasi web progresif Anda sendiri?

Menciptakan pengalaman seperti aplikasi asli yang cepat dengan kemampuan web untuk ditemukan dimulai di sini, di mana Anda dapat mempelajari semua kotak yang perlu Anda periksa untuk memenuhi kriteria Google untuk PWA. Untuk informasi selengkapnya tentang menggunakan AMP dan PWA secara bersamaan, lihat:

• Pembicaraan ini dari Ben Morss
• Pembicaraan ini dari Eric Lindley

Saat Anda siap, mulailah menggunakan pembuat halaman arahan pasca-klik AMP di Instapage untuk memberikan pengalaman pengguna tercepat Anda.