Memasang Web App Manifest untuk PWA

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

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.


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 kalian dapat dijankan sendiri atau berdiri 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 Splash Screen atau halaman Loading Custom.
  5. orientation- Memberitahukan Browser agar Web App mendukung orientasi atau perputaran perangkat Landscape dan Portrait.
  6. 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:

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:

Cek Web App Manifest

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
Progressive Web App Audit
  • 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.

Tampilkan 12 Diskusi

12 Diskusi

  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
  7. Hampir semua produk web saya sudah PWA. Tapi penjelasannya sangat jelas dan bagus. Kunjungi Solarpertamina.com dan Suppliersolar.id | untuk yg start url, service worker saya kira 2 hal yg berhubungan erat dengan permission dari service worker yg memaksa pengiriman cache agar bisa diakses offline. Oya sebagai catatan sebaiknya bikin bloggernya Pakai SPA = Single page application semua info web dalam 1 halaman home, agar irit pakai accordion, multi tab, paralax, toc

    BalasHapus
  8. kalau saya mah udah tahu dari dulu cara masang manifest pwa untuk blogger kak, cuma untuk validnya gak bisa untuk struktur url blogger T_T

    BalasHapus

Posting Komentar