Memasang Web App Manifest untuk PWA: Bagian 3

Ini adalah artikel kelanjutan dari Bagian 2, pastikan kalian sudah membacanya. Jika kalian belum membacanya, saya yakin kalian akan sedikit bingung.

Pada artikel ini, kita akan membahas:
  • Web App Manifest
  • Konfigutasi Custom Splash Screen
  • Mengatur Address-Bar Theme Color

Membuat Web App Manifest

Web App Manifest merupakan sebuah file yang berformat .JSON dan berfungsi untuk mengontrol apa saja hal yang akan terlihat pada pengguna.

Dengan menggunakan Web App Manifest, kalian dapat:

  1. display: Memberitahukan Browser bahwa Website/Blog anda bisa dijankan sendiri (Standalone).
  2. start_url: Menentukan halaman utama ketika Web App dijalankan.
  3. short_name, icons: Menentukan bagaimana Icon Web App dapat terlihat.
  4. name, icons, colors: Membuat Custom Splash Screen.
  5. orientation: Memberitahukan Browser agar Web App mendukung Landscape dan Portrait.
  6. Dan masih banyak lagi.

Apa yang kalian butuhkan?

  • Sebuah Text Editor: Notepad, Sublime Text, dsb.
  • Contoh Kode (Sudah saya sediakan dibawah).

Tahapan dalam membuat Web App Manifest

Buat file bernama manifest.json dan salin kode berikut:
{
  "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"
  }]
}

Untuk Blog EL Creative Academy, kalian bisa melihat Contoh Icon Manifest dan File manifest.json.

Kalian juga bisa melihat kode diatas melalui halaman Github saya.

Manifest Support beberapa ukuran icon untuk dapat ditampilkan pada ukuran layar yang berbeda. Pada kode diatas, kalian bisa memasukkan dan mengedit kode sesuai petunjuk yang tersedia.

Membuat icon pack untuk manifest

Disini kalian harus memiliki sebuah gambar dalam format .PNG. Pastikan juga kalau gambar tersebut adalah berukuran 1:1 dan memiliki resolusi yang tinggi.

Terdapat beberapa layanan Online yang bisa kalian gunakan untuk membuat (Generate) Icon Manifest. Dari beberapa yang saya rekomendasikan adalah:

Memasukkan Link ke Web App Manifest

Kita harus memberitahukan Browser bahwa kita menggunakan Web App Manifest dengan cara memasukkan <link rel="manifest"... pada setiap halaman. Masukkan kode berikut diantara tag <head> dan </head>.
<!-- Link Rel Manifest -->
<link rel="manifest" href="/manifest.json"/>

Jika kalian pengguna Blogger, kalian bisa menguploadnya ke CDN. Alternatifnya, kalian bisa menguploadnya ke Github dan Generate Link dari Githack kemudian salin URL Production.

Chrome DevTool

Tool dari DevTool dapat kita gunakan untuk mengecek file manifest.json. Kalian bisa melihat file tersebut dengan mengeklik panel Application. Jika kalian memasukkan informasi Manifest dengan benar, maka kalian akan melihat format manifest yang benar.

Cek Web App Manifest

Menambahkan Meta Tag dan Icon untuk iOS

Seperti yang sudah saya ketahui, Browser Safari dan iOS belum mendukung Web App Manifest. Jadi, kalian bisa menambahkan Meta Tag berikut kedalam halaman anda diantara tag <head> dan </head>.
<!-- Meta Tag Icon untuk iOS -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="Kode Warna (Hex)"/>
<meta name="apple-mobile-web-app-title" content="Judul Blog/Website"/>
<link rel="apple-touch-icon" href="URL Icon 152x152px"/>

Untuk pengguna Blogger:

Masukkan meta tag apple-mobile-web-app-title dengan meta tag berikut:
<meta name="apple-mobile-web-app-title" expr:content="data:blog.title"/>

atau:
<meta name="apple-mobile-web-app-title" expr:content="data:blog.title.escaped"/>

Mengatasi Masalah pada Lighthouse

Terdapat beberapa hal yang dapat kita selesaikan ketika terdapat beberapa kesalahan, mari kita perbaiki kesalahan tersebut.

Pastikan Blog/Website kalian memiliki Meta Tag Description

Pada tab Audit, Kalian akan melihat SEO Audit. Jika ikon pada deskripsi memilki tanda centang berwarna hijau, artinya sudah terselesaikan, sebaliknya, jika icon berupa tanda seru berwarna merah, maka itu yang harus kalian perbaiki.

Disini, Blog EL Creative Academy sudah sudah memasang Meta Description. Jadi tidak terdapat masalah. Jika kalian belum memasang Meta Description, maka kalian bisa menggunakan kode berikut dan letakkan diantara bagian <head> dan </head>.
<!-- Meta Description -->
<meta name="description" content="Deskripsi Blog/Website"/>

Mengatur Address Bar Theme Color

Pada Audit PWA, jika kalian belum memasang Meta Theme Color, maka kalian akan mendapatkan peringatan. Meta Theme Color berfungsi untuk memberikan warna pada Address Bar Browser sesuai dengan warna yang kalian masukkan.

Disini, Blog EL Creative Academy sudah sudah memasang Meta Theme Color, Jadi tidak terdapat masalah. Jika kalian belum memasang Meta Theme Color, maka kalian bisa menggunakan kode berikut dan letakkan diantara bagian <head> dan </head>.
<!-- Meta theme-color -->
<meta name="theme-color" content="Warna (Hex)" />

Verifikasi Perubahan pada Lighthouse

Jalankan Lighthouse dengan mengeklik tab Audit > tanda plus (+). Kemudian lihat perubahannya.

SEO Audit
  1. Sukses: Memiliki Meta Description

Progressive Web App Audit
  1. Sukses: Memiliki Meta theme-color
  2. Sukses: Sudah dikonfigurasi untuk Custom Splash Screen
  3. Sukses: Memiliki Web App Manifest yang valid
  4. Gagal: Tidak merespon Offline
  5. Gagal: Belum mengatur start_url
  6. Gagal: Belum mengatur Service Worker dan start_url

Pada artikel selanjutnya, kita akan menyelesaikan Audit yang gagal. So, stay tune. Jika kalian memilki beberapa pertanyaan, silahkan tulis pada kolom komentar.

10 Komentar

  1. Saya tunggu tutorial selanjutnya ya pak :)

    BalasHapus
  2. Saya sedang mencari2 untuk bagian selanjutnya..

    Untuk service worker menurut forum harus memasang di root hosting, sedangkan Blogger tidak support akses root host.

    Tetapi ada blogger yang suskes mengaplikasikan manifest dg baik.. Silakan cek thehackernews.com

    Terima kasih..

    BalasHapus
    Balasan
    1. yang lebih istimewah lagi website thehackernews.com tidak ada www pada awalannya. saya pernah menghubungi pemiliknya menanyakan kenapa bisa seperti itu, dia mengatakan kalau dulu pernah ada celah di blogspot yang memperbolehkan tidak menggunakan www namun hal itu sudah diperbarui oleh pihak blogspot dan sekarang website thehackernews tetap masih bisa tanpa www

      Hapus
    2. Saya pernah tanya ke Bang Adhy kompiajaib, thehackernews.com bukan platform blogger katanya, mungkin Joomla atau apa.

      Tpi slug url dan source gambarnya kayak host blogger..

      Entahlah, nunggu perkembangan saja..

      Hapus
  3. Masih Menunggu tutorial selanjutnya

    BalasHapus
  4. maaf ini untuk file manifest,jsnya di save di mana ya kurang jelasa saya mas

    BalasHapus
    Balasan
    1. Diartikel sudah dijelaskan
      bisa menguploadnya ke CDN. Alternatifnya, kalian bisa menguploadnya ke Github dan Generate Link dari Githack kemudian salin URL Production.

      Hapus
  5. Baru tadi saya mengikuti seminar bapakrekraf developer day 2020 di sesi web trak. Ada pembahasan terkait WPA, sangat menarik buat yang gak bisa menguasai programan Android.

    BalasHapus
  6. Apa memungkinkan blog yang dibuat pake blogger menggunakan pwa builder?

    BalasHapus
    Balasan
    1. very sure..... it works
      you can visit here for more cobietech.com

      Hapus

Posting Komentar