Manifes aplikasi web adalah file yang Anda buat yang memberi tahu browser bagaimana Anda ingin konten web ditampilkan sebagai aplikasi dalam sistem operasi. Manifes dapat menyertakan informasi dasar seperti nama aplikasi, ikon, dan warna tema; preferensi lanjutan, seperti orientasi dan pintasan aplikasi yang diinginkan; dan metadata katalog, seperti screenshot.
Setiap PWA harus menyertakan satu manifes per aplikasi, yang biasanya dihosting di folder root, dan ditautkan di semua halaman HTML tempat PWA Anda dapat diinstal. Ekstensi resminya adalah .webmanifest
, sehingga Anda dapat memberi nama manifes seperti app.webmanifest
.
Menambahkan manifes aplikasi web ke PWA
Untuk membuat manifes aplikasi web, pertama-tama buat file teks dengan objek JSON yang berisi setidaknya kolom name
dengan nilai string:
app.webmanifest:
{
"name": "My First Application"
}
Tetapi membuat file saja tidak cukup, browser juga perlu mengetahui keberadaannya.
Menautkan ke manifes Anda
Agar browser mengenali manifes aplikasi web, Anda perlu menautkannya ke PWA menggunakan elemen HTML <link>
dan atribut rel
yang ditetapkan ke manifest
di semua halaman HTML PWA. Hal ini serupa dengan cara menautkan stylesheet CSS ke dokumen.
index.html:
<html lang="en">
<title>This is my first PWA</title>
<link rel="manifest" href="/app.webmanifest">
Men-debug manifes
Untuk memastikan manifes disiapkan dengan benar, Anda dapat menggunakan Inspector di Firefox dan DevTools di setiap browser berbasis Chromium.
Untuk browser Chromium
Di DevTools
- Di panel kiri, pada bagian Application, pilih Manifest.
- Periksa kolom manifes seperti yang diuraikan oleh browser.
Untuk Firefox
- Buka Inspector.
- Buka tab Application.
- Pilih opsi Manifes di panel kiri.
- Periksa kolom manifes seperti yang diuraikan oleh browser.
Mendesain pengalaman PWA Anda
Karena PWA Anda kini telah terhubung ke manifesnya, kini saatnya mengisi kolom lainnya untuk menentukan pengalaman bagi pengguna Anda.
Kolom dasar
Kumpulan kolom pertama menunjukkan informasi inti tentang PWA Anda. Alat ini digunakan untuk membuat ikon dan jendela PWA yang terinstal serta menentukan cara memulainya. Bagian-bagian tersebut adalah:
name
- Nama lengkap PWA Anda. Tombol ini akan muncul bersama ikon di layar utama, peluncur, dok, atau menu sistem operasi.
short_name
- Opsional, nama PWA yang lebih pendek, yang digunakan jika tidak ada cukup ruang untuk menampilkan nilai penuh kolom
name
. Pastikan panjang deskripsi tidak melebihi 12 karakter untuk meminimalkan kemungkinan pemotongan. icons
- Array objek ikon dengan kolom
src
,type
,sizes
, danpurpose
opsional, yang mendeskripsikan gambar apa yang harus mewakili PWA. start_url
- URL yang harus dimuat PWA saat pengguna memulainya dari ikon diinstal. Jalur absolut direkomendasikan, jadi jika halaman beranda PWA Anda adalah root situs Anda, Anda dapat menetapkannya ke '/' untuk membukanya saat aplikasi dimulai. Jika Anda tidak memberikan URL mulai, browser dapat menggunakan URL tempat PWA diinstal sebagai awal. Atribut ini dapat berupa deep link, seperti detail produk, bukan layar utama.
display
- Salah satu dari
fullscreen
,standalone
,minimal-ui
, ataubrowser
, yang menjelaskan cara OS menggambar jendela PWA. Anda dapat membaca selengkapnya tentang berbagai mode tampilan di bab Desain Aplikasi. Sebagian besar kasus penggunaan menerapkanstandalone
. id
- String yang mengidentifikasi PWA ini secara unik dibandingkan dengan PWA lain yang mungkin dihosting di origin yang sama. Jika tidak ditetapkan,
start_url
akan digunakan sebagai nilai penggantian. Perlu diingat bahwa dengan mengubahstart_url
di masa mendatang (seperti saat mengubah nilai string kueri), Anda dapat menghapus kemampuan browser untuk mendeteksi bahwa PWA sudah diinstal.
Ikon
Ikon PWA Anda adalah identitas visualnya di seluruh perangkat pengguna perangkat saat diinstal, jadi penting untuk menentukan setidaknya satu perangkat. Karena properti icons
adalah kumpulan objek ikon, Anda dapat menentukan beberapa ikon dalam berbagai format untuk memberikan pengalaman ikon terbaik bagi pengguna. Setiap browser akan memilih satu atau beberapa ikon berdasarkan kebutuhannya dan sistem operasi yang menginstalnya, ikon yang lebih mendekati spesifikasi yang dibutuhkan.
Jika Anda hanya perlu memilih satu ukuran ikon, maka harus 512 x 512 piksel. Namun, sebaiknya Anda juga menyediakan gambar berukuran 192 x 192, 384 x 384, dan 1024 x 1024 piksel.
"icons": [
{
"src": "icons/512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icons/1024.png",
"type": "image/png",
"sizes": "1024x1024"
}
]
Jika Anda tidak memberikan ikon atau ikon tidak dalam ukuran yang disarankan, pada beberapa platform, Anda tidak akan memenuhi kriteria penginstalan. Di platform lain, ikon akan otomatis dibuat, misalnya dari screenshot PWA atau dengan menggunakan ikon umum.
Ikon yang dapat disamarkan
Beberapa sistem operasi, seperti Android, menyesuaikan ikon dengan berbagai ukuran dan bentuk. Misalnya, di Android 12, produsen atau setelan yang berbeda dapat mengubah bentuk ikon dari lingkaran menjadi persegi menjadi kotak dengan sudut membulat. Untuk mendukung jenis ikon adaptif ini, Anda dapat memberikan ikon maskable menggunakan kolom purpose
.
Untuk melakukannya, sediakan {i>file<i} gambar persegi yang memiliki ikon utamanya yang berada di dalam "zona aman", lingkaran yang berpusat pada ikon dengan radius 40 persen dari lebar ikon. (Lihat gambar di bawah.) Perangkat yang mendukung ikon yang dapat disamarkan akan menyamarkan ikon Anda sesuai kebutuhan.
Berikut adalah contoh ikon maskable yang dirender dalam sejumlah bentuk yang umum digunakan:
Pada gambar berikut, jika Anda menggunakan ikon di sebelah kiri sebagai ikon maskable, Anda akan mendapatkan hasil yang buruk pada perangkat saat shape mask diterapkan.
Gambar ini dapat digunakan dengan lebih banyak padding.
Ikon yang dapat disamarkan harus berukuran 512 x 512 setidaknya. Setelah membuat kartu, Anda dapat menambahkannya ke koleksi icons
untuk meningkatkan pengalaman bagi perangkat yang didukung:
"icons": [
{
"src": "/icons/512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/icons/1024.png",
"type": "image/png",
"sizes": "1024x1024"
},
{
"src": "/icons/512-maskable.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
]
Dalam sebagian besar kasus, jika ikon maskable Anda tidak ditampilkan dengan baik, Anda dapat memperbaikinya dengan menambahkan lebih banyak padding. Maskable.app adalah alat online gratis untuk menguji dan membuat versi ikon yang dapat disamarkan.
Kolom yang direkomendasikan
Kumpulan kolom berikutnya yang akan disertakan adalah kolom yang akan meningkatkan pengalaman pengguna, meskipun tidak diperlukan untuk dapat diinstal.
theme_color
- Warna default untuk aplikasi, terkadang memengaruhi cara OS menampilkan situs (misalnya, warna jendela dan kolom judul di desktop, atau warna status bar di perangkat seluler). Warna ini dapat diganti oleh elemen
theme-color
<meta>
HTML. background_color
- Warna placeholder yang akan ditampilkan di latar belakang aplikasi sebelum stylesheetnya dimuat. Safari di iOS dan iPadOS serta sebagian besar browser desktop saat ini mengabaikan kolom ini.
scope
- Mengubah cakupan navigasi PWA, memungkinkan Anda menentukan apa yang ditampilkan dan tidak ditampilkan di jendela aplikasi terinstal. Misalnya, jika Anda menautkan ke halaman di luar cakupan, halaman tersebut akan dirender di browser dalam aplikasi, bukan di dalam jendela PWA Anda. Namun, ini tidak akan mengubah cakupan pekerja layanan Anda.
Gambar berikutnya menunjukkan cara kolom theme_color
digunakan untuk panel judul di perangkat desktop saat Anda menginstal PWA.
Saat menentukan warna dalam manifes, seperti dalam theme_color
dan background_color
, Anda harus menggunakan warna yang diberi nama CSS, seperti salmon
atau orange
, warna RGB seperti #FF5500
, atau fungsi warna tanpa transparansi seperti rgb()
atau hsl()
. Lihat Bab desain aplikasi untuk informasi selengkapnya.
Coba
Layar pembuka
Di beberapa perangkat, gambar statis dirender saat PWA sedang dimuat untuk memberikan masukan langsung kepada pengguna.
Android menggunakan nilai theme_color
, background_color
, dan icon
untuk membuat layar pembuka.
Saat Anda menginstal PWA di Android, perangkat akan menghasilkan layar pembuka dengan informasi yang berasal dari manifes Anda seperti yang terlihat pada diagram berikut.
Di sisi lain, Safari di iOS dan iPadOS tidak menggunakan manifes aplikasi web untuk menghasilkan layar pembuka. Sebagai gantinya, mereka menggunakan gambar yang ditautkan dari elemen <link>
eksklusif yang mirip dengan cara mereka menangani ikon. Lihat Bab Peningkatan kualitas untuk detail selengkapnya.
Kolom yang diperluas
Kumpulan kolom berikutnya menawarkan informasi tambahan tentang PWA Anda. Semuanya bersifat opsional.
lang
- Tag bahasa yang menentukan bahasa utama nilai manifes, seperti
en
untuk bahasa Inggris,pt-BR
untuk bahasa Portugis Brasil, atauin
untuk bahasa Hindi. dir
- Arah untuk menampilkan kolom manifes yang mendukung arah (seperti
name
,short_name
, dandescription
). Nilai yang valid adalahauto
,ltr
(kiri-ke-kanan), danrtl
(kanan-ke-kiri). orientation
- Orientasi yang diinginkan untuk aplikasi setelah diinstal. Game dapat menyetelnya untuk meminta orientasi khusus lanskap. Beberapa nilai diterima, tetapi jika disertakan, biasanya
portrait
ataulandscape
secara eksplisit.
Kolom promosi
Kumpulan kolom keempat memungkinkan Anda memberikan informasi promosi tentang PWA, misalnya, dalam alur penginstalan, listingan, dan hasil penelusuran.
description
- Penjelasan tentang fungsi PWA.
screenshots
- Array objek screenshot dengan
src
,type
, dansizes
(serupa dengan objekicons
) yang dimaksudkan untuk menampilkan PWA. Tidak ada batasan ukuran. categories
- Array kategori yang harus dimiliki PWA dan digunakan sebagai petunjuk untuk listingan, secara opsional dari daftar kategori yang diketahui. Nilai ini biasanya menggunakan huruf kecil.
iarc_rating_id
- Kode sertifikasi International Age Rating Coalition untuk PWA, jika ada. Fitur ini dimaksudkan untuk digunakan guna menentukan usia yang sesuai untuk PWA Anda.
Anda dapat melihat cara kerja kolom promosi ini sekarang. Di Android, misalnya, jika PWA Anda dapat diinstal dan Anda memberikan nilai untuk setidaknya kolom description
dan screenshots
, pengalaman dialog penginstalan akan berubah dari "Tambahkan ke layar utama" yang sederhana bilah info, ke dialog penginstalan yang lebih lengkap yang mirip dengan yang berasal dari app store.
Di Android, Anda bisa mendapatkan UI penginstalan yang lebih bagus jika Anda memberikan nilai untuk kolom promosi, seperti yang dapat Anda lihat di video berikutnya
Lihat cara kerja kolom promosi berikut:
Kolom Kemampuan
Terakhir, ada sejumlah kolom yang terkait dengan berbagai kemampuan yang dapat digunakan PWA Anda di browser yang didukung, seperti kolom shortcuts
, share_target
, display_overrides
seperti yang kita bahas di Bab Kemampuan. Ada juga kolom, seperti related_apps
dan prefer_related_apps
(lihat bab Deteksi untuk mengetahui informasi selengkapnya), untuk menghubungkan PWA ke aplikasi terinstal, sering kali dari app store.
Banyak kolom baru dapat muncul di masa mendatang sementara browser menambahkan lebih banyak kemampuan ke Progressive Web App.