Fathurrahman Seorang blogger biasa ,yang baru menyukai teknologi Wordpress. Serta senang belajar teknologi komputer dan internet. Moto :" Keep Learning , Keep Contribute"

Cara Merubah Website WordPress Jadi PWA

1 min read

cara mengubah situs web blog wordpress dengan pwa lewat plugin tanpa koding

PWA yang merupakan kepanjangan dari Progressive Web Apps ,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.

Fitur-Fitur yang ada di PWA :

  • 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

Pada artikel kali ini , teknoding akan mencoba menerapkan PWA, pada situs web wordpress yang sedang digunakan. Kita tidak perlu melakukan coding , kita hanya perlu menginstall plugin, yang tersedia di wordpress.org. Selengkapnya berikut mari kita simak lebih lanjut :

Memasang Plugin PWA for WP :

Disini kita akan menggunakan plugin yang bernama PWA for WP , sebenarnya ada plugin pwa lain yaitu Super Progressive Web Apps . Namun ,meskipun plugin tersebut sudah lama ,dan jumlah Instalasi Aktif lebih banyak 30 ribu lebih. Akan tetapi, dikarenakan sudah 7 bulan lalu , belum update ke versi wordpress terbaru. Jadi saya lebih memilih PWA for WP, karena sudah uptodate ke versi wordpress saat ini.

  • Pertama-tama seperti biasa , kalian bisa download pluginya disini.
  • Atau kalian bisa pilih menu Plugins > pilih Add New.
  • Lalu kalian bisa mencari plugin tersebut , dengan mengetikan kata kunci “pwa for wp”.
Plugin PWA for WP wordpress
Plugin PWA for WP
  • Selanjutnya , pilih tombol Install Now , lalu Activate.
  • Setelah itu , pada halaman menu admin , pilih menu PWA > Settings.
PWA > Settings
PWA > Settings

Setting PWA for WP :

Pada bagian Setting , disini terdapat banyak menu yang tersedia pada plugin PWA for WP. Pertama untuk mengaktifkan status pwa , pada website wordpress. Kalian bisa ceklist pada bagian status , di menu Dashboard. Jika sudah, pilih tombol Save Settings.

Settings PWA for WP
Settings PWA for WP

Selain itu juga , kalian bisa atur setingan lainnya , yang ada pada menu-menu yang tersedia di plugin PWA for WP. Seperti menu General ,Design , dan lain sebagainya.

Uji Coba Test PWA Website WordPress :

Setelah terseting dengan baik , sekarang kita coba uji coba test ,apakah PWA pada website wordpres kita bekerja dengan baik atau tidak.

  • Pertama, kalian install ekstensi chrome , yang bernama Lightouse.
  • Jika sudah, kalian pilih icon lighthouse , dibagian pojok kanan atas.
Ligh House Generate Report
LLighthouse Generate Report
  • 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:
Lighthouse Audit Hasil PWA WordPress
Lighthouse Hasil PWA
Fathurrahman Seorang blogger biasa ,yang baru menyukai teknologi Wordpress. Serta senang belajar teknologi komputer dan internet. Moto :" Keep Learning , Keep Contribute"

Leave a Reply

Your email address will not be published. Required fields are marked *