Cara Membuat Progressive Web Apps (PWA) Pada Blogger

Apakah kamu pernah mendengar istilah PWA???

Bila kamu adalah seorang developer atau seorang yang ahli IT pasti tidak asing dengan istilah tersebut.

Baik, saya akan menjelaskan mengenai PWA

PWA atau Progressive Web Application adalah sebuah metode pembuatan sebuah software menggunakan data dari website reguler menjadi menjadi sebuah aplikasi layaknya seperti aplikasi mobile di smartphone pada umumnya. Manfaat dari penggunaan metode PWA adalah kemampuan aplikasi untuk mempunyai fitur-fitur pada aplikasi web based dengan optimalisasi mobile experience sehingga akan mampu membuat pengunjung merasa nyaman saat membaca artikel di website kita.

Manfaat Menggunakan Progressive Web Apps

Progressive - Karena peningkatan bertahap pada web / aplikasi, ini bekerja dengan baik di antara semua pengguna.
Responsif - Cocok dengan setiap faktor bentuk: perangkat desktop, seluler, tablet, atau apa saja yang muncul berikutnya.
Connectifity Independent - Mampu berjalan di kondisi offline atau internet lambat.
App-like - Menggunakan PWA terasa seperti menggunakan app native, contohnya pada twitter.
Aman - Karena PWA hanya bisa berjalan sempurna di HTTPS, maka sekuritas akan selalu terjaga.
Installable - Memungkinkan pengguna untuk "menyimpan" aplikasi yang mereka anggap paling berguna di layar beranda tanpa kerumitan toko aplikasi.
Easy to share - Pengen share aplikasi? Ga perlu repot repot upload ke app store tinggal menggunakan url saja.

Langsung saja berikut cara untuk membuat Progressive Web Application pada web Blogger...

Sisipkan Asset Website

Hal pertama yang perlu kamu siapkan adalah asset dari website kamu seperti : Nama, Icon, dan warna Background. Untuk masalah Icon saya sarankan menggunakan 7 dimensi yaitu: 48px, 96px, 128px, 144px, 152px, 192px, 512px dengan aspek ratio 1:1 atau bentuk persegi.

Membuat Script Manifest.json

Selanjutkan adalah membuat script manifest.json dengan notepad atau text editor lainnya.

Berikut adalah script untuk membuat file manifest.json tinggal kalian sesuaikan saja dengan Nama, Icon dan Warna Background yang kalian inginkan. Dan jangan lupa simpan filenya dengan nama manifest.json

{
  "short_name": "Martino.id",
  "name": "Martino.id",
  "icons": [
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s48/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s96/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s192/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s128/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s152/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s144/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvbnng2v4oZLjV12elHTq5-VAH7PJiK0eta-h3fOHOLvkgtRXY3GQRC7orsTQNQSkpvrLG0DOPINnhfk2iT0qDL9mCr1xc7COe6fs46GE_hWGYhvf0SnMApk1frS3h_9PWn8AOXhq5tQ/s512/favicon-seputarweb.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "background_color": "#31de76",
  "display":"standalone",
  "orientation":"portrait",
  "theme_color":"#31de76",
  "start_url": "https://www.martino.id/?m=1",
  "scope": "https://www.martino.id/"
}

Jika sudah, file manifest.json bisa kamu upload ke web hosting kalian, atau bagi pengguna blogger kamu bisa upload di Github dengan membuat repository terlebih dahulu.

Sisipkan tag antara <head> dan </head>

Jika semua sudah kamu lakukan, langkah selanjutnya adalah pasang script tersebut ke dalam website kalian.

<link href='https://raw.githubusercontent.com/donmartin93/martinoid/master/manifest.json' rel='manifest'/>

ubah yang diblok warna dengan link manifest.json kamu.

untuk mengecek apakah website kamu sudah menggunakan PWA?? lakukan langkah berikut:

Buka Web Browser seperti mozilla atau google chrome
Ketikkan alamat website kamu
Klik kanan lalu pilih Inspect Element
Pilih Tab Application kemudian pilih manifest seperti yang terlihat pada gambar dibawah ini:

link gambar

Jika sudah maka kamu bisa mengaplikasikan pada smartphone kamu untuk melihat tampilan progressive web application atau PWA pada smartphone kamu. Caranya kamu bisa mengikuti tutorial dibawah ini:

link gif

Akhir Kata...

Begitulah cara membuat progressive web Application atau PWA pada blogger dengan membuat file manifest.json...

Cukup mudah bukan?? dan semoga bermanfaat....

Baca juga :

Go to Link

Martino.id