Cari File Download Firmware Gratis

Membuat Aplikasi Web di WordPress (PWA)

Bagi kamu yang mempunyai blog dengan WordPress self host bisa membuat aplikasi web progresif dengan menginstal plugin pendukungnya dan support untuk AMP.

Jadi kalau kamu sudah menginstal Plugin Progressive Web Apps (PWA) di wordpress, maka ketika pengunjung membaca blogmu akan ada notifikasi muncul agar pembaca tersebut dapat menambahkan Aplikasi dari blog kita di Home Screen Androidnya, dan ketika disetujui pembaca tersebut maka akan ada logo blog kita di Home Screen Androidnya yang ketika lain waktu dia klik aplikasi tersebut maka akan langsung membuka blog kita.

Dan ini adalah salah satu cara yang harus kita ambil untuk meningkatkan pengunjung dan menjangkau lebih banyak pemirsa untuk blog kita, jadi tunggu apalagi langsung saja instal di wordpress kamu.

Apa Itu Progressive Web Apps (PWA)

Silahkan baca di Wikipedia PWA

Intinya kita membuat aplikasi di Android tapi berbentuk web tanpa harus instal di perangkat android. dan ini juga merupakan salah satu signal untuk ranking blog kita sebagaimana dianjurkannya penggunaan AMP.

Jadi kita membuat penawaran kepada pembaca lewat pop up untuk menambahkan shortcut web kita di Home Screen perangkat nya, bahkan tombol Add to Homescreen ini juga bisa muncul di pengunjung dengan tampilan Desktop.

Baca juga: Plugin Sosial Share Paling Ringan

* Instal PWA (One Click)

Kalau anda ingin cara yang simple sekali untuk menginstal PWA ini maka silahkan instal plugin PWA by PWA Plugins Contributors, cukup simple dan sangat efektif sehingga tidak ada lagi error tanpa perlu pengaturan tambahan apapun.

Walaupun cuma instal dan beres, tetapi semua fitur yang harus dimiliki PWA sudah tersedia di sini termauklah banner “Add to Home” yang dapat meningkatkan jangkauan blog anda ke depannya.

* Instal Progressive Web Apps (PWA)

Kalau anda ingin dapat mengkostumisasi PWA maka anda bisa menggunakan plugin yang satu ini.

Silahkan ke dasboard wordpress lalu tambah baru plugin dan ketik di kolom pencarian PWA dan enter.

Silahkan pilih plugin PWA for WP & AMP oleh Ahmed Kaludi, Mohammed Kaludi

PWA For WP

Silahkan instal lalu aktifkan

Setting PWA for WP & AMP

Setting Dashboard

Silahkan pilih PWA di menu bilah kiri dashboard WordPress, lalu pilih tab Dashboard

WordPress (Non AMP)AMP
StatusCentangCentang
ManifestCentangCentang
Service WorkerCentangCentang
HTTPSCentang

Lalu klik Save Setting

General PWA

Setting General

App NameJudul Blog Anda
App Short NameJudul Blog Anda
App DescriptionDeskripsi blog Anda
App IconIcon Blog Anda
App Splash Screen IconGambar loading aplikasi muncul
Offline PageMasukkan url halaman offline, defaulnya di homepage
404 PageDefault di halaman 404
OrientationBisa tegak, melintang, atau sesuaikan perangkat pembaca.
Setting General PWA

Setting Design

Pada halaman ini anda bisa menyesuaikan warna background dan warna tema dari aplikasi anda nantinya, sesuaikan saja dan lebih baik mirip dengan web aslinya.

Design PWA

Sampai di sini sebenarnya settingan sudah selesai untuk PWA anda, tetapi jika anda ingin menambahkan Push Notifikasi apabila ada update artikel terbaru ataunotifikasi manual maka anda bisa lanjutkan setting seperti di bawah.

Setting Push Notification

Pengaturan PWA yang agak repot ada di bagian ini, tetapi ini yang paling penting karena kalau Push notification ini diaktifkan maka akan muncul pemberitahuan dari aplikasikita ke Android pembaca bahwa ada artikel baru, atau artikel update sesuai dengan settingan kita.

Bahkan kita bisa mengirim juga custom notification dari kolom paling bawah, hebat bukan?

Tetapi kita perlu membuat proyek di Firebase google, dan tenang saja karena ini semuanya gratis.

a. Membuat Proyek di Firebase

  1. Silahkan login ke console Firebase Google
  2. kemudian pilih Tambahkan Proyek
    Silahkan pilih tombol tambahkan proyek pada Firebase untuk membuat count view.
  3. Isi Nama Proyek sesuai keinginan Anda, dan setel Negara lalu centang persetujuan dan klik Buat Proyek
    Cara menampilkan view count blogger.
  4. Kemudian klik Lanjutkan
    Silahkan klik tombol Lanjutkan untuk membuat VIew Count blogger.
  5. Di halaman berikutnya pilih Develop di menu bilah kiri, kemudian Database, kemudian di kanan scroll kebawah dan pilih Buat Database pada RealTime Database
    Buat database baru di Realtime untuk membuat view count.
  6. Pilih Mulai dalam Mode Pengujian lalu klik Aktifkan
    Mengaktifkan mode pengujian firebase untuk view count blogger.
  7. Pilih logo roda gigi, lalu pilih Pengguna dan Izin Pengguna Izin Firebase

b. Mendapatkan Kode FCM Server API Key

Ke tab Cloud Messaging, silahkan copy kode ini, dan nanti diisi pada FCM Server API Key 

FCM PWA

C. Mendapatkan SettingConfig Firebase

Silahkan klik lagi Roda Gigi, lalu pilih Setelan Proyek , lalu scroll ke bawah dan pilih logo Kode untuk mendapatkan config

Setelan Proyek

Lalu klik tombol Salin untuk mengkopi semua kode config untuk diisi di kolom config.

Kode Config PWA

Kode yang kita copy yang dimulai dari buka kurung { sampai di tutup kurung }.

FCM Server API KeyIsi kode dari tahapan b.
ConfigIsi kode dari tahapan c.
Send Notification OnSilahkan centang mana yang mau dikirim.
Send Manual NotificationTulis notifikasi yang ingin dikirim

Setting Advanced

Pada halaman ini saya hanya centang Offline Google Analytic dan Enable On Desktop.

Advanced

Update Settingan Advanced

Pada settingan Advanced ini penting sekali untuk menampilkan banner Add to Home baik pada tampilan Mobile maupun pada tampilan Desktop, sehingga terinstal shortcut pada Android pengguna maupun di layar desktop pc mereka dan tentunya akan meningkatkan pengunjung setia untuk blog kita.

  • Custom Add to Home Banner: Centang
  • Enable On Desktop: Centang
Advanced-PWA

Setting Tools

Saya centang Loading Icon, tetapi setelah beberapa lama menggunakan loading Icon ini ternyata memberatkan blog jadi selanjutnya tidak saya centang lagi.

Loading Icon

Dan jangan lupa untuk klik Save Settings.

Sekarang semua setting sudah selesai, silahkan buka blog kamu lewat hp Android dan nanti setelah terbuka blognya akan ada popup untuk menambahkan aplikasi Anda ke Home Screen.

Contoh Popup PWA di Android

Ini penampakan munculnya notifikasi untuk download aplikasi PWA Abihp.com.

PWA ABIHP

Setelah di Download muncul di Menu dan di Home Screen

Menu ABIHP

Dan juga ada di Setelan Aplikasi Android

Aplikasi ABIHP

Hasil Tes Audit Menggunakan Lighthouse Esktension

PWA Lighthouse

Demikianlah proses pemasangan Aplikasi Web untuk WordPress sehingga blog anda bisa mempunyai aplikasi web sendiri dengan Progressive Web Applications dengan plugin ini.

Mudah-mudahan dengan mengaktifkan fitur ini bisa menjangkau lebih banyak pembaca ke blog Anda.

Trafik dari Shortcut PWA

Kalau anda menggunakan Google Analytic maupun data statistiki lainnya akan terlihat url baru yang setiap hari bertambah, ini merupakan pengunjung yang datang dari membuka shortcut PWA di Homescreen mereka.

urlnya : /?amp_install_service_worker_iframe=1

Visitor-PWA

Baca juga: Apa itu AMP Stories dan Cara Membuatnya

Keuntungan Bagi Abihp.com

Saya kan kerja offline nya servis hp dan umumnya hp android yang diservis, jadi sekalian saja pasang aplikasi web ABIHP.com ini pada setiap Android yang sudah diperbaiki.

Bagaimana menurutmu?

Review PWA for WP di Wordpress

Keuntungan jika wordpress anda menginstal plugin PWA membuat blog anda semakin terstruktur dan disukai oleh google sebagaimana AMP, dan juga bisa ada munculan pop up Add to Homescreen.

Editor's Rating:
4.8

Add a Comment

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