Ads by Yasya El Hakim
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.

0Komentar

Sebelumnya Selanjutnya