Pada tahun 2018, lebih dari setengah trafik web di seluruh dunia berasal dari ponsel, ini berarti peningkatan 50,3% dari tahun sebelumnya. Dengan semua situs seluler di luar sana, bagaimana anda dapat membedakan dan meningkatkan pengalaman seluler situs web anda untuk pengguna anda?

Salah satu pendekatan adalah mempertimbangkan mengubah situs WordPress yang ada menjadi Progressive Web App atau Aplikasi Web Progresif (PWA).

Apa itu Progressive Web App?

Progressive Web App atau PWA adalah situs seluler yang dibangun dengan framework JavaScript yang memberikan pengalaman seperti aplikasi kepada pengguna. Tampilan dan perilaku PWA seperti laman web biasa tetapi memiliki beberapa fungsi aplikasi seluler.

  • Situs yang dianggap sebagai PWA akan memiliki pengalaman pengguna sebagaimana berikut:
  • Cepat – Harus memakan waktu kurang dari tiga detik untuk memuat
  • Andal – Ini harus dimuat dengan cepat bahkan dalam kondisi jaringan yang buruk
  • Menarik – Ini harus melibatkan pengguna dalam pengalaman
  • Responsif – Harus bekerja lintas perangkat dengan berbagai bentuk dan ukuran

Anda tidak perlu mengkoding seluruh situs web anda untuk menambahkan fitur PWA. Tergantung pada situs anda sendiri, dan ada berbagai cara untuk merancang PWA. Jika anda memiliki situs WordPress, anda bisa menghela nafas lega. Berkat banyak sumber daya, alat, dan plugin, Cukup mudah untuk mengubah situs WordPress anda menjadi PWA.

Pada artikel ini, anda akan belajar bagaimana melakukannya dengan tangan, dan plugin mana yang menyederhanakan proses lebih jauh.

PWA 4x Lebih Baik Daripada Situs Mobile

Sangat mudah untuk menghabiskan banyak waktu menimbang pro dan kontra membangun aplikasi vs PWA. Setiap situasi bisnis adalah unik sehingga hanya anda yang tahu jalur mana yang tepat untuk anda.

Berikut ini adalah sorotan dari lebih banyak manfaat membuat PWA untuk situs web anda.

  • PWA dijalankan langsung di peramban seluler
  • PWA tidak tunduk pada ulasan App store dan proses persetujuan
  • Anda dapat meluncurkan dan memperbarui PWA anda dengan ketentuan anda sendiri tanpa gangguan eksternal.
  • Pengguna dapat mengakses situs anda di berbagai platform
  • PWA bekerja di semua jenis perangkat
  • Pengguna menghemat penyimpanan dan penggunaan data dengan tidak harus mengunduh apa pun

Jika situs web anda membutuhkan lebih dari tiga detik untuk memuat sepenuhnya, maka anda kemungkinan kehilangan hampir setengah dari pengunjung anda. Dengan Progressive Web App, anda tidak perlu khawatir tentang kecepatan memuat dan masalah konektivitas yang menghalangi pengunjung karena mereka dapat menyimpan konten secara lokal yang dapat diakses secara offline.

Menurut Google, PWA dengan UI / UX yang meniru aplikasi memiliki keterlibatan dan konversi yang lebih tinggi dibandingkan dengan situs “ramah seluler” standar. PWA juga menerima hingga 4x lebih banyak kunjungan dan lebih banyak waktu dihabiskan di situs ini daripada situs web yang ramah seluler dan responsif.

Ketika BookMyShow, perusahaan penjualan tiket terbesar di India, menciptakan PWA mereka, mereka meningkatkan konversi seluler mereka lebih dari 80%.

Tujuan mereka dengan PWA adalah untuk optimisasi sehingga pengguna dapat memeriksa dalam waktu kurang dari 30 detik. Kecepatan memuat halaman mereka dan UI yang mudah dinavigasi adalah apa yang pada akhirnya mendorong peningkatan konversi.

Untuk contoh ketika suatu merek dapat melibatkan kembali pengguna web mereka dengan PWA, kita bisa melihat contoh pada OLX.

Dengan mendorong pengunjung untuk menambahkan pintasan ke layar beranda mereka, pasar online dapat meningkatkan keterlibatannya sebesar 250%. Langkah ini juga menghasilkan penurunan tingkat bouncing 80% dan kenaikan rasio klik-tayang 146%.

Bangun PWA Anda Secara Manual, Atau Gunakan Plugin PWA WordPress

Mengubah situs WordPress anda menjadi PWA memberi pengguna pengalaman yang sebanding untuk menggunakan aplikasi web, dengan hanya mengunjungi situs web anda menggunakan browser seluler mereka. Jika anda memiliki situs WordPress, maka anda dapat menghasilkan aplikasi web yang dirancang dengan baik dan sangat fungsional hanya dalam beberapa langkah.

Sebagai pemilik situs WordPress, anda mendapat manfaat dari memiliki beberapa opsi tentang cara mengembangkan PWA anda. Juga anda dapat membangunnya secara manual, menggunakan plugin WordPress, atau menggunakan layanan yang menanganinya untuk anda.

Jika anda lebih suka mengelola seluruh proses sendiri, ada beberapa rute yang dapat anda ambil untuk merancang PWA. Tidak ada satu standar atau framework untuk diikuti.

Anda dapat merancang PWA dengan tangan menggunakan AngularJS, React atau Vue. Setiap metode memiliki pro dan kontra tergantung pada apa yang anda cari.

Pengembang mendukung AngularJS untuk kombinasi Angular / Ionik yang dimilikinya. Ionic memiliki kerangka kerja yang berguna untuk mengembangkan aplikasi seluler dan menggunakan teknologi yang sama untuk membangun PWA. Beberapa perusahaan memilih Bereaksi karena kemudahan penggunaannya dan dukungan standar dari PWA.

Untuk Dampak Maksimal, Ikuti Standar PWA dari Google

Karena setiap metode mungkin memprioritaskan hasil yang berbeda, Google membuat daftar yang menguraikan semua yang diperlukan untuk menjadi PWA. Ada beberapa item dasar tertentu yang diperlukan untuk sebuah situs menjadi PWA. Google juga memecah fitur tambahan yang akan memberi label PWA sebagai contoh.

Barang-barang berikut harus diperiksa dan diuji sebagai produk minimum yang layak sebelum meluncurkan aplikasi web progresif Anda kepada publik.

  • Elemen Kunci Progressive Web App
  • Situs web dilayani melalui HTTPS
  • Halaman di tablet dan perangkat seluler responsif
  • Semua URL aplikasi dimuat saat loading
  • Metadata disediakan untuk Tambahkan ke Layar Beranda
  • Pemuuatan cepat pertama bahkan pada 3G
  • Berfungsi di berbagai browser
  • Transisi halaman tidak terasa seperti memblokir jaringan
  • Setiap halaman memiliki URL

Anda juga dapat menggunakan alat Google Lighthouse tool untuk memverifikasi banyak item dalam daftar secara otomatis daripada melakukannya dengan manual.

Membuat PWA

Google melangkah lebih jauh dan mengidentifikasi karakteristik apa yang membuat PWA yang baik. Banyak dari kondisi ini tidak terintegrasi ke dalam alat Lighthouse tool sehingga anda harus memeriksanya secara manual.

Fitur PWA yang wajib di perhatikan:

  • Konten situs diindeks oleh Google
  • Informasi schema.org metadata yang sesuai
  • Metadata sosial jika perlu
  • URL kanonik jika perlu
  • API History di semua halaman
  • Transisi konten yang halus saat memuat halaman
  • Kemampuan untuk kembali dari halaman detail dan menjaga posisi gulir di halaman sebelumnya
  • Input yang tidak diblokir oleh keyboard di layar
  • Konten yang dapat dibagikan
  • Pemberitahuan push yang tepat waktu dan relevan
  • Opsi untuk menonaktifkan notifikasi
  • Opsi pembayaran mudah di UI yang ada
  • Pengguna dapat membayar dengan mudah di UI saat ini

Penting untuk menguji dan memperbaiki setiap item sebelum meluncurkan PWA anda untuk menghindari umpan balik negatif dari pengguna anda.

Jika proses manual membangun PWA tampak ribet, jangan khawatir. Ada beberapa plugin WordPress yang dapat anda gunakan untuk menyederhanakan proses ini.

Plugin PWA WordPress

Anda dapat menghindari rute DIY dan tetap membangun PWA yang sukses dengan mudah.

Ketiga plugin WordPress ini akan membantu anda:

1. Super Progressive Web Apps

Salah satu plugin open source yang paling populer dan mudah digunakan untuk WordPress adalah Super Progressive Web Apps. Plugin ini terkenal karena fitur kustomisasi, dan kemampuan untuk membuat halaman offline berkaliber tinggi.

Di dalam plugin ini, anda juga dapat dengan cepat menghasilkan ikon aplikasi untuk PWA anda. Setelah diinstal, SuperPWA memberi pengguna di situs web anda opsi “Tambahkan ke Layar Utama”.

Fitur ini memungkinkan mereka menginstal situs anda dengan mudah di layar beranda perangkat mereka. Kemudian mereka dapat menggunakannya seperti yang mereka lakukan pada aplikasi, bahkan saat offline.

2. WordPress Mobile Pack 

WordPress Mobile Pack adalah plugin lain yang membantu mengubah situs anda menjadi aplikasi web seluler progresif. Plugin ini memberi anda banyak tema bawaan yang dapat anda beli. Plugin ini mendukung iOS dan Android dan kompatibel dengan hampir semua browser populer.

Plugin ini juga memungkinkan anda untuk menyesuaikan tampilan aplikasi agar menyerupai pencitraan merek anda dan juga dilengkapi dengan tema PWA WordPress. Juga dengan mudah terhubung ke Google Analytics dan Google Adsense.

3. Progressive WordPress

Jika anda menginginkan solusi sederhana, tanpa perlu keahlian coding, coba lihat plugin Progressive WordPress. Secara otomatis menambahkan fungsionalitas PWA ke situs WordPress anda saat ini.

Menggunakan backend WordPress, plugin tersebut menciptakan kerangka kerja berdasarkan situs yang ada. Kemudian anda dapat menyesuaikan perilaku tampilan situs anda agar terlihat lebih seperti aplikasi. Plugin ini juga sangat membantu mendorong pengguna untuk menambahkan situs anda ke layar beranda.

Tips Memilih Tema WordPress PWA

Mempertahankan kontinuitas dalam merek anda sangat penting. Jadi, apakah anda melakukan sendiri atau menggunakan aplikasi untuk membantu, anda masih dapat memilih tema yang menyerupai situs web anda yang sebenarnya.

Banyak plug-in yang dibahas di atas memiliki tema yang dapat disesuaikan yang dapat anda gunakan untuk PWA anda. Anda juga dapat menggunakan plug-in terpisah seperti Frontity, atau situs seperti PWAThemes untuk menambahkan tema ke aplikasi web anda.

Kiat untuk Membangun PWA WooCommerce

Saat membuat PWA khusus untuk toko atau aplikasi e-commerce, pertama-tama identifikasikan API untuk mengambil data. Jika anda menggunakan plugin WooCommerce untuk WordPress, anda dapat menggunakan REST API yang sudah ada.

Baik Aplikasi Web Super Progresif maupun WPMobilePack memiliki fungsi spesifik untuk mengubah toko WooCommerce anda menjadi PWA.

Saat membuat PWA WooCommerce, ada beberapa hal yang perlu diingat untuk memaksimalkan pengalaman pengguna. Sebelum meluncurkan WooCommerce WPA anda, periksa kembali apakah:

  • Pembayaran terintegrasi dengan benar.
  • Pengguna dapat dengan cepat dan mudah menelusuri berbagai produk
  • Sistem pembayaran dapat diandalkan di bawah koneksi yang lemah

Namun ada situasi tertentu di mana PWA bukan keputusan yang tepat untuk bisnis anda. Anggaran anda, strategi pemasaran, dan visi untuk pertumbuhan semua akan berdampak pada bagaimana anda mengoptimalkan situs anda untuk seluler.

Berikut adalah beberapa alasan mengapa aplikasi web progresif mungkin tidak menguntungkan anda sebanyak aplikasi seluler untuk iOS dan Android.

Pemberitahuan Push Safari masih tidak mengizinkan pemberitahuan push seluler dari PWA. Jika anda menyusun strategi seputar pemberitahuan push, anda harus membuat aplikasi seluler iOS khusus untuk memaksimalkan hasilnya.

Ikon layar beranda otomatis Pengguna aplikasidapat memiliki akses yang lebih mudah ke konten anda dengan ikon layar beranda. Memiliki ikon layar beranda juga mengarah pada lebih banyak keterlibatan dan lebih banyak waktu yang dihabiskan untuk aplikasi. PWA memungkinkan pengguna untuk menambahkan situs anda ke layar beranda mereka, tetapi prosesnya mungkin terlalu rumit untuk diikuti oleh sebagian orang.

Akses ke fitur perangkat Aplikasi biasa akan memungkinkan akses ke fitur seperti kamera ponsel, mikrofon, GPS, dan lainnya. Namun PWA tidak. Jika anda berharap untuk memanfaatkan salah satu dari fitur-fitur ini untuk meningkatkan keramahan-pengguna situs, maka aplikasi adalah cara terbaik.

Kemampuan offline PWA dapat memberikan bagian tertentu dari pengalaman saat offline. Namun, itu hanya jika pengguna telah mengunjungi situs anda sebelumnya. Dan bahkan kemudian, PWA tidak dapat terhubung ke SEMUA bagian aplikasi kecuali ada koneksi.

Jika anda menyadari bahwa anda perlu membangun aplikasi daripada PWA, maka anda masih memiliki opsi untuk menyederhanakan proses itu.

Kesimpulan PWA

Seperti yang kita lihat, orang-orang mengkonsumsi konten seluler lebih dari 3x di desktop. Dan bisnis harus bersaing dengan perhatian pengguna dengan aplikasi lain di ponsel dan browser mereka. PWA dapat berfungsi sebagai solusi untuk meningkatkan pengalaman seluler bagi pengguna anda dan meningkatkan konversi dan keterlibatan seluler anda.

Saat membuat PWA WordPress, pertimbangkan opsi yang kami bahas dalam artikel ini sebelum membuat keputusan akhir. Jika anda mengerti teknologi dan percaya diri, maka anda dapat menikmati kontrol atas proses membangun PWA anda secara manual.

Jika anda ingin menghemat waktu dan kemungkinan terjadi kesalahan, maka anda memiliki beberapa plugin WordPress tepat di ujung jari anda. Plugin secara signifikan mengurangi kurva pebelajaran dan merampingkan proses membangun PWA.

0 CommentsClose Comments

Leave a comment

Berlangganan Gratis

Dapatkan update terbaru langsung di email anda

Kami tidak akan mengirim spam