Identyfikacja wizualna Strona WWW Sklepy Online Serwisy dedykowane Marketing Usługi dodatkowe

Strona Główna

Nasza Oferta

Nasze Prace

Poznaj Nas

Blog

Kontakt

5541

Czym jest Web App Manifest?

Czym jest Web App Manifest?

Jakiś czas temu pisaliśmy o Service Workerze, który jest jednym z 3 niezbędnych warunków do spełnienia, aby prawidłowo zainstalować PWA w naszej przeglądarce. Kolejnymi istotnymi elementami jest stworzenie pliku manifest.json (Web App Manifest), o którym opowiemy dziś szerzej oraz Offline-first, o którym chętnie napiszemy w kolejnym artykule z tego cyklu.

1. Czym jest Web App Manifest?

Jest to oparty na JavaScript Object Notation plik, który zapewnia programistom możliwość zebrania niezbędnych metadanych związanych z aplikacją internetową.

 

Plik manifest.json definiuje wszelkie istotne informacje o tej aplikacji, między takie jak: nazwa, linki do ikon oraz preferowany adres URL otwierany po uruchomieniu aplikacji w przeglądarce przez użytkownika oraz także kolor tła czy język użyty w manifest.json. Istotnym elementem manifestu jest także domyślna zadeklarowana orientacja aplikacji internetowej.

 

Korzystając z opisanych w tym artykule metadanych, deweloperzy zapewniają sobie możliwość tworzenia zadowalającego user experience, które jest porównywalne do tych, jakie oferuje natywna aplikacja.

 

Web App Manifest obsługiwany jest na świecie przez ponad 83% przeglądarek. Na samym początku plik manifestu wspierany był jedynie przez przeglądarki mobilne. Producent przeglądarki Chrome, jak to często bywa, szybko zareagował na potrzebę rynku, a tym samym rozwijającą się popularność manifestu, wprowadzają możliwość korzystania z niego przez przeglądarkę w wersji na PC. Popularność PWA sprawiła, że większość przeglądarek również dostosowała się do wsparcia manifestu, które cały czas jest rozwijane.

 

PRZYKŁAD PROSTEGO MANIFESTU

 

 

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

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.

 

2. Pozostałe elementy

“Start_url” to ciąg znaków reprezentujący adres strony zdefiniowanej przez dewelopera. Przykład: użytkownik klikA na ikonę PWAz menu urządzenia lub ekranu głównego, a w efekcie pojawia się strona, która jest powiązana z manifestem. Przeglądarka, jak i jej użytkownik mają możliwość zmiany lub zignorowania tej wartości tuż po zainstalowaniu aplikacji.

 

Mamy możliwość ingerencji w takie właściwości jak kolor PWA, a tym samym umożliwiono zdefiniowanie dwóch elementów:

  • „background_color” – ustala się dzięki niemu kolor tła przy “splash screenie” (tło, ikona i nazwa aplikacji), który uruchamia się przy uruchomieniu aplikacji na smartfonie.
  • “theme_color” – za pomocą tego elementu możemy spersonalizować kolor przewodni naszej aplikacji. Na naszym smartfonie będzie on obramowaniem karty naszej aplikacji w menadżerze zadań, zaś w wersji desktopowej wyświetla się jako tło paska tytułu. To w pliku HTML definiujemy, co stanowi kolor motywu.

 

Warto tutaj wspomnieć o tag metadanej o nazwie “theme-color”. Gdy do sekcji <head> naszej strony dodamy:

 

<meta name=”theme-color” content=”#b6adc6″>

zdefiniujemy kolor naszej strony zanim użytkownik zainstaluje aplikację na ekranie głównym swojego urządzenia. Przykładowo w przeglądarce mobilnej, pasek przeglądarki uzyska zdefiniowany wg powyższej instrukcji kolor.

 

  • „display” – za pomocą tego elementu definiujemy, w jakim trybie (z dostępnych czterechopcji) aplikacja będzie się wyświetlać.
    • -„fullscreen” – aplikacja na pełnym ekranie, bez jakichkolwiek dodatkowych elementów i paska powiadomień.
    • -„standalone” – śladem zwykłej aplikacji natywnej: pojawia się w aplikacji pasek powiadomień.
    • -„minimal-ui” – wyświetla podstawowe elementy przeglądarki, co ułatwia nawigację, jeśli nie zdefiniowaliśmy jej z poziomu aplikacji.
    • -„browser” – aplikacja wyświetli się tak, jak zwykła strona w przeglądarce.
  • “orientation” – przykładowo, jeśli aplikacją jest gra i chcielibyśmy, aby domyślnie wyświetlała się ona na ekranie w poziomie, to możemy zdefiniować to w tym miejscu. Elementowi pozycji należy 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 (w tytule, jego krótkiej wersji oraz opisie), zgodnie z formą zdefiniowaną przez IANA Language Subtag Registry. Nie dotyczy to języka użytego w aplikacji.
  • “dir” – jak powszechnie wiadomo, niektóre języki czytane są od prawej do lewej (“rtl”). Z tego też względu, stworzono element, w którym możemy to zdefiniować, a do wyboru mamy: “ltr”, czyli left-to-right, wspomniany wyżej right-to-left oraz “auto”.

3. Elementy i właściwości zdefiniowane dla marketów

Wspomniane wcześniej PWA można zamieszczać w marketach, podobnych Google Play, czy Apple AppStore. Jednym z nich jest Appscope. Tworząc manifest.json możemy zamieścić tam informacje, które przydadzą się do zamieszczenia aplikacji właśnie w takich “sklepach z Progressive Web App”. Oprócz wymienionego wcześniej tytułu czy opisu aplikacji, możemy także zdefiniować inne elementy, które pomogą nam zaprezentować PWA z jak najlepszej strony na rynku:

  • “screenshots” – to swego rodzaju tablica linków, w której zamieszczane są obrazy pozwalające zaprezentować możliwości oraz wygląd naszej aplikacji. Taki zabieg stosowany jest również np. w Google Play.
  • “categories” – Jest to wskazówka dla marketów, aby wiedziano, na jakiej liście aplikacji zamieścić nasze PWA. Nie ma z góry ustalonej listy kategorii, do której powinniśmy się dostosować, jednakże społeczność deweloperska przygotowała najczęściej wykorzystywane kategorie, aby uprościć nam zadanie: https://github.com/w3c/manifest/wiki/Categories

 

4. Jak poinformować przeglądarkę o manifest.json?

Przeglądarka, aby mogła odczytać manifest.json potrzebuje tagu HTML w sekcji “head” w dokumencie:

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

Czy manifest.json jest poprawny?

Ważnym elementem jest sprawdzenie, czy wszystkie elementy naszego manifestu zostały poprawnie zinterpretowane przez przeglądarkę. Najprostszym sposobem jest uruchomienie narzędzia developerskiego (skrót klawiszowy F12), a następnie wybranie zakładki “application”. Zazwyczaj automatycznie załaduje nam się w głównym polu zakładka “Manifest” (jeśli oczywiście przeglądarka go znalazła. :)).

5. Poniżej przedstawiamy przykład manifestu w formie, która jak stosowana najczęściej.

Mamy nadzieję, że Web App Manifest nie majuż przed Wami żadnych tajemnic – w ostatnim już z tego cyklu artykule postaramy się przybliżyć temat Off-line first.

{
  „lang”: „PL”,
  „dir”: „ltr”,
  „name”: „Super Platform 2020”,
  „description”: „Najlepsza gra platformowa w 2020 roku!”,
  „short_name”: „SuperPlatform20”,
  „icons”: [{
     „src”: „icon/dolny.webp”,
     „sizes”: „64×64”,
     „type”: „image/webp”
 },{
  „src”: „icon/dolny.png”,
  „sizes”: „64×64”
 },{
  „src”: „icon/hd_gora”,
  „sizes”: „128×128”
 }],
  „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”: „640×480”,
     „type”: „image/jpeg”
 },{
  „src”: „screenshots/w-grze-2x.jpg”,
  „sizes”: „1280×920”,
  „type”: „image/jpeg”
 }]
}

 

Mamy nadzieję, że Web App Manifest nie ma już przed Wami żadnych tajemnic – w ostatnim już z tego cyklu artykule postaramy się przybliżyć temat Off-line first.

5541

aplikacja

Offline First

pwa

Web App Manifest

Czytaj również

Cookies
Obsługujemy pliki cookies. Jeśli uważasz, że to jest ok, po prostu kliknij "Akceptuj wszystko". Możesz też wybrać, jakie chcesz ciasteczka, klikając "Ustawienia". Przeczytaj naszą politykę cookie
Ustawienia Zaakceptuj wszystko
Cookies
Wybierz, jakie pliki cookies chcesz zaakceptować. Twój wybór zostanie zachowany przez rok. Przeczytaj naszą politykę cookie
Zapisz Zaakceptuj wszystko