Capitol gratuit

Web App Manifest - configurare și personalizare

Web App Manifest este un fișier JSON simplu care furnizează browserului informații despre aplicația dumneavoastră web - cum ar trebui să se comporte când e...

Introducere

Web App Manifest este un fișier JSON simplu care furnizează browserului informații despre aplicația dumneavoastră web - cum ar trebui să se comporte când este „instalată" pe dispozitivul utilizatorului. Acest fișier controlează numele, iconele, culorile, modul de afișare și multe alte proprietăți ale PWA-ului.

Structura completă a manifestului

Iată un exemplu complet de fișier manifest.json cu toate proprietățile importante:

{
"name": "Aplicația mea PWA - Nume complet",
"short_name": "PWA App",
"description": "Descrierea aplicației web progresive",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"orientation": "portrait-primary",
"background_color": "#1b2028",
"theme_color": "#ccac65",
"lang": "ro",
"dir": "ltr",
"categories": ["business", "productivity"],
"icons": [
{
"src": "/icons/icon-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icons/icon-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/icons/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/icons/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"screenshots": [
{
"src": "/screenshots/desktop.png",
"sizes": "1280x720",
"type": "image/png",
"form_factor": "wide",
"label": "Pagina principală - desktop"
},
{
"src": "/screenshots/mobile.png",
"sizes": "375x812",
"type": "image/png",
"form_factor": "narrow",
"label": "Pagina principală - mobil"
}
],
"shortcuts": [
{
"name": "Produse noi",
"short_name": "Noi",
"url": "/produse/noi",
"icons": [{"src": "/icons/shortcut-new.png", "sizes": "96x96"}]
},
{
"name": "Contul meu",
"short_name": "Cont",
"url": "/cont",
"icons": [{"src": "/icons/shortcut-account.png", "sizes": "96x96"}]
}
],
"related_applications": [],
"prefer_related_applications": false
}

Proprietăți esențiale explicate

Proprietate Obligatoriu Descriere
name Da Numele complet al aplicației (afișat la instalare)
short_name Da Numele scurt (afișat sub iconiță pe ecranul de start)
start_url Da URL-ul care se deschide la lansarea aplicației
display Da Modul de afișare: standalone, fullscreen, minimal-ui, browser
icons Da Array de icoane în diferite dimensiuni (minim 192x192 și 512x512)
background_color Recomandat Culoarea de fundal a splash screen-ului
theme_color Recomandat Culoarea temei (bara de status pe mobil)
scope Opțional Limitează navigarea la un anumit path
orientation Opțional Orientarea preferată: portrait, landscape, any
screenshots Opțional Capturi de ecran pentru dialogul de instalare îmbunătățit

Moduri de afișare (display)

Mod Bară de adrese Bară de status Utilizare
fullscreen Ascunsă Ascunsă Jocuri, prezentări
standalone Ascunsă Vizibilă Majoritatea PWA-urilor (recomandat)
minimal-ui Minimalizată Vizibilă Aplicații care necesită navigare înapoi
browser Vizibilă Vizibilă Tab normal de browser

Icoane maskable vs. icoane standard

Icoanele maskable sunt un format special care permite sistemului de operare să aplice forme diferite (cerc, pătrat rotunjit, etc.) iconului aplicației dumneavoastră:

Icoane maskable
- Se adaptează la forma impusă de OS
- Zona sigură centrală: 80% din dimensiune
- Fundal colorat inclus în imagine
- Arată profesional pe orice dispozitiv
- Proprietate: "purpose": "maskable"
Icoane standard (any)
- Formă fixă, definită de designer
- Pot fi tăiate incorect pe unele dispozitive
- Fond transparent frecvent
- Aspect inconsistent între platforme
- Proprietate: "purpose": "any"

Conectarea manifestului la HTML

<!-- În <head> al fișierului HTML -->
<link rel="manifest" href="/manifest.json">

<!-- Meta tags suplimentare pentru compatibilitate -->
<meta name="theme-color" content="#ccac65">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="PWA App">

<!-- Icoane pentru iOS (Apple nu citește manifestul complet) -->
<link rel="apple-touch-icon" href="/icons/icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180.png">

<!-- Splash screen pentru iOS -->
<link rel="apple-touch-startup-image" href="/splash/splash-640x1136.png"
media="(device-width: 320px) and (device-height: 568px)">
Atenție iOS: Safari pe iOS nu citește toate proprietățile din Web App Manifest. Este necesar să adăugați meta tag-uri suplimentare în HTML pentru compatibilitate deplină cu dispozitivele Apple. Proprietățile shortcuts și screenshots nu sunt suportate pe iOS.
Sfat: Utilizați instrumentul maskable.app pentru a testa și genera icoane maskable. De asemenea, PWA Builder oferă un generator complet de manifest cu previzualizare pe diferite dispozitive.
Validare: În Chrome DevTools → Application → Manifest, puteți verifica dacă manifestul este citit corect. Toate erorile și avertismentele sunt afișate acolo, inclusiv icoane lipsă sau proprietăți invalide.

Continuați cu restul cursului

Acesta este capitolul 3 din cele 20 ale cursului, cu 5 lecții din 102. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.

Cumpărați cursul la 110 €