Veebirakenduse manifest: teie juhend progressiivse veebirakenduse konfigureerimiseks

Veebirakenduse manifest on JSON-fail, mis pakub teavet teie veebirakenduse kohta brauseritele ja operatsioonisüsteemidele. Seda teavet kasutatakse siis, kui rakendus on installitud kasutaja seadmesse, määrates, kuidas see progressiivse veebirakendusena (PWA) välja näeb ja käitub. Mõelge sellele kui plaanile, mis muudab teie veebisaidi installitavaks, rakendusesarnaseks kogemuseks. Hästi konfigureeritud manifest on kasutaja kaasamise ja leitavuse jaoks ülioluline.

Mis on progressiivne veebirakendus (PWA)?

Enne veebirakenduse manifesti sukeldumist kordame, mis on PWA. PWA-d on veebirakendused, mis pakuvad kasutajatele rakendusesarnast kogemust. Need on:

• Usaldusväärne: Laadige koheselt ja töötage võrguühenduseta või madala kvaliteediga võrkudes tänu teenindustöötajatele.
• Kiire: Reageerige kiiresti kasutaja interaktsioonidele sujuvate animatsioonidega ja ilma tõmbleva kerimiseta.
• Kaasav: Pakkuge kaasahaaravat kasutajakogemust selliste funktsioonidega nagu tõukemärguanded ja võimalus installida avaekraanile.

Veebirakenduse manifesti roll

Veebirakenduse manifest on PWA nurgakivi. See pakub brauseritele vajalikku teavet, et:

• Installida PWA: See võimaldab kasutajatel installida veebirakenduse oma seadmetesse, lisades selle oma avaekraanile või rakenduste käivitajale.
• Kuvada PWA õigesti: See määrab rakenduse nime, ikoonid, teema värvi ja muud visuaalsed aspektid.
• Kontrollida PWA käitumist: See määrab, kuidas rakendus peaks käivituma (nt täisekraanrežiimis või eraldiseisva aknana) ja kuidas seda tuleks integreerida operatsioonisüsteemiga.

Oma `manifest.json` faili loomine

Veebirakenduse manifest on JSON-fail, mille nimi on tavaliselt `manifest.json`. See tuleks paigutada teie veebirakenduse juurkataloogi. Siin on põhiline näide:

            {
  "name": "Minu vinge PWA",
  "short_name": "Vinge PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Vaatame igaüks neist atribuutidest lähemalt:

`name`

Teie veebirakenduse täielik nimi. Seda nime kuvatakse kasutajatele, kui neil palutakse rakendus installida, ja rakenduste käivitajas.

Näide:

            "name": "Globaalse uudiste rakendus"
            

              
                Copy
              
            
          

`short_name`

Teie rakenduse nime lühem versioon, mida kasutatakse siis, kui ruumi on piiratud, näiteks avaekraanil või rakenduste käivitajas. Hoidke see lühike.

Näide:

            "short_name": "Globaalsed uudised"
            

              
                Copy
              
            
          

`start_url`

URL, mille rakendus peaks käivitamisel laadima. Tavaliselt on see teie veebirakenduse avaleht, kuid see võib olla ka konkreetne sihtleht.

Näide:

            "start_url": "/"
            

              
                Copy
              
            
          

Saate kasutada ka URL-i koos päringuparameetritega, et jälgida, kuidas kasutajad teie PWA-d käivitavad:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Määrab, kuidas rakendust käivitamisel kuvada. On mitu võimalust:

• `standalone`: Rakendus avaneb oma kõrgeima taseme aknas, ilma brauseri kasutajaliidese elementideta, nagu aadressiriba.
• `fullscreen`: Rakendus võtab enda alla kogu ekraani, peites isegi olekuriba.
• `minimal-ui`: Sarnane `standalone`-ga, kuid pakub minimaalset brauseri kasutajaliidest, näiteks tagasinuppu ja värskendusnuppu.
• `browser`: Rakendus avaneb tavalises brauseri vahekaardis või aknas.

Soovitus: `standalone` on PWA-de jaoks üldiselt eelistatud valik.

Näide:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Rakenduse käivitamisel rakenduse avakuva taustavärv. See on oluline sujuva ülemineku tagamiseks rakenduse ikooni ja rakenduse sisu vahel.

Näide:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Teema värv, mida kasutatakse rakenduse kasutajaliidese kujundamiseks, näiteks Androidi olekuriba. See värv peaks vastama teie rakenduse brändingule.

Näide:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

Objektide massiiv, millest igaüks esindab rakenduse ikooni. Peaksite esitama mitu erineva suurusega ikooni, et rakendus näeks erinevates seadmetes ja eraldusvõimetes hea välja.

Iga ikooni atribuudid:

• `src`: Ikoonipildi URL.
• `sizes`: Ikooni mõõtmed pikslites (nt "192x192").
• `type`: Ikoonipildi MIME-tüüp (nt "image/png").

Soovitatavad ikoonide suurused:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Näide:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Täiendavad manifesti atribuudid

Kuigi ülaltoodud atribuudid on kõige levinumad, toetab veebirakenduse manifest palju muid võimalusi oma PWA konfigureerimiseks:

`id`

Teie PWA kordumatu identifikaator. See on oluline konfliktide vältimiseks, kui teil on mitu sama nimega PWA-d.

Näide:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Määrab rakenduse navigeerimisulatuse. See määrab, milliseid URL-e teie veebisaidil peetakse PWA osaks. Kui kasutaja navigeerib väljaspool ulatust, avaneb rakendus tavalises brauseri vahekaardis.

Näide:

            "scope": "/app/"
            

              
                Copy
              
            
          

Selles näites loetakse PWA osaks ainult URL-e, mis algavad tähega `/app/`.

`orientation`

Määrab rakenduse eelistatud ekraani orientatsiooni. Valikute hulka kuuluvad `portrait`, `landscape`, `any` ja palju muud.

Näide:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

Objektide massiiv, mis määratlevad seotud omarakendused. See võimaldab teil reklaamida oma omarakendusi kasutajatele, kes on teie PWA juba installinud.

Näide:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

See näide näitab, et Google Play poes on seotud omarakendus ID-ga `com.example.myapp`.

`prefer_related_applications`

Boolean-väärtus, mis näitab, kas kasutajalt tuleks küsida seotud omarakenduse installimist PWA asemel.

Näide:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

Stringide massiiv, mis esindavad rakenduse kategooriaid. See võib aidata kasutajatel teie rakendust rakenduste poodides või otsingutulemustes leida.

Näide:

            "categories": ["uudised", "teave"]
            

              
                Copy
              
            
          

`shortcuts`

Määratleb otseteede loendi, millele kasutajad pääsevad juurde rakenduse ikoonilt oma avaekraanil. See võimaldab kasutajatel kiiresti rakenduses tavalisi toiminguid teha.

Näide:

            "shortcuts": [
  {
    "name": "Viimased uudised",
    "short_name": "Uudised",
    "description": "Lugege viimaseid uudisteartikleid",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Manifesti linkimine oma veebirakendusega

Kui olete oma faili `manifest.json` loonud, peate selle oma veebirakendusega linkima, lisades HTML-i `` sektsiooni sildi ``:

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

              
                Copy
              
            
          

Manifesti valideerimine

Oluline on oma faili `manifest.json` valideerida, et tagada selle õige vormindamine ja kõigi vajalike atribuutide olemasolu. Manifesti valideerimiseks saate kasutada veebitööriistu, nagu JSONLint või Chrome DevTools.

Oma PWA testimine

Pärast manifesti loomist ja linkimist peaksite oma PWA-d erinevates brauserites ja seadmetes testima, et tagada selle ootuspärane toimimine. Kasutage Chrome DevTools (Application -> Manifest), et oma manifesti kontrollida ja võimalikke probleeme diagnoosida.

Veebirakenduse manifesti konfigureerimise parimad tavad

Siin on mõned parimad tavad, mida veebirakenduse manifesti konfigureerimisel silmas pidada:

• Esitage kõik nõutavad atribuudid: Veenduge, et olete lisanud kõik olulised atribuudid, nagu `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` ja `icons`.
• Kasutage sobivaid ikoonide suurusi: Esitage mitu erineva suurusega ikooni, et toetada erinevaid seadmeid ja eraldusvõimeid.
• Valige õige kuvarežiim: Valige `display` režiim, mis sobib kõige paremini teie rakenduse kasutajakogemusega. `standalone` on üldiselt eelistatud valik.
• Valideerige oma manifest: Valideerige alati oma fail `manifest.json`, et tagada selle õige vormindamine.
• Testige oma PWA-d: Testige oma PWA-d erinevates brauserites ja seadmetes, et tagada selle ootuspärane toimimine.
• Optimeerige SEO jaoks: Kasutage oma `name`, `short_name` ja `description` jaoks asjakohaseid märksõnu, et parandada oma rakenduse leitavust.
• Kaaluge lokaliseerimist: Kui teie rakendus on suunatud ülemaailmsele vaatajaskonnale, kaaluge oma manifesti lokaliseeritud versioonide pakkumist erinevate nimede, kirjelduste ja ikoonidega erinevate keelte jaoks.

Näited hästi konfigureeritud veebirakenduse manifestidest

Siin on mõned näited populaarsete PWA-de hästi konfigureeritud veebirakenduse manifestidest:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite on kiirem ja andmesõbralikum viis näha, mis maailmas toimub.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Tellige rakendusega oma lemmik Starbucks'i jooke ja toitu.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Telli kohe",
      "short_name": "Telli",
      "description": "Alustage uut tellimust",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Veebirakenduse manifesti tulevik

Veebirakenduse manifest on arenev standard, millele lisatakse aja jooksul uusi funktsioone ja võimalusi. Hoidke silm peal W3C uusimatel värskendustel ja soovitustel, et tagada oma PWA-de täielik kasu uusimatest tehnoloogiatest.

Järeldus

Veebirakenduse manifest on iga PWA oluline komponent. Oma manifesti õigesti konfigureerides saate pakkuda sujuvat ja kaasahaaravat kasutajakogemust, muutes oma veebirakenduse omarakenduse sarnaseks. See juhend on andnud põhjaliku ülevaate veebirakenduse manifestist, sealhulgas selle atribuutidest, parimatest tavadest ja näidetest. Neid juhiseid järgides saate avada oma PWA-de kogu potentsiaali ja pakkuda oma kasutajatele kogu maailmas suurepärase kasutajakogemuse.

Kasutage veebirakenduse manifesti jõudu ja muutke oma veebisaidid installitavateks, rakendusesarnasteks kogemusteks, mis rõõmustavad kasutajaid ja suurendavad kaasamist.