More

    Cara Membuat WordPress Menjadi PWA (Progressive Web Apps)

    Salah satunya cara yang bisa anda lakukan untuk membuat website wordpress anda menjadi mobile friendly selain menggunakan amp anda bisa juga menggunakan PWA. Apa itu PWA? PWA merupakan kepanjangan dari Progressive Web Apps ,dimana PWA adalah salah satu teknologi yang dikembangkan oleh Team Chrome Developer dari Google, yang akan mengubah sebuah website , menjadi seperti sebuah aplikasi native (secara User Experience). PWA juga mengoptimasi kecepatan untuk membuka halaman website ,serta berguna bagi pengunjung yang sedang offline ,atau untuk jaringan koneksi yang tidak stabil.

    Kelebihan PWA (Progressive Web Apps)

    • Bekerja secara Offline – Dengan Menggunakan Service Worker.
    • Push Notifikasi – Meningkatkan engagement visitor.
    • Seperti Aplikasi Native – Tampilannya terasa seperti Aplikasi yang diinstal di Google Play Store.
    • Dapat diinstall ke Homescreen – Visitor dapat langsung akses Website WordPress.
    • Shareable – Mudah dibagikan ke plaftorm Aplikasi lain.

    Dan pada artikel kali ini saya akan mengajarkan kepada anda tengan bagaimana cara membuat halaman wordpress anda menjadi PWA (Progressive Web Apps)

    Cara Membuat WordPress Menjadi PWA (Progressive Web Apps)

    Untuk membuat wordpress menjadi pwa, kita akan menggunakan plugin yang bernama PWA For WP. Sebenarnya ada plugin alternatif lain untuk membuat wordpress menjadi pwa seperti Super Progressive Web Apps. Tetapi, karena plugin sudah tidak dimaintain lagi, jadi lebih baik kita menggunakan plugin AMP For Wp yang masih sering diupdate.

    1. Pertama Download dan install plugin PWA Download PWA for WP
    2. Setelah itu aktifkan plugin PWA For WP
    3. Masuk ke menu PWA – Setting. Disini kita akan melakukan konfigurasi terlebih dahulu untuk Progressive Web Apps-nya.membuat wordpress menjad pwa
    4. Untuk pengaturannya pada dashboard, kalian bisa ikuti pengaturan saya seperti dibawah ini.membuat wordpress menjadi PWA
      1. Enable/Disable : Fitur ini berfungsi untuk dimana anda akan mengaktifkan notifikasi dari PWA.
      2. Manifest : Dukungan untuk PWA
      3. Service Worker : Dukungan untuk PWA
      4. HTTPS : Dukungan protokol https untuk pwa (Progressive Web Apps)
    5. Lalu pada tab Setup. Disini anda anda bisa mengatur detail pwa aplikasi anda seperti Nama app, Deskripsi App, Icon App dan juga splash screen App.membuat wordpress menjadi PWA
    6. Lalu pada tab Features pada menu ini kita diberikan opsi tambahan untuk halaman PWA (Progressive Web Apps). Namun, tidak semua fitur tersebut bisa anda gunakan. Karena untuk menggunakan tersebut kita harus mengupgrade PWA menjadi premium.membuat wordpress menjadi PWA

    Ada banyak sekali fitur-fitur yang bisa anda gunakan diplugin PWA for WP yang bisa anda explore sendiri.

    Menguji halaman PWA WordPress:

    • Pertama, anda install extension Lighthouse di chrome.
    • Jika sudah, kalian pilih icon lighthouse , dibagian pojok kanan atas.membuat wordpress menjadi pwa
    • Lalu kalian pilih Generate Report. Oh ya , pastikan kalian sedang menunjungi website yang ingin kalian uji coba test pwanya.
    • Tunggu beberapa saat, Lighthouse akan mencoba mendebugnya.
    • Setelah selesai prosesnya. Kalian klik icon PWA , lalu akan muncul beserta keterangan , apakah fungsi atau fitur PWA , sudah bekerja dengan baik atau tidak. Lebih jelasnya kalian perhatikan gambar di bawah:membuat wordpress menjadi pwa
    •  

    Lalu bagaimana cara kerja plugin PWA for WP ini?

    Kali ini kita akan mencoba menguji PWA (Progressive Web Apps) Ini baik di perangkat handphone maupun komputer.

    Menguji PWA di Handphone

    1. Silahkan akses situs anda menggunakan handphone melalui browser chrome.
    2. Maka pada bagian bawah halaman web anda akan muncul tulisan Add (nama situs anda) To Homescreen.membuat wordpress menjadi pwa
    3. Lalu klik Add pada notifikasi tersebut. Maka secara otomatis website anda tadi akan terinstall di handphone anda.membuat wordpress menjadi pwa
    4. Lalu buka aplikasi tersebut. Sekarang wesbite anda bisa diakses melalui aplikasi native android.pwa wordpress
    5. Agar tampilan mobilenya lebih terasa, sebaiknya gabungkan PWA tersebut dengan halaman AMP. Lalu pada pengaturan aktifkan Mobile Redirectionnya. Maka ketika user tersebut mengakses dari PWA tadi, secara otomatis dia akan mengakses halaman AMP-nya.

     

    Menguji PWA di Desktop

    1. Akses seperti biasa url situs anda di komputer/laptop.
    2. Jika website anda terintegrasi dengan PWA maka pada bagian kanan URL situs tersebut ada icon + Install. Lihat gambar berikut:pwa for desktop
    3. Klik Install. Nanti secara otomatis akan muncul icon App di desktop komputer anda.pwa wordpress
    4. Jika kita buka, maka akan tampil seperti aplikasi pada umumnya. Namun, yang ditampilkan hanyalah website wordpress anda.pwa wordpress for destop
    5. Anehnya aplikasi tersebut tidak bisa anda temukan pada Control Panel – Program. Jika anda ingin meng-uninstall aplikasi tersebut, Buka App PWA dari desktop anda. Lalu pada bagian kanan atas klik Uninstallpwa wordpress

    Jika semua uji coba yang anda lakukan diatas berhasil. Itu artinya website anda sudah terintegrasi dengan PWA (Progressive Web Apps).

    Free $100
    Deal

    Daftar menggunakan link di pojok kanan atas, minimal top up $25 usd. Maka dalam waktu 30 hari setelah registrasi anda akan mendapatkan credit $100 gratis dari vultr untuk mencoba layanan mereka.

    More Less
    Doesn't expire

    Recent Articles

    tips memilih isp

    Tips Memilih ISP Untuk Kebutuhan Internet Anda

    0
    Dalam memilih ISP kita perlu mempertimbangkan beberapa hal, diantaranya ialah budget. Namun, selain itu tentunya kita perlu memilih isp yang cocok dengan kita. Memilih ISP...
    cara install varnish

    Cara Install dan Konfigurasi Varnish dengan Nginx di Ubuntu 20.04

    1
    Cara install varnish - Apa itu varnish cache ? Varnish adalah sebuah aplikasi open source HTTP reverse proxy yang seringkali disebut juga sebagai HTTP accelerator atau...
    membuat fungsi terbilang

    Cara Membuat Fungsi Terbilang Pada Open Office

    0
    Pada artikel kali ini, saya akan mengajarkan bagaimana Cara Membuat Fungsi Terbilang Pada Open Office. Ada beberapa cara yang bisa anda gunakan untuk membuat fungsi...
    pengenalan templates

    Tutorial Django Bahasa Indonesia #6: Pengenalan Templates

    0
    Pada artikel sebelumnya kita sudah belajar mengenai routing di django #5 . Dimana, pada tutorial tersebut kita sudah bagaimana cara menampilkan "Hello World" pada...

    Tutorial Django Bahasa Indonesia #5: URL Routing Django

    0
    Pada tutorial kali ini, kita akan membahas tentang URL routing yang ada di django. URL Routing ini berfungsi untuk mengalihkan halaman, dari satu halaman...

    Related Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!