Manifest PWA: Crearea aplicației dvs. web Manifestați în mod ușoară

Un manifest al aplicației web configurat corespunzător este crucial pentru procesul de instalare a PWA, deoarece fără el, întregul proces nu este posibil. Și, în mod surprinzător, nu este atât de greu să aveți aplicația dvs. web configurată corect.

Pentru ce este?

Manifestul aplicației web este o parte vitală a PWA, deoarece determină modul în care aplicația dvs. se prezintă utilizatorului în ecranul de start și pe ecranul de pornire al utilizatorului. Acestea sunt toate etapele inițiale importante care contribuie la modelarea impresiilor utilizatorilor despre aplicația dvs., motiv pentru care este important să o faceți corect.

Modalități de a configura manifest.json

Pornind de la zero

Cu un pic de familiaritate cu formatul de date JSON, puteți crea propriul manifest de aplicație web fără niciun efort.

Un manifest.json tipic ar trebui să arate cam așa:

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "ecran complet",
    "domeniu": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Soluții de comerț electronic de generație următoare pentru Magento",
    „icoane”: [
        {
            "src": "/icon-192x192.png",
            "dimensiuni": "192x",
            "type": "imagine/png"
        },
        {
            "src": "/icon-256x256.png",
            "dimensiuni": "256x",
            "type": "imagine/png"
        },
        {
            "src": "/icon-384x384.png",
            "dimensiuni": "384x",
            "type": "imagine/png"
        },
        {
            "src": "/icon-512x512.png",
            "dimensiuni": "512x",
            "type": "imagine/png"
        }
    ]
}

Puteți lăsa unele părți ale codului afară, dar există totuși câțiva membri necesari, fără de care utilizatorul nu va putea instala PWA:

 nume, nume scurt, pictograme, afișaj, start_url

• name : numele aplicației dvs., care este afișat sub pictograma aplicației dvs. pe ecranul de pornire și în diferite alte locuri. Păstrați valoarea proprietății numelui dvs. scurtă și simplă.

• short-name : Când valoarea proprietății name dvs. nu se încadrează în ecranul utilizatorului, se va folosi valoarea acestei proprietăți. Se recomandă ca short-name să aibă mai puțin de 20 de caractere. De fapt, filmează pentru 10 caractere.

• icons : pictogramele aplicației dvs., care pot consta din mai multe imagini pentru diferite sisteme de operare și dispozitive. Puteți defini un set de pictograme pe care browser-ul le va utiliza pentru adăugarea la ecranul de pornire, ecranul de introducere și așa mai departe.

De exemplu, numai iOS necesită 4 dimensiuni diferite pentru 4 dintre dispozitivele sale:

• iPhone: 120 x 120 pixeli și 180 x 180 pixeli
• iPad Pro: 167 x 167 pixeli
• iPad și iPad mini: 152 x 152 pixeli

Chiar și Google Chrome necesită cel puțin 2 dimensiuni diferite pentru o utilizare completă pe iOS și Android:

• 512 x 512 pixeli
• 192 x 192 pixeli

Pentru ca pictograma imaginii dvs. să fie apelată, este folosit un set de proprietăți, și anume src , type și sizes .

• src : calea către fișierul imagine al pictogramei
• types : tipul fișierului imagine
• sizes : latime x inaltime a imaginii, in pixeli

 „icoane” : [ 
    {
       "src" : "/imgs/icon152.png",
       "type" : "imagine/png",
       "dimensiuni" : "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "type" : "imagine/png",
       "dimensiuni" : "512x512"
    }
]

• display : indică modul în care ar trebui să fie afișată aplicația. Pentru o experiență captivantă și asemănătoare aplicației, se recomandă să o setați la fullscreen (fără interfață de utilizare). Cu toate acestea, sunt disponibile și opțiuni precum standalone , minimal-ui , care sunt mai puțin costisitoare în ceea ce privește performanța, dar vin cu prețul pierderii experienței imersive (bara de stare ar putea fi încă afișată).

• start_url : indică calea de la care pornește aplicația. Valoarea ta start_url ar putea fi un simplu / dacă aplicația ta pornește din același director .root unde este stocat manifest.json .

Membrii optionali

Să mergi după carte este un lucru, dar întotdeauna ai loc să încerci să fii mai bun. Mai jos sunt cheile noastre recomandate pentru un manifest al aplicației web mai bun și mai detaliat:

• domeniul de scope : limitează măsura în care un utilizator poate merge. Dacă utilizatorul navighează în afara domeniului de aplicare, acesta revine la o pagină web normală în interiorul unei file sau ferestre de browser. Pentru a vă defini site-ul, introduceți pur și simplu un / sau introduceți adresa URL completă a site-ului dvs.

Note :
– Comportamentul implicit al scope este directorul din care este difuzat manifest.json .
– Orice link deschis în aplicația web va fi redat în fereastra PWA existentă. Pentru a deschide orice link într-o filă de browser, trebuie să adăugați target="_blank" la eticheta <a> .
– start_url trebuie să fie în domeniu.

• background_color : indică culoarea de fundal în anumite contexte de aplicație. Mai precis, acest câmp poate fi folosit pentru a seta culoarea de fundal pentru ecranul de splash.

• theme_color : indică culoarea temei elementelor UI ale aplicației web, cum ar fi bara de adrese. Modificarea este aplicată la nivelul întregului site și este eficientă numai atunci când site-ul este lansat de pe ecranul de pornire.

Note : Configurațiile dvs. la nivel de pagină — de exemplu, metaetichetă theme-color: <meta name="theme-color" content="#3367D6"> — vor suprascrie valoarea dvs. theme_color în manifestul aplicației web.

• description : Acest lucru ar trebui să se explice de la sine.

• shortcuts : definește comenzile rapide către pagini din aplicația web. Comenzile rapide ale aplicației pot fi accesate apăsând lung pe pictograma de lansare a aplicației pe Android sau făcând clic dreapta pe pictograma aplicației din bara de activități (Windows)/dock (macOS).

 "comenzi rapide" : [
  {
    "name": "Notificări",
    "url": "/utilizator/notificări/",
    "description": "Știri pe care le-ați ratat"
  },
  {
    "name": "Creați o nouă comandă",
    "url": "/creați/comanda"
  },
  {
    "name": "Lista mea de dorințe",
    "url": "/utilizator/lista de dorințe"
  }
]

Folosind un generator de manifeste pentru aplicații web

O modalitate mai ușoară și mai simplă de a face acest lucru ar fi utilizarea unui generator de manifeste pentru aplicații web. Generatorul preia input-ul dvs. și, pe baza căruia, generează un manifest al aplicației web complet funcțional, care poate fi utilizat ca atare.

Conectați-vă manifest.json

Când totul este configurat corect, următorul pas este să faceți referire la manifestul aplicației web în antetul HTML.

 <link rel="manifest" href="/manifest.webmanifest">

După ce faceți referire la manifestul aplicației web, toate browserele acceptate ar trebui să recunoască acum corect manifest.json . Pentru o listă completă a browserelor acceptate în prezent, consultați CanIUse.

Concluzie

Și asta este tot pentru un manifest de aplicație web simplă. Nu ar trebui să vă dureze deloc pentru a crea un manifest.json complet funcțional. Și doar cu câteva modificări suplimentare, aplicația dvs. web poate fi instalată la fel ca orice alte PWA.