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.

Tehnosia Web
Tehnosia Web Bukan Blogger Master, hanya seorang Newbie yang senang seputar "Gadget" dan "Technology". Belajar ngeblog secara otodidak
Tertap Terhubung dengan Kami
Face Book-IG-Twitter
! Support Kami Di !
Trakteer Kami

Posting Komentar untuk "Mengenal PWA dan Cara Membuatnya di Blogger"