Mengenal PWA dan Cara Membuatnya di Blogger
PWA adalah singkatan dari Progressive Web Apps dimana PWA bertujan untuk melakukan optimasi branding pada sebuah website. Bagaimana caranya .... ?, setiap visitor terutama mobile visitor menginstal atau menambahkan kelayar utama hand phone nya maka akan muncul logo dari website pada home screen sehingga logo website tersebut akan lebih dikenal nantinya.
Namun ada sedikit kendala penerapannya pada blogger dikarenakan tidak bisa melakukan upload dan memasang Service Worker di root seperti halnya pada WordPress, sehingga pengguna hanya bisa melakukan action "add to home screen" saja pada smart phonnya dan tidak Installable PWA alias tidak terinstal layaknya aplikasi android pada hand phone.
Namun demikian PWA pada blogger membuat blog sobat tambah keren dan telihat profesional, secara sederhana manifest.json dapat disebut sebagai sortcut URL sebuah blog pada layar perangkat mobile.
Untuk mengaktifkan manifest.json pada blogger, sobat tehno dapat menyimak langkah - langkah pada ulasan berikut :
1. Persiapan Logo Blog
Siapkan sebuah logo blog dalam format PNG berbentuk segi empat dengan ukuran 512 X 512.
2. Menghosting Logo
Menghosting logo dapat dilakukan dengan cara :
1. Membuat sebuah postingan di halaman statis dalam mode Compos.
2. Kemudian upload gambar logo pada poin 1 diatas pada postingan tersebut.
3. Pilih original size agar resolusi dan sizenya sesuai dengan gambar aslinya.
4. Lalu ubah mode compos ke mode HTML Untuk melihat link URL gambar.
5. Salin Link URL gambar logo untuk kita gunakan pada file manifest.json di tahapan berikutnya.
3. Menyiapkan file manifest.json
{ "name": "NAMA BLOG ANDA", "short_name": "NAMA IKON BLOG ANDA", "scope": "URL HOMEPAGE", "start_url": "URL HOMEPAGE", "display": "standalone", "background_color": "#fff", "theme_color": "#2B0C93", "description": "DESKRIPSI BLOG ANDA", "icons": [{ "src": "https://3.bp.blogspot.com/........./........./s48/logo.png", "sizes": "48x48", "type": "image/png" }, { "src": "https://3.bp.blogspot.com/........./........./s72/logo.png", "sizes": "72x72", "type": "image/png" }, { "src": "https://3.bp.blogspot.com/........./........./s96/logo.png", "sizes": "96x96", "type": "image/png" }, { "src": "https://3.bp.blogspot.com/........./........./s144/logo.png", "sizes": "144x144", "type": "image/png" }, { "src": "https://3.bp.blogspot.com/........./........./s168/logo.png", "sizes": "168x168", "type": "image/png" }, { "src": "https://3.bp.blogspot.com/........./........./s192/logo.png", "sizes": "192x192", "type": "image/png" }, { "src": "https://3.bp.blogspot.com/........./........./s512/logo.png", "sizes": "512x512", "type": "image/png" }] }
Perhatikan Kode file manifest.json diatas, silahkan sobat sesuaikan beberapa kodenya dengan blog sobat :
| Name | Isi dengan nama blog sobat tehno |
| Sort Name | Nama Singkat Blog, tulis tanpa spasi dan kurang dari 12 karakter agar tidak terpotong |
| Start URL | Isi dengan URL dari home page blog sobat |
| Display | Jangan Dirubah |
| Background color | Sesuaikan dengan warna background dari blog sobat Tehno |
| Theme Color | Sesuaikan dengan warna dominan dari blog sobat Tehno |
| Description | Describsi blog |
Not : Untuk pengaturan icon isi dengan link hosting logo blog pada halaman statis pada poin 2, ingat : jangan lupa edit angka size dan S dari url mengikuti urutan ukuran pada code baris 1-7, contoh ukuran s48 mengikuti kuran size : "sizes": "48x48"
4. Membuat file manifest.json.
Setelah siap pengeditan kode pada note pad, lakukan penyimpanan file kode dengan nama "manifest.json" pilih all type.
5. Menghosting file manifest.json.
Upload file manisfest yang sudah di buat pada tahap 4 ke github, kemudian ambil link file tersebut untuk dibuatkan URL melalui "statically" atau "jsDelivr".
6. Mengedit kode HTML Blog
<link href='URL HOSTING FILE manifest.json ANDA' rel='manifest'/>
Buka editor html blog sobat, kemudian simpan file scrib diatas dibawah kode <head>, terlebih dahulu jangan lupa edit "url manifest.json" dengan url yang telah di buat pada tahapan 5.
7. Save As
Selesai save as silahkan dicoba PWA blog sobat di hand phone.
Selamat mencoba, jika ada kendala silahkan sobat diskusikan di kolom komentar.
Salam sukses.
Terimakasih