Desain Web Responsif dan Aplikasi Web Progresif (PWA): Perbedaannya

Dengan keduanya yang sangat mirip dalam tampilan dan kinerjanya, Anda pasti bertanya-tanya mengapa tidak ada perbandingan yang lebih rinci antara dua pendekatan populer untuk pengembangan web: desain web responsif dan Aplikasi Web Progresif. Nah, ini dia . Pada artikel ini, kita akan membandingkan desain web responsif dengan Progressive Web App, dan mencari tahu di mana perbedaannya satu sama lain.

Desain Web Responsif

Apa itu

Desain web responsif (RWD) adalah pendekatan untuk pengembangan web yang pertama kali dijelaskan oleh Ethan Marcotte pada tahun 2010—lima tahun lebih awal dari konsep Progressive Web App.

Bagaimana itu bekerja

Pada dasarnya filosofi desain web responsif adalah bahwa desain dan pengembangan harus dibuat dengan tujuan untuk merespon perangkat pengguna—yang berarti merespons perilaku, ukuran, platform, dan orientasi perangkat yang digunakan. Ini dicapai dengan penggunaan kisi-kisi yang mengalir, gambar fleksibel, dan kueri media CSS:

Kisi-kisi cair, gambar fleksibel, dan kueri media adalah tiga bahan teknis untuk desain web responsif…

Ethan Marcotte, Desain Web Responsif

jaringan cairan

Situs web responsif yang dirancang dengan grid fluid dapat menangani berbagai ukuran layar dengan lebih baik di pasaran karena, alih-alih mendefinisikan dimensi berbasis piksel, fluid grid mengadopsi perhitungan berbasis persentase baru.

Gambar Fleksibel

Gambar di Web secara alami tidak lancar, tetapi dengan beberapa konfigurasi ( properti width disetel ke 100% , dan properti height disetel ke auto ), gambar apa pun dapat dibuat agar responsif di semua perangkat.

Kueri Media CSS

Meskipun halaman web responsif dengan gambar fleksibel dan kisi-kisi lancar secara teknis responsif, tampilannya tidak sebagus mungkin. Di sinilah kueri media CSS berperan karena ini digunakan untuk menciptakan pengalaman yang lebih baik, disesuaikan untuk perangkat yang berbeda. Pengalaman yang disesuaikan ini sering kali diperkenalkan dengan penggunaan penambahan titik henti sementara yang berlaku pada ukuran layar tertentu.

Secara keseluruhan, desain web yang responsif telah membuat Web saat ini jauh lebih mudah diakses, karena pendekatan ini menghilangkan kebutuhan untuk fase pengembangan lebih lanjut yang sebelumnya diperlukan untuk mengakomodasi berbagai ukuran layar di pasar. Atau, dalam kata-kata penciptanya, pendekatan pengembangan web ini akhirnya memungkinkan kita untuk “ mendesain untuk pasang surut sesuatu ”.

Contoh

Situs web responsif adalah hal yang lumrah saat ini, dan hampir setiap situs web yang Anda temui bersifat responsif.

Aplikasi Web Progresif

Apa itu

Pertama kali diciptakan oleh Alex Russel pada tahun 2015, Aplikasi Web Progresif adalah evolusi alami berikutnya dari Web karena banyak manfaatnya dibandingkan situs web responsif biasa. Bagian “ progresif ”, menurut Pete LePage – Advokat Pengembang Google, dapat dijelaskan sebagai “ saat pengguna secara bertahap membangun hubungan dengan aplikasi dari waktu ke waktu, aplikasi menjadi semakin kuat ”.

Sederhananya, PWA adalah situs web seperti aplikasi Anda dengan (hampir) semua fitur yang dapat Anda harapkan dari aplikasi seluler asli , termasuk pemberitahuan push, kemampuan offline, dan sebagainya. Dan karena itu, seluruh pengalaman merupakan langkah maju dari mitra situs web responsifnya karena PWA dapat mempertahankan semua manfaat yang diharapkan datang dengan platform berbasis web.

 Artikel terkait: Apa itu Aplikasi Web Progresif?

Bagaimana itu bekerja

Sebenarnya cukup mudah untuk meringkas komponen inti dari PWA. Pada dasarnya, untuk memungkinkan semua fitur progresif yang disebutkan di atas, berikut adalah persyaratannya:

Manifes aplikasi web

Manifes aplikasi web adalah file JSON yang menyediakan metadata yang diperlukan untuk proses penginstalan PWA Anda dan menentukan bagaimana PWA Anda ditampilkan di layar beranda pengguna.

Pekerja layanan

Secara universal dianggap sebagai komponen dasar yang memungkinkan semua fitur progresif PWA, pekerja layanan berjalan secara independen dari browser dan pada utas yang berbeda dengan JavaScript utama.

Konteks aman

Sebagai standar baru Web, PWA harus diputuskan melalui protokol yang aman—HTTPS. Ini menjamin komunikasi yang aman antara pengguna dan server dan sebagai imbalannya, memastikan pengalaman bebas risiko.

Contoh

Karena PWA berperilaku tidak berbeda dengan aplikasi seluler asli, Anda mungkin pernah mengunjungi situs PWA sebelumnya tanpa menyadarinya. Pikirkan situs besar seperti aplikasi seperti Instagram dan Pinterest—semuanya didukung oleh PWA.

 Bacaan yang disarankan: 12 Contoh Aplikasi Web Progresif Terbaik di tahun 2020

Di mana mereka tumpang tindih

Pengalaman serupa dengan fitur modern

Jika semuanya masuk akal bagi Anda sejauh ini, maka Anda akan melihat bahwa desain web responsif (RWD) dan PWA banyak tumpang tindih dalam hal pengalaman pengguna. Secara teknis, PWA responsif —karena pendekatannya dibuat agar sesuai untuk dilihat di semua perangkat, dengan sedikit sentuhan modern untuk mengaktifkan lebih banyak fitur seperti aplikasi.

Dan karena keduanya merupakan pendekatan untuk pengembangan web, mereka berbagi hampir semua manfaat yang sama dari Web yang meliputi:

• Satu URL, satu basis kode untuk semua platform
• Keamanan yang ditingkatkan dengan HTTPS
• Kemampuan untuk ditemukan lebih baik dan selalu up-to-date

Di mana mereka berbeda?

Di sinilah hal-hal menjadi menarik, karena kedua pendekatan untuk pengembangan web ini—sementara sebagian besar mirip dalam tampilannya—sangat berbeda dalam dampak dunia nyatanya.

Dari segi fitur

PWA, menurut definisi, hadir lebih banyak fitur daripada situs web responsif khas Anda. Dengan memanfaatkan kemajuan terbaru dalam teknologi web, yaitu pekerja layanan dan manifes aplikasi web, PWA dapat menghadirkan fitur yang sebelumnya eksklusif untuk aplikasi seluler asli seperti:

Tambahkan ke layar Utama

Dengan pekerja layanan terdaftar dan manifes aplikasi web, PWA dapat diinstal di setiap perangkat yang memiliki browser pendukung.

>> Pelajari lebih lanjut: Buat PWA Pertama Anda

Pemberitahuan Dorong

Melalui pekerja layanan, Anda dapat mengirim pemberitahuan dan menampilkannya di perangkat pengguna seperti halnya aplikasi asli. Ini adalah fitur Web yang relatif baru yang memanfaatkan Push API, Notifications API, dan Web Push Protocol; dan dalam waktu dekat, fitur ini semakin baik berkat munculnya Notification Triggers dan Badging API.

Kemampuan Offline

Berkat bantuan proxy jaringan di dalam browser yang dapat diprogram yaitu service worker , PWA dapat secara proaktif melakukan cache dan menyajikan konten offline tanpa harus bergantung pada mekanisme caching yang sudah ketinggalan zaman seperti cache HTTP.

Catatan : Situs web responsif masih dapat memanfaatkan semua API yang ada dari web untuk memberikan pengalaman pengguna yang optimal juga—hanya saja Anda tidak akan mendapatkan semua fitur yang bergantung pada pekerja layanan.

 Bacaan yang disarankan: Aplikasi Web Progresif (PWA) dan Akses Perangkat Keras

Dalam hal kinerja

Karena situs web responsif masih merupakan situs web khas Anda yang tertahan oleh semua kelemahan yang terkait dengan mekanisme caching HTTP saat ini, masuk akal untuk mengharapkan kinerja yang lebih baik dari PWA karena ia menggunakan mekanisme caching yang lebih baru dan lebih berorientasi pada kinerja yang disebut pekerja layanan.

Mekanisme caching lebih cepat

Dengan service worker yang terdaftar, Anda dapat memiliki kontrol atas apa yang sedang di-cache , dan mendorong pengalaman yang lebih baik untuk pengunjung yang kembali sebagai hasilnya.

Dampak kinerja dunia nyata dari pekerja layanan bukanlah sesuatu yang belum diamati dengan cermat. Dengan menggunakan time to first paint sebagai metrik untuk mengukur pengalaman pertama pengguna dengan situs web, Google sendiri telah melakukan penelitian yang mengamati kinerja aplikasi web Google I/O dengan grup terkontrol (di mana pekerja layanan mengontrol aplikasi web) dan grup yang didukung (tempat layanan bekerja didukung oleh browser yang digunakan tetapi belum mengontrol aplikasi web).

Hasilnya sangat mengesankan di desktop, karena di sini kita dapat melihat pekerja layanan melakukan bagiannya untuk mengurangi waktu pengecatan pertama ( firstpaint ) menjadi hanya 583ms . Ini sedekat pengalaman instan yang didapatnya.

Namun, hal-hal sedikit kurang mengesankan di perangkat seluler:

Di sini kita dapat melihat bahwa ujung ekor dari grup yang dikontrol masih terlihat sedikit mirip dengan grup yang didukung. Ini sebagian besar disebabkan oleh fakta bahwa di seluler, utas pekerja layanan tidak dioptimalkan dan membutuhkan lebih banyak waktu untuk memulai dibandingkan dengan desktop.

Secara keseluruhan, peningkatan kinerja yang dicapai dengan service worker—atau dengan kata lain, dengan PWA—sangat fenomenal. Tentu saja, masih ada beberapa pekerjaan yang harus diselesaikan oleh pekerja layanan keliling; tetapi kami merasa bahwa secara keseluruhan, ini masih merupakan langkah kecil menuju apa yang dulunya ada di Web, dan langkah ke arah yang benar.

Dari segi keamanan

HTTPS—Pembagi garis

Meskipun situs web responsif biasa bisa sama amannya dengan PWA, situs web responsif tidak diharuskan menggunakan protokol komunikasi yang aman. Ini adalah kasus yang berlawanan dengan situs web yang didukung PWA karena Google, pendiri PWA, mengharuskan semua komunikasi antara server dan klien dalam PWA harus dienkripsi melalui penggunaan HTTPS.

Sebagian besar fitur yang terkait dengan PWA seperti geolokasi dan bahkan pekerja layanan hanya tersedia setelah aplikasi dimuat menggunakan HTTPS.

Dokumen web MDN, Aplikasi web progresif (PWA)

 Artikel terkait: Apakah Anda memerlukan HTTPS?

Kesimpulan

Peningkatan kinerja yang disebutkan di atas dicapai dengan pekerja layanan, dikombinasikan dengan fitur seperti aplikasi tambahan seperti pemberitahuan push, tambahkan ke layar beranda (dan dalam waktu dekat, geofencing dan sinkronisasi berkala), semuanya terbukti menjadikan PWA kandidat yang cocok untuk menjadi yang berikutnya evolusi Web. Sampai sekarang, gerakan PWA sudah banyak didorong oleh hampir semua orang besar, termasuk Microsoft dengan mendorong adopsi PWA di Windows 10. Tidak lama lagi kita akan melihat masa depan yang penuh dengan Aplikasi Web Progresif—seperti yang Steve Jobs bayangkan:

Mesin Safari lengkap ada di dalam iPhone. Jadi, Anda dapat menulis aplikasi Web 2.0 dan Ajax yang luar biasa yang terlihat persis dan berperilaku persis seperti aplikasi di iPhone. Dan aplikasi ini dapat berintegrasi sempurna dengan layanan iPhone. Mereka dapat melakukan panggilan, mereka dapat mengirim email, mereka dapat mencari lokasi di Google Maps.

Steve Jobs, 2007