VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Membuat Progresif Web App (PWA) Untuk Blogger

Serieswans.com - Faktor yang mempengaruhi visitor saat mengakses Website atau Blog adalah dari segi kecepatan, sebab jika mengaksesya lambat pengunjung akan segera meninggalkan website anda. nah apa solusi untuk membuat akses website lebih cepat adalah dengan menggunakan PWA (Progresive Web Apps).

Cara Membuat Progresif Web App (PWA) Untuk Blogger

Mungkin beberapa dari anda ada yang masih belum mengenal apa itu PWA ? , tapi jangan khawatir karena kita akan membahas mengenai Apa itu Progressive Web Apps (PWA) beserta Kelebihan dari menggunakan PWA

Apa Itu Progressive Web Apps

Mungkin anda sudah pernah melihat opsi "Tambahkan ke Layar Utama" yang muncul di Google Chrome pada saat anda mengunjungi situs website ! nah pop up itu di tampilkan ketika situs website tersebut menggunakan PWA.

Disaat sudah mengklik tombol "Tambahkan Ke layar Utama", logo situs website tersebut telah di tambahkan ke layar utama ponsel anda.

contohnya saja jika anda sedang membaca artikel ini di ponsel, cukup klik 3 titik di pojok kanan atas lalu scroll ke bawah dan klik "Tambahkan Ke Layar Utama" maka halaman artikel ini  telah di tambahkan ke layar utama ponsel anda, disaat membuka aplikasi tersebut tampilan awalnya akan berbeda dengan yang anda buka di browser, apa yang berbeda ?

Jika anda membuka aplikasi lewat PWA yang sudah di tambahkan tadi, setelah anda membukanya yang di muat pertama kali adalah Splashscreen dengan logo situs webnya dan situs tersebut di tampilkan full layar layaknya sebuah aplikasi lain di ponsel anda. berbeda dengan kita membuka di browser, saat kita mengakses situs tersebut akan langsung masuk ke halaman hompage situs tersebut.

Nah, sekarang anda sudah mendapatkan gambaran yang jelas tentang apa itu PWA, selanjutnya kita akan coba mempelajari cara membuat aplikasi progresive web app untuk situs Blogger

Sebelum lanjut ke langkah-langkah membuat progressive app ini ada hal yang harus anda perhatikan terlebih dahulu yaitu 

Untuk saat ini masih belum bisa untuk menentukan/mengkonfigurasi file servceworker.js untuk PWA Blogger, karena blogger tidak mengizinkan pengguna mengunggah filenya sendiri ke direktori root situs web dan karena batasan tersebut, cache tidak di dukung PWA. 

Selain itu, Google Chrome tidak akan menampilkan popup "Add to Homescreen" jadi untuk menambahkan anda perlu mengklik tombol tambahan ke layar utama seperti apa yang sudah saya jelaskan diatas

Membuat Progressive Web Apps di blogger

Yang pertama ini siapkan logo favicon situs web anda. karena ini adalah langkah terpenting yang harus anda lakukan untuk membuat PWA blogger. silahkan buka situs favicon.io untuk membuat logo favicon menurut saya situs ini sangat recomended untuk membuat logo favicon.

Jika anda sudah memiliki logo favicon yang bagus buat blog anda, pilih opsi "Gambar" atau anda juga bisa memillih opsi "Buat dari teks"

tips — Jika anda menggunakan opsi "Buat dari teks" dan ingin latar belakang logo anda transparan, silahkan ubah nilai warna latarbelakang ke #ffffff00

Selanjutnya download file zip dari logo favicon yang sudah anda buat lalu ekstrak file tersebut.

Kompres Gambar (Lagkah Opsional)

Langkah 2 :  anda bisa mengikuti langkah ini untuk mengoptimalkan gambar tersebut untuk mengurangi ukurannya pada saat proses pemuatan gambar di blog agar lebih cepat dengan menggunakan iloveimg

Unggah Gambar

Langkah 3 : silahkan anda buka blogger.com dan buat draf posting dan unggah gambar yang sudah di ekstrak ke postingan, setelah itu simpan postingan tersebut dan pastingan anda tidak mempublikasikannya, ingat ya di Simpan

Membuat File Web Manifest dan Unggah di Github

Langkah 4 :  Silahkan buka Github dan bagi anda yang belum punya akunya, silahkan daftar terlebih dahulu

Setelah itu buat Repository baru

Cara Membuat Progresif Web App (PWA) Untuk Blogger


Silhkan beri nama Repository tersebut sesuai yang anda inginkan dan atur ke "Public" kemudian klik buat Repository

Cara Membuat Progresif Web App (PWA) Untuk Blogger

Kemudian pilih "Creating New File" dan atur nama file sesuai yang anda inginkan, jangan lupa kasih extension ".json"

Cara Membuat Progresif Web App (PWA) Untuk Blogger

Setelah itu copy kode Json di bawah ini dan letakan di Github anda

{
  "name": "Nama Blog",
  "short_name": "Nama Blog",
  "start_url": "Alamat Url blog",
  "display": "standalone",
   "background_color": "masukan nilai warna sesuai blog anda",
  "theme_color": "silahkan atur warna temanya",
  "description": "Silahkan masukan deskripsi blog anda",
  "icons": [{
    "src": "Url Icon favicon size 36x36",
    "sizes": "36x36",
    "type": "image/png",
    "density": "0.75"
  }, {
    "src": "Url Icon favicon size 48x48",
    "sizes": "48x48",
    "type": "image/png",
    "density": "1.0"
  }, {
    "src": "Url Icon favicon size 72x72",
    "sizes": "72x72",
    "type": "image/png",
    "density": "1.5"
  }, {
    "src": "Url Icon favicon size 96x96",
    "sizes": "96x96",
    "type": "image/png",
    "density": "2.0"
  }, {
    "src": "Url Icon favicon size 144x144",
    "sizes": "144x144",
    "type": "image/png",
    "density": "3.0"
  }, {
    "src": "Url Icon favicon size 192x192",
    "sizes": "192x192",
    "type": "image/png",
    "density": "4.0"
  }, {
    "src": "Url Icon favicon size 512x512",
    "sizes": "512x512",
    "type": "image/png",
    "density": "5.0"
  }]
}

tips — Jangan lupa juga untuk mengubah nama blog, alamat url, nilai warna sana url logo favicon, silahkan sesuaikan ukuranya

Jika anda sudah isi semua datanya, silahkan klik "Commit New File"

kemudian buka file webmanifestPWA dan buka file raw webmanifest dengan mengklik Raw
Cara Membuat Progresif Web App (PWA) Untuk Blogger

Setelah itu salin URL file Raw webmanifestPWA dan letakan terlebih dahulu di notepad 

Menempatkan URL di Template Blogger

1. Buka Blogger => Tema => Edit HTML
2. Cari kode <head> dan salin kode di bawah ini 
<link href="URL webmanifestPWA" rel="manifest"/> <link alt="serieswans" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUws9sfKjgGyNsjsfIRK8-EMmAmCfoQ_RsrrkhDGK5MhGrcn1E47TkFQrHtG1EW1iw9qMRa3AXrxv_el24IavvJcCWxPs-Vsft6nnpS12mR21f0aZ87Dfsequ0_49Ctjdkb0MfD0ND-WZh/s1600/apple-icon.png" rel="apple-touch-icon" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="16x16" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="32x32" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="57x57" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="60x60" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="72x72" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="76x76" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="114x114" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="120x120" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="144x144" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="152x152" />
<link alt="serieswans" href="Masukan link logo favicon sesuai size" rel="apple-touch-icon" sizes="180x180" />

tips — Jangan lupa untuk mengganti url webmanifestPWA dan url logo faviconnya.

3. Letakan kode di atas tepat di bawah kode <head> 
4. Terakhir Simpan tema 

Sampai disini anda sudah berhasil membuat Progressive Web Apps di blogger,  silahkan anda langsung coba, kunjungi situs web log anda di ponsel lalu tambahkan ke layar utama.

Demikian artikel kali ini mengenai Cara Membuat Progresif Web App (PWA) Untuk Blogger. jika ada pertanyaan, silahkan tinggalkan jejak di kolom komentar, semoga bermanfaat.
2

2 komentar

  • Habibi Muzakkir
    Habibi Muzakkir
    Juni 24, 2021
    Udah mau nyoba sih pakai pwa pada blog saya, tapi saya mau nanya mas, apakah kode yang akan kita letakkan diatas head bisa mempengaruhi loading blog? Satu lagi, apakah kode ya bisa kita letakkan diatas kode paling terakhir yaitu body?
    Reply
  • AdiCore
    AdiCore
    Mei 30, 2021
    Halo mas, saya ada tutorialnya untuk mengatasi service worker pada pwa blogger, silahkan kunjungi tutorialnya di sini https://www.marwanto606.com/2021/01/cara-membuat-blog-blogger-support-pwa.html
    Reply