Memasang Web App Manifest untuk PWA
Pada artikel ini, kita akan membahas:
- Web App Manifest
- Konfigutasi Custom Splash Screen
- Mengatur Address-Bar Theme Color
Ini adalah artikel kelanjutan dari Bagian 2, pastikan kalian sudah membacanya. Jika kalian belum membacanya, saya yakin kalian akan sedikit bingung.
Daftar Isi
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:display- Memberitahukan Browser bahwa Website/Blog kalian dapat dijankan sendiri atau berdiri sendiri (Standalone).start_url- Menentukan halaman utama ketika Web App dijalankan.short_name, icons- Menentukan bagaimana Icon Web App dapat terlihat.name, icons, colors- Membuat Splash Screen atau halaman Loading Custom.orientation- Memberitahukan Browser agar Web App mendukung orientasi atau perputaran perangkat Landscape dan Portrait.- Dan masih banyak lagi.
Apa yang kalian butuhkan?
Berikut adalah beberapa hal yang akan kalian butuhkan sebelum memasang Web App Manifest:
- Sebuah Text Editor: Notepad, Sublime Text, dsb.
- Contoh Kode (Sudah saya sediakan dibawah).
Tahapan dalam membuat Web App Manifest
Buat file yang bernama manifest.json, salin kode berikut dan pastekan kedalamnya:
{
"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"
}
]
}
Blog EL Creative Academy juga memakai Web App Manifest yang formatnya sama seperti diatas, kalian bisa melihat Contoh Icon Manifest dan Filenya Disini.
Kalian juga bisa melihat kode diatas melalui halaman Github penulis.
Manifest Support atau mendukung beberapa ukuran icon untuk dapat ditampilkan pada ukuran layar perangkat yang berbeda. Pada kode diatas, kalian dapat memasukkan dan mengedit kode sesuai petunjuk atau teks 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 baik.
Terdapat beberapa layanan Icon Generator Online yang dapat kalian gunakan untuk membuat (Generate) Icon Manifest. Dari beberapa yang penulis rekomendasikan adalah:
Memasukkan Link ke Web App Manifest
Kita harus memberitahukan Browser bahwa Website/Blog kita telah menggunakan Web App Manifest dengan cara memasukkan kode <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 atau menggunakan platform Blogger, kalian bisa menguploadnya ke Content Delivery Network (CDN). Alternatifnya, kalian bisa menguploadnya ke Github dan Generate URL Production melalui Githack kemudian salin URL Production yang telah disedikan disana.
Chrome DevTool
Tool dari DevTool (Google Chrome) 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 seperti gambar dibawah ini:
Menambahkan Meta Tag dan Icon untuk iOS
Seperti yang sudah diketahui penulis, 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"/>
Meta Tag bagi 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 Warna Tema Address Bar
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- Sukses: Memiliki Meta Description
- Sukses: Memiliki Meta theme-color
- Sukses: Sudah dikonfigurasi untuk Custom Splash Screen
- Sukses: Memiliki Web App Manifest yang valid
- Gagal: Tidak merespon Offline
- Gagal: Belum mengatur
start_url - 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. Terimakasih.
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..
Tpi slug url dan source gambarnya kayak host blogger..
Entahlah, nunggu perkembangan saja..
bisa menguploadnya ke CDN. Alternatifnya, kalian bisa menguploadnya ke Github dan Generate Link dari Githack kemudian salin URL Production.
you can visit here for more cobietech.com