Ghidul manifestului aplicației web
Un manifest de aplicație web (site.webmanifest) este un fișier JSON care spune browserelor instalabile numele aplicației dvs., culorile, modul de afișare și ce dimensiuni de pictogramă să utilizați pe ecranul de pornire. Conectarea acestuia cu `<link rel='manifest' href='/site.webmanifest'>` activează promptul de instalare Chrome și Edge PWA pe desktop și Android. Asociați-l cu pictogramele PNG de 192×192 și 512×512 — ambele exportate de favicon generator — pentru o configurare completă a faviconului PWA.
Manifestul aplicației web este un fișier text JSON difuzat cu tipul MIME `application/manifest+json`. Se află la orice adresă URL pe care o alegeți, dar convenția este /site.webmanifest la rădăcina domeniului. Îl conectați de la HTML folosind `<link rel='manifest' href='/site.webmanifest'>` din interiorul elementului `<head>`. Browserul citește manifestul atunci când evaluează dacă să afișeze o solicitare de instalare sau cum să reda aplicația după instalare.
Matricea de pictograme este partea cea mai relevantă pentru favicon a manifestului. Fiecare intrare specifică un src (URL la imagine), dimensiuni (dimensiuni pixeli), tip (tip MIME) și opțional scop (fie „oricare”, „mascabil” sau „orice mascat”). Furnizați cel puțin un PNG de 192×192 pentru pictograma lansator și un PNG de 512×512 pentru ecranul de deschidere. Fără acestea, Chrome nu va afișa o solicitare de instalare.
Pictograma 192×192 este utilizată de Android Chrome în lansatorul de aplicații, comutatorul de aplicații recente și umbra de notificare atunci când PWA trimite o notificare push web. Trebuie să fie un PNG, accesibil la adresa URL declarată fără redirecționări și să fie difuzat cu antete CORS adecvate dacă se află pe un domeniu diferit de manifestul dvs. favicon generator exportă android-chrome-192x192.png gata pentru utilizare directă.
Pictograma 512×512 este utilizată pentru ecranul de deschidere PWA afișat în timp ce aplicația se încarcă după o lansare pe ecranul de pornire, previzualizarea dialogului de instalare în Chrome și Edge pe desktop și lansatorul aplicației Chrome OS. O intrare 512×512 lipsă din manifest nu blochează instalarea, dar are ca rezultat o pictogramă generică a browserului pe ecranul de deschidere. Includeți-l întotdeauna pentru o experiență de instalare rafinată.
Pictogramele mascate sunt o îmbunătățire specifică Android. Sistemul de pictograme adaptive Android aplică măști geometrice (cerc, squircle, lacrimă, dreptunghi rotunjit) pictogramelor aplicației, iar forma variază în funcție de producătorul dispozitivului. O pictogramă standard „orice” poate avea marginile tăiate de aceste măști. O pictogramă „mascabilă” include umplutură în zona de siguranță – păstrați opera de artă esențială în centrul imaginii la 80% (cercul zonei de siguranță) – astfel încât orice mască să poată fi aplicată fără tăierea siglei.
Pentru a declara o pictogramă masabilă în manifest, adăugați o a doua intrare pentru aceeași dimensiune cu `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }`. De asemenea, puteți combina: `'purpose': 'any maskable'` pe o singură intrare. Generați pictograma mascabilă cu umplutură suplimentară folosind opțiunea de export masabilă a generatorului.
Câmpurile name și short_name controlează modul în care aplicația dvs. este etichetată pe ecranul de pornire și în sertarul de aplicații. `name` este numele complet al aplicației afișat în timpul solicitării de instalare. `short_name` este eticheta de sub pictograma de pe ecranul de pornire — păstrați-o sub 12 caractere pentru a evita trunchierea pe ecranele mai mici. Ambele câmpuri sunt necesare pentru ca solicitarea de instalare să apară.
Câmpul theme_color setează culoarea barei de adrese a browserului pe Android Chrome atunci când utilizatorul navighează la site-ul dvs. (nu doar când este instalat PWA). De asemenea, setează culoarea barei de instrumente în modul independent PWA. Utilizați culoarea principală a mărcii ca valoare hexadecimală. Adăugați un „<meta name='theme-color' content='#YOUR_COLOR'>” potrivit în HTML pentru browserele care nu citesc theme_color din manifest.
Câmpul background_color controlează culoarea de fundal a ecranului de întâmpinare afișată între lansarea PWA și prima vopsea a conținutului aplicației. Setați-l să se potrivească cu fundalul aplicației dvs. (de obicei alb sau culoarea principală a mărcii) pentru a preveni fulgerul. Dacă background_color nu se potrivește cu fundalul real al aplicației, utilizatorii văd un salt de culoare în timpul pornirii.
Câmpul de afișare determină modul în care apare PWA după instalare. `standalone` ascunde bara de adrese a browserului și butoanele de navigare, făcând aplicația să arate ca o aplicație nativă. `minimal-ui` păstrează o bară de navigare minimă. `fullscreen` elimină totul, inclusiv bara de stare. `browser` arată interfața de utilizare completă a browserului. Pentru majoritatea PWA-urilor, `standalone` este alegerea corectă. Solicitarea de instalare nu apare dacă afișajul este setat la `browser`.
Câmpul start_url specifică ce adresă URL se deschide atunci când utilizatorul lansează PWA instalat de pe ecranul de start. Includeți întotdeauna acest lucru — fără el, Android deschide adresa URL la care a fost descoperit manifestul, care poate fi o pagină cu linkuri profunde, mai degrabă decât pagina dvs. de pornire. Utilizați `'start_url': '/'` pentru majoritatea site-urilor sau o anumită adresă URL dacă aplicația dvs. trebuie să înceapă de la o anumită rută.
Depanarea problemelor manifestului este simplă în Chrome DevTools. Deschideți DevTools (F12), navigați la fila Aplicație și faceți clic pe Manifest în panoul din stânga. Chrome afișează o vizualizare analizată a manifestului dvs., orice erori de analizare, eșecuri de preluare a pictogramelor și o listă de verificare „Instalabilitate” care explică de ce este posibil ca solicitarea de instalare să nu fie afișată. Problemele obișnuite includ pictograme negăsite (404), tip MIME greșit sau pictogramă 192×192 lipsă.
Servirea corectă a manifestului necesită două configurații pe partea serverului. În primul rând, fișierul trebuie trimis cu `Content-Type: application/manifest+json`. În al doilea rând, dacă pictogramele dvs. se află pe un CDN sau pe o origine diferită de manifest, răspunsurile pentru pictograme trebuie să includă anteturi CORS adecvate (`Access-Control-Allow-Origin: *` sau domeniul dvs.). Lipsa antetelor CORS din fișierele cu pictograme va face ca browserul să trateze manifestul ca nevalid.
Pentru cadrele care generează automat manifestul, verificați că fișierul generat include dimensiunile și culorile pictogramelor dvs. reale. Next.js generează un manifest din exportul dvs. /app/manifest.ts. Crearea aplicației React generează un /public/manifest.json. Vite nu generează un manifest în mod implicit - creați unul manual. În toate cazurile, actualizați matricea de pictograme pentru a face referire la fișierele dvs. de pictograme de marcă reale, mai degrabă decât la pictogramele de substituent implicite.
Cum funcționează
- 1
Generați pictograme PNG de 192×192 și 512×512
Încărcați sigla dvs. PNG sau SVG de 512×512 în [favicon generator](tool:favicon-generator). Pachetul de descărcare include android-chrome-192x192.png și android-chrome-512x512.png gata pentru utilizare directă.
- 2
Creați site.webmanifest
Creați un fișier JSON cu cel puțin: `name`, `short_name`, `icons` (192 și 512 intrări), `theme_color`, `background_color` și `display: 'standalone'`. Pachetul generator include un șablon manifest pre-completat.
- 3
Distribuiți manifestul cu tipul MIME corect
Configurați-vă serverul pentru a servi fișiere .webmanifest cu `Content-Type: application/manifest+json`. Pe Apache, adăugați `AddType application/manifest+json .webmanifest` la .htaccess. Pe Nginx, adăugați tipul MIME la mime.types.
- 4
Conectați manifestul în HTML
Adăugați `<link rel='manifest' href='/site.webmanifest'>` în interiorul `<head>`. De asemenea, adăugați `<meta name='theme-color' content='#YOUR_COLOR'>` pentru browserele care nu citesc manifestul theme_color.
- 5
Verificați cu Chrome DevTools
Deschideți Chrome DevTools > Aplicație > Manifest. Confirmați că nu sunt afișate erori și toate pictogramele se rezolvă. Verificați secțiunea Instalabilitate pentru criteriile exacte îndeplinite sau neîndeplinite pentru promptul de instalare PWA.
- 6
Testați promptul de instalare
Pe Android Chrome, navigați la site-ul dvs. Dacă toate criteriile sunt îndeplinite, Chrome afișează un banner de instalare sau o opțiune „Adăugați la ecranul de pornire” în meniul browserului. După instalare, verificați culoarea de fundal a ecranului de start și pictograma ecranului de pornire se redă corect.
Încearcă acum
Generați pachetul dvs. de pictograme PWA
Generator de FaviconÎntrebări frecvente
Este necesar un manifest de aplicație web pentru un site web de bază?+
Nu — numai dacă doriți să solicitați instalarea PWA pe ecranul de pornire pe Android și desktop Chrome/Edge. Numai favicon.ico se ocupă de filele browserului. Adăugați manifestul atunci când doriți să activați experiențe mai bogate de instalare pe dispozitive mobile și desktop.
Ce dimensiuni de pictogramă sunt incluse în manifestul aplicației web?+
Minimum: 192×192 (lansatorul Android) și 512×512 (ecran de deschidere și previzualizarea instalării). Adăugați variante de mascare de ambele dimensiuni pentru suport adaptiv pentru pictograme Android și 384×384 dacă doriți o acoperire suplimentară a densității.
Care este diferența dintre theme_color și background_color din manifest?+
theme_color setează bara de adrese a browserului și culoarea barei de instrumente. background_color setează culoarea de fundal a ecranului de întâmpinare afișată înainte de prima vopsea a aplicației. Setați ambele pentru a se potrivi cu marca dvs. pentru o experiență de instalare și lansare fără probleme.
De ce Chrome nu afișează o solicitare de instalare pentru PWA-ul meu?+
Cele mai frecvente motive sunt: manifest lipsă sau invalid, pictogramă 192×192 lipsă, pictograme care returnează 404, manifestul nu este difuzat cu tipul MIME corect sau site-ul nu este difuzat prin HTTPS. Utilizați Chrome DevTools > Aplicație > Manifest pentru a vedea motivul exact al eșecului instalării.
Ce este o pictogramă masabilă și am nevoie de una?+
O pictogramă care poate fi mascată include căptușeală în zonă sigură, astfel încât Android să poată aplica măști circulare sau în formă de squircle fără a vă tăia sigla. Aveți nevoie de unul pentru ca pictograma de pe ecranul dvs. de pornire să arate corect pe dispozitivele Android care folosesc forme de pictograme adaptive non-pătrate. Declarați-l cu `'purpose': 'maskable'` în matricea de pictograme manifest.
Pot folosi pictogramele SVG în manifestul aplicației web?+
Chromium acceptă SVG în anumite contexte de pictograme manifest, dar PNG este implicit sigură universal pentru interfețele de utilizare de instalare pe mai multe browsere. Includeți întotdeauna PNG 192 și 512 intrări. Puteți adăuga o intrare SVG alături de ele fără nici un rău.
Cum verific dacă manifestul meu web este valid?+
Deschideți Chrome DevTools (F12) > Aplicație > Manifest. Chrome afișează erori de analiză, eșecuri de preluare a pictogramelor și o listă completă de verificare a instalării. Remediați orice probleme raportate, apoi retestați promptul de instalare utilizând opțiunea „Adăugați la ecranul de pornire” din bara de adrese a lui Chrome.