Web App Manifest

Z Wikipedii, wolnej encyklopedii
Przejdź do nawigacji Przejdź do wyszukiwania

Web App Manifest – oparty na JavaScript Object Notation plik manifestu, który zapewnia deweloperom scentralizowane miejsce do umieszczenia metadanych związanych z aplikacją internetową.

Plik jest niezbędnym narzędziem umożliwiającym instalację PWA oraz definiuje wszelkie istotne informacje o tej aplikacji, takie jak: nazwa, linki do ikon oraz preferowany adres URL otwierany po uruchomieniu aplikacji w przeglądarce przez użytkownika. Manifest istotny jest również do zadeklarowania domyślnej orientacji aplikacji internetowej oraz umożliwia ustawienia trybu wyświetlania aplikacji (przykładowo w trybie pełnoekranowym). Istnienie manifestu oraz powiązanie go z aplikacją internetową, jest jednym z trzech istotnych wymagań, aby przeglądarka zezwoliła na jej instalację.

Korzystając z powyższych metadanych, programiści zapewniają sobie możliwość do tworzenia dobrego wrażenia na użytkownikach, które są porównywalne do tych, jakie oferuje natywna aplikacja.

Element obsługiwany jest na świecie przez ponad 83% przeglądarek. Początkowo Web App Manifest wspierany był przez przeglądarki mobilne. Koncern Google bardzo szybko zareagował na rozwijającą się popularność manifestu, wprowadzają możliwość korzystania z niego przez przeglądarkę Chrome w wersji desktopowej. Popularność PWA sprawiła, że większość przeglądarek, także postawiło na rozwój wsparcia manifestu.

Przykład prostego Manifestu[edytuj | edytuj kod]

{
  "name": "Aplikacja charytatywna",
  "description": "Ta aplikacja pomaga w przekazywaniu datków na szczytne cele.",
  "icons": [{
    "src": "images/icon.png",
    "sizes": "192x192"
  }]
}

Przedstawiony powyżej manifest zawiera wszystkie najistotniejsze informacje o naszej aplikacji internetowej:

  • nazwa aplikacji - przedstawiamy ją w dwóch wariantach: “name” oraz “short_name”. Najlepszym pomysłem jest umieszczenie obu konfiguracji, ponieważ (w zależności od ilości miejsca) jest ona różnie wyświetlana. Przykładowo krótsza nazwa najczęściej wyświetlana jest na ekranie głównym pod ikoną. Jeśli nie zdefiniujemy nazwy, przeglądarka ustali ją samodzielnie np. na podstawie innego elementu z pliku manifestu lub wygeneruje domyślny tekst.
  • opis aplikacji - to tutaj możemy w skrócie opisać naszą aplikację. Chociaż standardowo opis nie jest widoczny w żadnym miejscu dla jego użytkonika, to coraz częściej ta sekcja jest wykorzystywana do wyświetlania opisów na podstronach aplikacji (przykładowo z tego rozwiązania korzystają markety z PWA).
  • dostosowanie ikony - to tutaj jest definiowana tablica obiektów, w której definiujemy ikonę odpowiedniego rozmiaru lub formatu. Zadaniem przeglądarki jest wybór takiej ikony, która najlepiej dopasuję się do danego urządzenia/systemu. Jeśli zaproponowaliśmy kilka pasujących ikon, użyta zostanie ostatnia ikona zaprezentowana na liście.

Poniżej przykład manifestu w formie, która jak stosowana najczęściej:[edytuj | edytuj kod]

{
  "lang": "PL",
  "dir": "ltr",
  "name": "Super Platform 2020",
  "description": "Najlepsza gra platformowa w 2020 roku!",
  "short_name": "SuperPlatform20",
  "icons": [{
    "src": "icon/dolny.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/dolny.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_gora",
    "sizes": "128x128"
  }],
  "scope": "/platform/",
  "start_url": "/platform/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red",
  "screenshots": [{
    "src": "screenshots/w-grze-1x.jpg",
    "sizes": "640x480",
    "type": "image/jpeg"
  },{
    "src": "screenshots/w-grze-2x.jpg",
    "sizes": "1280x920",
    "type": "image/jpeg"
  }]
}

Pozostałe elementy[edytuj | edytuj kod]

Element “start_url” jest ciągiem znaków reprezentującym adres internetowy strony, który zdefiniowany jest przez programistę. Przykładowo, gdy użytkownik kliknie na ikonę aplikacji internetowej z menu aplikacji urządzenia lub ekranu głównego, pojawi się strona, która jest ściśle powiązana z plikiem manifestu. Zarówno przeglądarka, jak i korzystający z niej użytkownik mogą zmienić lub zignorować tę wartość tuż po zainstalowaniu aplikacji.

Możemy także ingerować w takie właściwości jak kolor, tym samym udostępniono

dostęp do dwóch elementów:

  • "background_color" - jak nazwa wskazuje, definiuje się przy jego pomocy kolor tła przy “splash screenie”. Wyświetla się on przy uruchomieniu aplikacji na smartfonie (na wspomniany powyżej “splash screen” składa się tło oraz ikona i nazwa aplikacji).
  • theme_color” - ten element pomoże nam spersonalizować kolor przewodni naszej aplikacji. Na telefonie będzie on otaczał całą kartę naszej aplikacji w menadżerze zadań, a w wersji desktopowej będzie się wyświetlać jako tło paska tytułu. To, co stanowi kolor motywu, jest zdefiniowane w pliku HTML.

Istotnym dodatkiem, o którym warto wspomnieć jest także tag meta o nazwie “theme-color”. W tagu <head> naszej strony należy dodać:

<meta name="theme-color" content="#b6adc6">

Za jego pomocą zdefiniujemy kolor naszej strony zanim użytkownik zainstaluje aplikację na ekranie głównym swojego urządzenia. W przeglądarce mobilnej, pasek przeglądarki uzyska nadany, wg powyższej instrukcji kolor.

  • "display" - pozwala nam zdefiniować, w jakim trybie (z dostępnych czterech wartości) aplikacja będzie się wyświetlać
    • "fullscreen" - aplikacja pojawi się na pełnym ekranie, bez jakichkolwiek dodatkowych elementów. Nie pojawi się też pasek powiadomień.
    • "standalone" - tak jak w zwykłej aplikacji natywnej, pojawi się w aplikacji pasek.
    • "minimal-ui" - otrzymamy podstawowe elementy przeglądarki, co ułatwi nawigację, jeśli nie została ona zdefiniowana z poziomu aplikacji.  
    • "browser" - w tym trybie aplikacja wyświetli się nam tak, jak zwyczajna strona w przeglądarce, więc to tak, jakbyśmy zapisali skrót do strony internetowej.
  • orientation" - często, np. gdy aplikacją jest gra, programista chciałby, aby domyślnie wyświetlała się ona na ekranie w poziomie. Należy zatem w elementowi pozycji nadać wartość “landscape”. Widok pionowy powinien być zdefiniowany automatycznie, jeśli jednak chcemy go zablokować w tej wersji, należy “orientation” nadać wartość “portrait”.
  • lang” - ustala język użyty w manifeście.
  • dir” - ustala, czy język czytany jest od lewej do prawej (“ltr”), prawej do lewej (“rtl”) czy ustawiany jest automatycznie (“auto”).
  • screenshots” - tablica linków, w której zamieszczane są obrazy pozwalające zaprezentować możliwości oraz wygląd naszej aplikacji w markecie z aplikacjami.
  • categories” - definiujemy w jakiej kategorii aplikacja powinna być umieszczona w markecie.

Bibliografia[edytuj | edytuj kod]