Web App Manifest: Az Ön útmutatója a Progresszív Webalkalmazás Konfigurálásához

A Web App Manifest egy JSON fájl, amely információt nyújt a webalkalmazásáról a böngészők és operációs rendszerek számára. Ezeket az információkat használják fel, amikor az alkalmazás telepítésre kerül a felhasználó eszközére, meghatározva, hogyan jelenik meg és viselkedik Progresszív Webalkalmazásként (PWA). Gondoljon rá úgy, mint egy tervrajzra, amely webhelyét telepíthetővé, alkalmazásszerűvé alakítja. A jól konfigurált manifest kulcsfontosságú a felhasználói elköteleződés és a felfedezhetőség szempontjából.

Mi az a Progresszív Webalkalmazás (PWA)?

Mielőtt belemerülnénk a Web App Manifest-be, elevenítsük fel, mi is az a PWA. A PWA-k olyan webalkalmazások, amelyek alkalmazásszerű élményt nyújtanak a felhasználóknak. Ezek:

• Megbízhatóak: Azonnal betöltődnek, és offline vagy alacsony minőségű hálózatokon is működnek a service worker-eknek köszönhetően.
• Gyorsak: Gyorsan reagálnak a felhasználói interakciókra, sima animációkkal és akadozásmentes görgetéssel.
• Lekötőek: Magával ragadó felhasználói élményt nyújtanak olyan funkciókkal, mint a push értesítések és az otthoni képernyőre történő telepítés lehetősége.

A Web App Manifest szerepe

A Web App Manifest a PWA sarokköve. Ez biztosítja a böngészők számára szükséges információkat a következőkhöz:

• A PWA telepítése: Lehetővé teszi a felhasználók számára, hogy telepítsék a webalkalmazást az eszközeikre, hozzáadva azt otthoni képernyőjükhöz vagy az alkalmazásindítóhoz.
• A PWA helyes megjelenítése: Meghatározza az alkalmazás nevét, ikonjait, témaszínét és egyéb vizuális elemeit.
• A PWA viselkedésének vezérlése: Meghatározza, hogyan kell elindulnia az alkalmazásnak (pl. teljes képernyős módban vagy különálló ablakban), és hogyan kell integrálódnia az operációs rendszerrel.

A `manifest.json` fájl létrehozása

A Web App Manifest egy JSON fájl, amelyet általában `manifest.json` néven ismernek. A webalkalmazás gyökérkönyvtárában kell elhelyezni. Íme egy alap példa:

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome 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
              
            
          

Vizsgáljuk meg ezeket a tulajdonságokat:

`name`

A webalkalmazás teljes neve. Ez a név jelenik meg a felhasználóknak, amikor felkérik őket az alkalmazás telepítésére, valamint az alkalmazásindítóban.

Példa:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

Az alkalmazás nevének rövidebb változata, amelyet akkor használnak, ha kevés a hely, például az otthoni képernyőn vagy az alkalmazásindítóban. Legyen tömör.

Példa:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

Az az URL, amelyet az alkalmazásnak el kell töltenie, amikor elindul. Általában ez a webalkalmazás kezdőlapja, de lehet egy speciális céloldal is.

Példa:

            "start_url": "/"
            

              
                Copy
              
            
          

A lekérdezési paraméterekkel rendelkező URL-eket is használhatja a PWA elindításának nyomon követésére:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Meghatározza, hogyan kell az alkalmazást megjeleníteni indításkor. Több lehetőség is van:

• `standalone`: Az alkalmazás a saját, felső szintű ablakában nyílik meg, böngésző UI elemek, mint például a címsor nélkül.
• `fullscreen`: Az alkalmazás kitölti a teljes képernyőt, még az állapotsort is elrejtve.
• `minimal-ui`: Hasonló a `standalone`-hoz, de minimális böngésző UI-t biztosít, mint például egy visszagomb és egy frissítő gomb.
• `browser`: Az alkalmazás egy normál böngésző lapon vagy ablakban nyílik meg.

Ajánlás: A `standalone` általában a PWA-k preferált opciója.

Példa:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Az alkalmazás indításakor megjelenő kezdőképernyő háttérszíne. Ez fontos a zökkenőmentes átmenet biztosításához az alkalmazás ikonja és az alkalmazás tartalma között.

Példa:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

A témaszín, amelyet az alkalmazás UI-jának stílusozásához használnak, például az Androidon lévő állapotsorhoz. Ennek a színnek meg kell felelnie az alkalmazás márkajelzésének.

Példa:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

Objektumok tömbje, amelyek mindegyike egy ikonnak felel meg az alkalmazáshoz. Több, különböző méretű ikont kell biztosítani, hogy az alkalmazás jól nézzen ki különböző eszközökön és felbontásokon.

Minden ikon tulajdonságai:

• `src`: Az ikon képének URL-je.
• `sizes`: Az ikon méretei pixelekben (pl. "192x192").
• `type`: Az ikon képének MIME típusa (pl. "image/png").

Ajánlott ikon méretek:

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

Példa:

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

              
                Copy
              
            
          

További Manifest tulajdonságok

Bár a fenti tulajdonságok a leggyakoribbak, a Web App Manifest számos más opciót támogat a PWA konfigurálásához:

`id`

Az Ön PWA-jának egyedi azonosítója. Ez fontos a konfliktusok elkerüléséhez, ha több azonos nevű PWA-ja van.

Példa:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Meghatározza az alkalmazás navigációs hatókörét. Ez határozza meg, hogy mely URL-ek a webhelyén belül minősülnek a PWA részének. Ha a felhasználó kilép a hatókörből, az alkalmazás egy normál böngésző lapon nyílik meg.

Példa:

            "scope": "/app/"
            

              
                Copy
              
            
          

Ebben a példában csak azok az URL-ek minősülnek a PWA részének, amelyek `/app/`-val kezdődnek.

`orientation`

Meghatározza az alkalmazás preferált képernyőtájolását. Az opciók közé tartozik a `portrait`, `landscape`, `any` és még sok más.

Példa:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

Objektumok tömbje, amelyek kapcsolódó natív alkalmazásokat határoznak meg. Ez lehetővé teszi a natív alkalmazások népszerűsítését azoknak a felhasználóknak, akik már telepítették a PWA-t.

Példa:

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

              
                Copy
              
            
          

Ez a példa azt jelzi, hogy létezik egy kapcsolódó natív alkalmazás a Google Play Áruházban a `com.example.myapp` azonosítóval.

`prefer_related_applications`

Egy logikai érték, amely jelzi, hogy a felhasználót fel kell-e szólítani a kapcsolódó natív alkalmazás telepítésére a PWA helyett.

Példa:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

Karakterláncok tömbje, amelyek az alkalmazás kategóriáit jelölik. Ez segíthet a felhasználóknak megtalálni az alkalmazást az alkalmazásboltokban vagy a keresési eredményekben.

Példa:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

Parancsikonok listáját határozza meg, amelyekhez a felhasználók az otthoni képernyőn lévő alkalmazás ikonjáról férhetnek hozzá. Ez lehetővé teszi a felhasználók számára, hogy gyorsan elvégezzenek gyakori feladatokat az alkalmazáson belül.

Példa:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

A Manifest és a Webalkalmazás összekapcsolása

Miután létrehozta a `manifest.json` fájlt, össze kell kapcsolnia a webalkalmazásával azáltal, hogy hozzáad egy `` tagot az HTML `` szakaszához:

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

              
                Copy
              
            
          

A Manifest érvényesítése

Fontos érvényesíteni a `manifest.json` fájlt annak biztosítására, hogy megfelelően legyen formázva és tartalmazza az összes szükséges tulajdonságot. Online eszközöket, például a JSONLint-et vagy a Chrome DevTools-t használhatja a manifest érvényesítésére.

A PWA tesztelése

A manifest létrehozása és összekapcsolása után tesztelje a PWA-t különböző böngészőkben és eszközökön, hogy megbizonyosodjon arról, hogy a vártnak megfelelően működik. Használja a Chrome DevTools-t (Application -> Manifest) a manifest ellenőrzéséhez és a problémák diagnosztizálásához.

Web App Manifest Konfigurációs legjobb gyakorlatok

Íme néhány legjobb gyakorlat, amelyet érdemes szem előtt tartani a Web App Manifest konfigurálásakor:

• Adjon meg minden szükséges tulajdonságot: Győződjön meg arról, hogy minden lényeges tulajdonságot tartalmaz, mint például a `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` és `icons`.
• Használjon megfelelő ikonméreteket: Biztosítson több, különböző méretű ikont a különböző eszközök és felbontások támogatásához.
• Válassza ki a megfelelő kijelzési módot: Válassza ki azt a `display` módot, amely a legjobban illeszkedik az alkalmazás felhasználói élményéhez. A `standalone` általában a preferált opció.
• Érvényesítse a manifest-et: Mindig érvényesítse a `manifest.json` fájlt annak biztosítására, hogy helyesen legyen formázva.
• Tesztelje a PWA-t: Tesztelje a PWA-t különböző böngészőkben és eszközökön, hogy megbizonyosodjon arról, hogy a vártnak megfelelően működik.
• Optimalizálás SEO-ra: Használjon releváns kulcsszavakat a `name`, `short_name` és `description` mezőkben az alkalmazás felfedezhetőségének javítása érdekében.
• Fontolja meg a lokalizációt: Ha az alkalmazás globális közönséget céloz meg, fontolja meg a manifest lokalizált változatait, különböző nevekkel, leírásokkal és ikonokkal a különböző nyelvekhez.

Példák jól konfigurált Web App Manifest-ekre

Íme néhány példa jól konfigurált Web App Manifest-re népszerű PWA-kból:

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": "A Twitter Lite egy gyorsabb, adatbarát módja annak, hogy lássa, mi történik a világban.",
  "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": "Rendelje kedvenc Starbucks italait és ételeit az alkalmazással.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

A Web App Manifest jövője

A Web App Manifest egy fejlődő szabvány, amely idővel új funkciókkal és képességekkel bővül. Figyelje a W3C legfrissebb frissítéseit és ajánlásait, hogy biztosítsa PWA-i kihasználják a legújabb technológiákat.

Következtetés

A Web App Manifest minden PWA elengedhetetlen alkotóeleme. A manifest megfelelő konfigurálásával zökkenőmentes és vonzó felhasználói élményt nyújthat, így webalkalmazása natív alkalmazásnak tűnhet. Ez az útmutató átfogó áttekintést nyújtott a Web App Manifest-ről, beleértve annak tulajdonságait, legjobb gyakorlatait és példákat. Ezen irányelvek követésével maximalizálhatja PWA-i potenciálját, és kiváló felhasználói élményt nyújthat a felhasználóknak világszerte.

Használja ki a Web App Manifest erejét, és alakítsa webhelyeit telepíthető, alkalmazásszerű élményekké, amelyek örömet szereznek a felhasználóknak és növelik az elköteleződést.