Cara Mengubah Blog Menjadi PWA (Progressive Web App) di Blogger dan WordPress

Diposting pada
PWA

Pada artikel sebelumnya saya sudah menjelaskan mengenai PWA (Progressive Web App) mungkin diindonesia sendiri belum banyak yang menggunakan hal ini karena masih jarang saya temukan blog menggunakan PWA ini. Apabila blog sudah menggunakan PWA (Progressive Web App) tentu akan menguntungkan blog itu sendiri selain bisa bersaing pada mesin pancari juga bisa menambah kecepatan pada website tersebut.

Pada artikel kali ini saya akan memberikan Cara Mengubah Blog menjadi Progressive Web App di Blogger dan WordPress. Ini saya akan memberikan tutorial untuk kalian yang menggunakan platform Blogger atau menggunakan platform WordPress.

Seperti apa tutorial nya cara mengubah blog menjadi PWA (Progressive Web App). Jika kalian penasaran simak artikel ini baik – baik ya jangan sampe kelewatan sedikit pun. 

Cara Mengubah Blog Menjadi PWA di WordPress

Jika anda menggunakan platform WordPress maka agar bisa mengubah menjadi PWA (Progressive Web App) tidak usah memerlukan jago coding anda cukup menggunakan sebuah plug in saja bagaimana caranya berikut ini caranya :

  • Langkah pertama yang harus kalian lakukan adalah install plug in PWA For WP
  • Setelah di install plug in tersebut jangan lupa aktifkan plug in tersebut 
  • Langkah selanjutnya pergi ke setting plug in PWA For WP
  • Kalian centang aja semua yang ada di pengeturan tersebut 
  • Setelah itu kalian Simpan Perubahan
  • Selesai
Jika sudah terpasang plug ini akan ada notifikasi pop up kalau pengunjung disuruh untuk menaruh website di halaman homepage mobile. 
Apa bila anda masih ragu kalian bisa ikuti cara berikut ini untuk uji coba apakah sudah benar atau tidak memasang PWA pada blog di WordPress kalian. 
  • Kalian install dulu ekstensi di browser Chrome milik sobat yang bernama Lightouse
  • Kemudian pilih Icon Lightouse di sebelah kanan
  • Setelah itu pilih Generate Report
  • Jangan lupa kalian harus kunjungi blog atau website yang ingin di uji coba PWA nya pada browser kalian. 
  • Tunggu hingga proses nya selasai, plug in ekstensi akan mencoba mendebug blog yang sedang di uji coba
  • Apabila sudah selesai maka klik Icon nya maka akan dilihat hasilnya apakah bekerja dengan sempurna. 

Cara Mengubah Blog Menjadi PWA di Blogger

Setelah WordPress sekarang saya akan memberikan tutorial pada pengguna Blogger juga, bagaimana caranya simak berikut ini adalah tutorial nya :
  • Langkah pertama yang anda harus lakukan adalah membuat file minifest.json dulu
  • Setelah itu anda harus menaruh nya file tersebut pada Github agar bisa dihostingkan disana
Bagaimana sih file minifest.json itu, jika kalian Bingung membuatnya saya akan kasih tutorial untuk kalian cara membuatnya akan tetapi kalian harus buka dulu notepad kalian untuk membuat nya. 
Kalian buka notepad pada PC kalian copy di bawah ini pada notepad. < div>

{ "name": "Judul Blog/Website", "short_name": "Judul Blog/Website", "start_url": "URL Blog/Website", "display": "standalone", 
"background_color": "Warna Background (Hex)", "theme_color": "Warna Address Bar (Hex)", "description": "Deskripsi Blog/Website", "icons": [{ "src": "URL Gambar 36 x 36 (PNG)", "sizes": "36x36", "type": "image/png", "density": "0.75" },
{ "src": "URL Gambar 48 x 48 (PNG)", "sizes": "48x48", "type": "image/png", "density": "1.0" },
{ "src": "URL Gambar 72 x 72 (PNG)", "sizes": "72x72", "type": "image/png", "density": "1.5" },
{ "src": "URL Gambar 96 x 96 (PNG)", "sizes": "96x96", "type": "image/png", "density": "2.0" },
{ "src": "URL Gambar 144 x 144 (PNG)", "sizes": "144x144", "type": "image/png", "density": "3.0" }
 { "src": "URL Gambar 192 x 192 (PNG)", "sizes": "192x192", "type": "image/png", "density": "4.0" },
{ "src": "URL Gambar 512 x 512 (PNG)", "sizes": "512x512", "type": "image/png", "density": "5.0" }] }

Jangan lupa ubah seperti nama, logo yang sesuai ukuran dan deskripsi seperti blog milik kalian. Setelah itu kalian Simpan dengan format minifest.json. 

Setelah itu kalian pergi ke Github untuk hosting kode tersebut disana, kemudian jika sudah kalian.
Jika ingin menggunakan lebih baik menggunakan CDN agar lebih kencang saat memanggil nya. Setelah itu kalian masukkan kode HTML berikut ini di bawah kode <head> untuk memanggil minifest.json itu
<link rel="manifest" href="/manifest.json"/>
Itu kalian isi url yang telah kalian uploud ke Github tadi dan di ubah di CDN tadi. Sekarang Simpan Template.
Itulah sedikit tutorial Cara Mengubah Blog Menjadi PWA (Progressive Web App) di Blogger dan WordPress. Semoga artikel ini bisa bermanfaat untuk kalian semua, Assalamualaikum. 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *