Manfaat aplikasi satu halaman dan aplikasi web progresif: Meningkatkan CX

Diterbitkan: 2019-06-06

Manfaat aplikasi satu halaman menjadi semakin jelas karena pengalaman pelanggan mengharuskan penyedia e-niaga untuk memberikan interaksi yang cepat dan andal dengan mereka.

Selama 20 tahun terakhir, sebagian besar situs web dibangun dengan cara yang sama – dengan menggunakan HTML, CSS, dan JavaScript. Teknologi ini telah menjadi lebih maju dari waktu ke waktu, tetapi prinsipnya sebagian besar tetap sama: Pengguna berinteraksi dengan halaman web dan browser pengguna membuat panggilan ke server web yang, pada gilirannya, merespons dengan kumpulan HTML, CSS, dan HTML lainnya. JavaScript, yang kemudian dimuat dan ditampilkan di browser.

(Wah. Banyak sekali.)

Proses ini paling sering melibatkan halaman yang disegarkan, meskipun beberapa teknologi, seperti AJAX, memungkinkan pengembang untuk mengubah beberapa konten tanpa menyegarkan seluruh halaman. Karena itu, sebagian besar situs web bertindak dan berperilaku jelas seperti situs web, bukan aplikasi.

Sebagian besar situs web juga memiliki back-end dan lapisan presentasi yang sangat erat, yang berarti tidak ada pemisahan nyata antara bagian depan dan belakang situs web, karena keduanya merupakan bagian dari aplikasi monolitik tunggal.

Bagaimana aplikasi satu halaman dan aplikasi web progresif dapat meningkatkan pengalaman pelanggan

Selama dekade terakhir, aplikasi iOS dan Android asli telah menjadi tempat umum bagi hampir semua dari kita. Aplikasi ini berperilaku berbeda dari situs web sebenarnya, memberikan pengguna pengalaman yang sangat berbeda, dan seringkali lebih memuaskan.

Halaman tidak disegarkan saat tautan atau tombol ditekan, perubahan dimuat lebih cepat, dan pengalamannya seringkali jauh lebih baik daripada situs web seluler yang setara. Dalam kasus aplikasi e-niaga asli, ketika pengguna mengeklik tautan, aplikasi akan melakukan panggilan ke server ujung belakang, tetapi alih-alih server itu mengembalikan lapisan presentasi HTML, CSS, dan JavaScript, itu hanya mengirimkan data mentah yang diperlukan, dan aplikasi mengelola bagaimana data tersebut ditampilkan kepada pengguna.

Misalnya, jika pengguna mengklik produk untuk melihat detailnya, aplikasi akan memanggil server back end menanyakan detail produk itu dan server akan merespons dengan string data yang berisi item seperti nama produk, harga, dan tautan ke gambar, tetapi tidak perlu juga mengirim HTML, CSS, atau JavaScript apa pun untuk menentukan bagaimana gambar itu akan ditampilkan.

Aplikasi itu sendiri adalah lapisan presentasi, jadi tidak memerlukan semua itu dari server ujung belakang. Ini jauh lebih cepat dan memungkinkan aplikasi untuk menampilkan detail produk kepada pelanggan tanpa menyegarkan halaman. Teknologi ini memberikan kebebasan kepada pengembang untuk membangun pengalaman pelanggan yang lancar dan lancar tanpa kendala model tradisional.

Bukankah lebih bagus jika pengalaman seperti aplikasi dapat diberikan melalui browser web sehingga perbedaan antara aplikasi asli dan situs web menjadi kabur?

Di sinilah Aplikasi Halaman Tunggal (SPA) dan Aplikasi Web Progresif (PWA) masuk.

Apa itu Aplikasi Satu Halaman?

SPA adalah aplikasi yang ditulis dalam JavaScript yang berjalan di browser web, dan umumnya tidak memerlukan penyegaran halaman untuk menampilkan informasi baru.

Saat pengguna pertama kali mengunjungi situs web, aplikasi, bersama dengan sumber daya presentasi (HTML, CSS, dan beberapa skrip) dimuat ke dalam browser. Dari titik ini dan seterusnya, pengguna berada di satu halaman web, dan aplikasi memuat konten yang relevan dan mengubah tampilan sesuai kebutuhan.

Sama seperti aplikasi asli, ketika pengguna mengklik tautan, aplikasi memanggil server back end, yang pada gilirannya mengirimkan data yang diperlukan dalam sebuah string, yang umumnya tidak menyertakan sumber daya presentasi apa pun, seperti yang sudah-sudah. dimuat saat pengguna pertama kali mengunjungi situs web.

Karena pengguna pada dasarnya hanya pada satu halaman web, sebenarnya tidak ada konsep menyegarkan halaman. Sebaliknya, aplikasi mengubah halaman untuk menampilkan informasi yang berbeda bila diperlukan.

SPA umumnya sepenuhnya dipisahkan dari aplikasi ujung belakang dan antarmuka ke ujung belakang melalui serangkaian API. Itu akan sering duduk di servernya sendiri dan dapat digunakan secara terpisah. Di satu sisi, ini cukup agnostik terhadap aplikasi back end, karena hanya mengirim dan menerima data ke dan darinya – memperlakukannya seperti sistem pihak ke-3.

Kita semua telah menggunakan SPA untuk sementara waktu sekarang, mungkin tanpa menyadarinya. Facebook, Gmail, Twitter, LinkedIn, dan Instagram (di antara banyak lainnya) semuanya menggunakan SPA sebagai pengganti situs web mereka.

Jika Anda mengunjungi salah satu situs web tersebut sekarang, Anda akan melihat bahwa mereka berperilaku lebih seperti aplikasi asli daripada situs web tradisional. Halaman jarang, jika pernah, menyegarkan saat Anda berinteraksi dengannya, dan sangat cepat. Mengklik tautan dan tombol mengubah konten yang Anda lihat, tetapi item seperti header dan footer hampir tidak pernah disegarkan setelah pertama kali dimuat.

Manfaat Aplikasi Satu Halaman

Keuntungan terbesar dan paling jelas dari SPA adalah bagaimana mereka dapat digunakan untuk meningkatkan pengalaman pelanggan dengan memungkinkan desainer dan pengembang untuk memberikan pengalaman seperti aplikasi dan tidak dibatasi oleh pendekatan tradisional untuk memuat ulang halaman.

Ini memang membutuhkan cara baru dalam mendesain dan berpikir, karena aturan normal tidak lagi berlaku, tetapi manfaat bagi pengalaman pengguna bisa sangat besar.

SPA umumnya memuat konten jauh lebih cepat daripada situs web standar, karena sebagian besar sumber daya presentasi (HTML, CSS) dimuat hanya sekali. Interaksi dengan aplikasi hanya memerlukan panggilan ke server back end untuk mengambil sejumlah kecil data, daripada halaman HTML/CSS yang sepenuhnya terbentuk. Aplikasi kemudian dapat dengan cepat menampilkan data yang diubah tanpa harus memuat ulang halaman.

Karena SPA sepenuhnya dipisahkan dari aplikasi ujung belakang, SPA dapat digunakan secara terpisah, yang dapat memiliki keuntungan yang sangat besar. Perubahan front-end kecil tidak akan mengharuskan seluruh aplikasi untuk digunakan yang bisa menjadi tugas yang cukup besar dan terkadang membutuhkan waktu henti.

Kekurangan SPA

Salah satu tantangan terbesar menggunakan SPA adalah dampaknya terhadap SEO. Karena mereka tidak selalu memiliki struktur tradisional halaman yang berbeda, masing-masing dengan url yang berbeda, ini dapat menyebabkan masalah dengan mesin pencari yang mengindeks konten. Namun, ini dapat diatasi dengan penggunaan teknik seperti rendering sisi server dan memastikan bahwa klik menghasilkan url unik.

Ini juga menjadi lebih sedikit masalah dari waktu ke waktu, karena bot mesin pencari sedang diubah untuk mengatasi SPA. Bagaimanapun, Google adalah salah satu perusahaan yang memperjuangkan mereka.

Beberapa SPA membutuhkan sedikit waktu untuk dimuat pada kunjungan pertama karena sumber daya aplikasi dan presentasi dimuat pada tampilan halaman pertama.

Ini sangat terlihat dengan SPA seperti Gmail, di mana mereka memiliki gambar pemuatan yang besar saat Anda pertama kali mengunjungi situs web. Masalah ini dapat diatasi dengan penggunaan rendering sisi server dan pemrograman yang efisien untuk memastikan bahwa beban awal aplikasi dan sumber daya tidak terlalu besar.

Apa itu Aplikasi Web Progresif?

PWA agak sulit untuk didefinisikan, karena ini bukan teknologi khusus, tetapi lebih merupakan metodologi pengembangan atau serangkaian prinsip yang bersama-sama membuat situs web atau aplikasi lebih atau kurang PWA.

Istilah PWA awalnya diciptakan oleh Google, yang membuat daftar periksa untuk menentukan apa yang membuat PWA. Antara lain Google telah mendefinisikan bahwa PWA harus:

Aman – disajikan di bawah https
Responsif – cocok dengan faktor bentuk apa pun
Dapat bekerja secara offline – menggunakan pekerja layanan untuk menyimpan halaman cache
Cepat – dapat memuat dengan cepat pada koneksi 3G
Seperti aplikasi – menggunakan mode dan desain shell aplikasi agar terasa seperti aplikasi
Dapat diinstal - gunakan file manifes untuk memungkinkan aplikasi ditambahkan ke layar beranda
Terlibat – menggunakan alat seperti pemberitahuan push
Progresif – berfungsi di semua browser tetapi semakin baik di browser modern

Seperti yang Anda lihat, beberapa item daftar periksa agak kabur atau subjektif. Anda juga dapat melihat bahwa beberapa di antaranya terdengar mirip dengan SPA. Situs web HTML/CSS tradisional dapat dibuat menjadi PWA seperti halnya SPA. SPA tidak secara otomatis menjadi PWA, tetapi memiliki beberapa fitur yang mendorongnya ke arah itu.

Bingung belum?

Keuntungan dari PWA

Seperti halnya SPA, salah satu keuntungan terbesar dari PWA adalah peningkatan pengalaman pelanggan, memberikan nuansa seperti aplikasi dan menjembatani kesenjangan antara situs web seluler tradisional dan aplikasi iOS atau Android asli.

Fitur seperti kemampuan untuk menyimpan ke layar beranda Anda atau kemampuan untuk menyimpan halaman cache melalui pekerja layanan dapat membuat situs web terlihat dan terasa seperti aplikasi asli.

PWA juga cenderung sangat cepat, karena itulah salah satu prinsip utama dalam daftar periksa.

Sistem operasi Android memberi browser akses ke perangkat keras perangkat seluler. yang memungkinkan hal-hal seperti pemberitahuan push dan penggunaan pemindaian NFC, yang benar-benar dapat meningkatkan CX.

Kekurangan PWA

Kerugian terbesar dari PWA adalah kurangnya dukungan dari Apple. Untuk mendapatkan yang terbaik dari PWA, itu benar-benar perlu dijalankan di perangkat Android, karena sistem operasi Android memberi browser akses ke sejumlah besar fitur pada perangkat, sedangkan Apple sangat membatasi ini. Ini perlahan membaik, tapi jalan masih panjang.

Kerugian lain adalah kurangnya definisi yang jelas, yang dapat terbuka untuk interpretasi.

SPA dan PWA adalah masa depan pengembangan situs web

Meskipun teknologi ini masih belum sepenuhnya mainstream untuk sebagian besar situs web e-niaga, tidak diragukan lagi ini adalah masa depan pengembangan situs web.

Meskipun SPA adalah teknologi khusus yang dapat digunakan untuk membangun aplikasi e-niaga, PWA umumnya adalah situs web yang dibuat mengikuti metodologi yang ditetapkan oleh Google, yang menurut mereka memberikan pengalaman pelanggan terbaik.

Siapa pun yang mengembangkan SPA harus berusaha memenuhi daftar periksa PWA sebanyak mungkin untuk memberikan CX terbaik. Teknologi ini memberi desainer dan pengembang lebih banyak kebebasan dalam pengalaman dan perjalanan pengguna, memungkinkan mereka untuk beralih dari model halaman per halaman tradisional.

Banyak penyedia perangkat lunak seperti SAP dan IBM berinvestasi besar-besaran dalam menciptakan ujung depan SPA untuk platform e-niaga mereka, dan saya menduga bahwa dalam beberapa tahun, sebagian besar situs web e-niaga akan dibangun dengan cara ini, menggunakan kerangka kerja JavaScript seperti Angular, Vue, atau Bereaksi.

Semakin sedikit situs e-niaga yang akan dibangun menggunakan model HTML/CSS tradisional, dan kesenjangan antara situs web dan aplikasi asli akan semakin mengecil, sampai pada titik di mana akan sulit untuk membedakannya.