Apakah Anda ingin menginstal Progressive Web Apps (PWA) di blog WordPress Anda dan tidak tahu cara menginstalnya secara efisien?, Anda akan melihat bahwa saya juga menginstal PWA di blog saya untuk memungkinkan pengguna menginstal aplikasi di perangkat mereka.
Jumlah situs web yang menggunakan PWA meningkat dari hari ke hari, tidak hanya situs web WordPress, tetapi situs situs besar juga memasang PWA atau Progressive Web Apps di platform atau situs mereka karena menambahkan kekuatan untuk menambahkan situs web Anda ke layar beranda, navigasi offline, dan mudah dijangkau.
Pastinya Anda sedang memikirkan tentang bagaimana Anda dapat mengaktifkan fitur PWA di situs web Anda. iye kan?
Jadi, di sini dengan artikel ini menjelaskan tentang menyiapkan PWA atau Progressive Web Apps di situs WordPress Anda dalam satu atau dua menit tanpa crash dengan file WordPress apa pun.
Namun sebelum kita mulai, mari pelajari apa itu PWA dan manfaat menggunakannya di situs web kita.
Apa Itu Progressive Web App?
Jika Anda berada di sini, Anda mungkin sudah tidak asing lagi dengan PWA atau Progressive Web App, PWA adalah situs seluler yang dibuat dengan kerangka kerja JavaScript yang memberikan pengalaman seperti aplikasi kepada pengguna.
PWA terlihat bagus dan berfungsi seperti situs biasa tetapi dengan beberapa fungsi aplikasi seluler.
Untuk membangun pengalaman aplikasi web yang progresif bagi pengguna, itu harus;
- Cepat : Diperlukan sedikit waktu untuk memuat konten bagi pengguna.
- Handal : Itu harus dimuat secara instan, bahkan pada koneksi lambat tanpa masalah.
- Responsif : Harus responsif dan memiliki kemampuan untuk mendukung berbagai perangkat dan ukuran perangkat.
Dengan kata sederhanya PWA adalah masa depan pengalaman penjelajahan web dan hal terbaik tentang menggunakan PWA adalah, Anda tidak perlu mengkodekan ulang situs web Anda sepenuhnya. Bergantung pada jenis situs web, ada beberapa cara untuk mendesain PWA.
Jadi tunggu apalagi?, instal fitur PWA di situs web Anda dengan langkah-langkah mudah yang akan saya bagikan di artikel ini.
Bersamaan dengan semua ini, Jika Anda menggunakan situs WordPress, menginstal PWA akan memakan waktu cukup cepat tanpa ribet.
Prasyarat untuk Menyiapkan PWA di WordPress
Berikut beberapa hal yang harus Anda perhatikan sebelum menginstal PWA di situs web Anda. Sebelum mengikuti langkah-langkah yang akan kami bagikan di bawah ini, pastikan situs web Anda menggunakan semua teknologi ini untuk kompatibilitas.
- HTTPS atau SSL : Sebelum menginstal PWA, pastikan situs web Anda menggunakan HTTPS atau koneksi SSL untuk menyajikan halaman web.
- Versi WordPress : Anda perlu memastikan bahwa Anda menggunakan versi WordPress 3.5.0 atau yang lebih baru.
- Versi PHP : Versi PHP minimum yang diperlukan untuk PWA adalah 5.3, jadi pastikan situs web Anda menggunakan versi PHP 5.3 atau di atasnya.
Cara Membangun PWA dengan WordPress
Membangun PWA dengan WordPress itu sangatlahmudah. Anda dapat mengikuti tutorial yang akan saya bagikan di bawah ini untuk mengaktifkan aplikasi web progresif di perangkat WordPress Anda. Tidak masalah jenis situs web WordPress apa yang Anda ubah dengan PWA, metode ini berfungsi dengan baik pada setiap jenis situs web WordPress.
Pada dasarnya, dalam panduan ini, saya akan membagikan langkah-langkah menggunakan plugin bernama ” Super PWA ” . Plugin ini berfungsi sempurna dengan Situs Web dengan lebih dari 100K + lalu lintas, situs web tanpa lalu lintas, dan bahkan dengan situs web WooCoomerce.
Sebelum memulai, pastikan halaman situs web Anda disajikan melalui HTTPS atau SSL dan plugin dapat menulis di direktori WordPress.
Jadi, mari kita mulai…
Jadi, langkah pertama adalah mengunduh plugin ” SuperPWA ” dari repositori WordPress. Dan untuk mengunduh plugin, kunjungi Plugins> Add New dan cari plugin ” SuperPWA “. Anda juga dapat mengklik di sini untuk mendownload plugin secara instan.
Setelah Anda mencari plugin di repositori WordPress, itu akan menunjukkan opsi untuk menginstal langsung ke situs Anda. Klik tombol ” Instal Sekarang ” untuk mulai menginstal ” Aplikasi Web Super Progresif ” di situs WordPress Anda.
Setelah Anda menginstal dan mengaktifkan plugin, itu akan diinstal dan akan mengarahkan Anda ke halaman kustomisasi. Dari halaman kustomisasi, Anda dapat membuat perubahan yang diperlukan di pengaturan PWA sesuai dengan kebutuhan dan persyaratan Anda.
Setelah halaman kustomisasi PWA dibuka, masukkan nama aplikasi Anda, nama pendek, deskripsi, dan ikon. Anda juga akan mendapatkan opsi untuk mengubah warna latar belakang aplikasi Anda dan mengubah warna tema.
Setelah Anda selesai melakukan semua perubahan ini, gulir ke bawah halaman
Setelah Anda menggulir ke bawah halaman, itu akan menampilkan beberapa pengaturan untuk PWA. Di sini saya menjelaskan beberapa opsi bagi Anda untuk membuat penginstalan PWA menjadi mudah;
- Halaman Awal : Halaman awal halaman PWA Anda (Karena saya menginstal PWA di situs baru, halaman ini tidak menampilkan apa pun di sini).
- Halaman Offline : Anda dapat memilih halaman yang akan ditampilkan kepada pengguna Anda jika mereka tidak memiliki koneksi internet yang berfungsi dan halaman tersebut tidak tersedia di cache.
- Orientation : Orientasi perangkat. Anda dapat memilih di antara tiga opsi di sana dan saya sarankan memilih yang pertama yaitu “ikuti orientasi perangkat”.
- Tampilan : Anda akan mendapatkan opsi untuk memilih antara UI Minimal, Mandiri, Browser, dan Layar Penuh.
Setelah Anda memilih opsi sesuai dengan situs web dan kebutuhan Anda, simpan pengaturan dengan mengklik tombol ” Simpan Pengaturan “.
Ini akan menyimpan pengaturan di situs WordPress Anda dan menghasilkan pekerja layanan dan file manifes untuk situs web Anda bersama dengan detail yang Anda masukkan selama menyiapkan PWA.
Setelah Anda melakukan semua yang saya bagikan di atas, ini akan mengaktifkan kemampuan PWA di situs web Anda dan Anda dapat melihat opsi PWA di situs web Anda (seperti yang dibagikan pada gambar di atas).
Taraaaa… Anda telah berhasil menyiapkan PWA di situs WordPress Anda
Panduan PWA Google
Saat membuat PWA untuk situs web Anda, Google menawarkan serangkaian pedoman yang mencakup daftar potensi masalah dan cara memperbaikinya.
Namun di sini kami telah membuat daftar beberapa pedoman utama, yang diperlukan, dan Anda harus menjaganya sebelum membuat PWA untuk situs web Anda.
Ini adalah sebagai berikut;
- Situs Menggunakan HTTPS
- Desain Responsif untuk Setiap Perangkat
- Semua URL Aplikasi Dimuat Secara Offline
- Memuat Harus Cepat (Bahkan di 3G)
- Setiap Halaman Harus Memiliki URL
- Situs Mendukung Kompatibilitas Lintas Browser
- Transisi Halaman Cepat & Halus
- dan masih banyak lagi.
Anda juga dapat menggunakan alat seperti Lighthouse untuk menguji implementasi dan kesalahan PWA dengan mudah. Ini mengaudit situs web Anda untuk potensi kesalahan dan juga menunjukkan cara untuk memperbaikinya.
Penutup
Jadi dalam panduan hari ini, saya mencoba yang terbaik untuk menjelaskan tentang aplikasi web progresif atau PWA. Saya juga membagikan cara Anda dapat mengaktifkan fungsionalitas PWA di situs WordPress Anda dan membagikan beberapa plugin yang dapat mengaktifkan fungsionalitas ini.
PWA adalah hal penting yang menurut saya pribadi cocok bagi Anda untuk meningkatkan kinerja di perangkat desktop dan seluler. Tidak secara langsung, tetapi ya, itu adalah faktor peringkat yang membantu memberi peringkat situs web Anda lebih banyak di Google.
Jadi saya sangat menyarankan untuk mengaktifkan fungsionalitas PWA di situs web Anda.
Jika Anda menyukai artikel ini atau ingin berbagi sesuatu dengan kami, silakan tinggalkan komentar di bawah, dan jangan lupa untuk membagikan postingan ini kepada teman, keluarga, dan pengikut Anda
Leave a Reply