Web App Manifest

manifest.json

W tym wpisie przedstawię w jaki sposób stworzyć plik manifest.json (czasem używa się także wersji manifest.webmanifest) który jest niezbędny przy tworzeniu aplikacji PWA. Co to jest aplikacja PWA (aplikacja progresywna)?
Progressive Web App to aplikacja internetowa wdrożona na serwerach, dostępna za pośrednictwem adresów URL i indeksowana przez wyszukiwarki ale zapewniając przy tym wrażenia podobne do dedykowanej aplikacji mobilnej.

Manifest aplikacji internetowej to plik JSON, który informuje przeglądarkę o Twojej progresywnej aplikacji internetowej oraz o tym, jak powinna się zachowywać po zainstalowaniu na komputerze stacjonarnym lub urządzeniu mobilnym. Typowy plik manifestu zawiera nazwę aplikacji, ikony, których ma używać aplikacja, oraz adres URL, który powinien zostać otwarty po uruchomieniu aplikacji.

Stworzenie takiego pliku jest bardzo proste, można to zrobić samodzielnie lub skorzystać z gotowych narzędzi. Najpierw zobaczmy jak go stworzyć samodzielnie.

Tworzenie pliku manifest.json

Plik manifest.json musi być dostępny w głównym katalogu naszej witryny. Można go edytować w dowolnym edytorze tekstu. Przykładowy plik:

{
  "name": "Moja aplikacja",
  "start_url": "/",
  "description": "Opis mojej aplikacji",
  "icons": [
    {
      "src": "images/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Parametr „name” to nazwa naszej aplikacji. Można też dać krótszą wersję nazwy a parametrze „short_name”.
description” to krótki opis naszej aplikacji. Z reguły nigdzie nie wykorzystywany obecnie, ale wkrótce może się to zmienić, np sklepy z aplikacjami PWA mogą go wyświetlać.
start_url” to adres URL który powinien zostać otwarty przy uruchomieniu aplikacji
W „icons” możemy dać tablicę z ikonkami aplikacji – powinniśmy dać je w kilku rozmiarach, dzięki czemu dane urządzenie będzie mogło wybrać taką która najlepiej będzie w nim pasowała. Pliki graficzne muszą istnieć na naszym serwerze. Najlepiej żeby były w rozmiarach (w px): 72×72, 96×96, 128×128, 144×144, 152×152, 192×192, 384×384 oraz 512×512. Dla Chrome wymagane wymiary to 192×192 i 512×512.

Pozostałe parametry

W pliku manifest.json możemy umieścić więcej parametrów, np:

  • background_color – kolor tła przy uruchamianiu aplikacji (splash screen).
  • theme_color – kolor główny naszej aplikacji. Wyświetla się jako tło paska adresu oraz w przypadku urządzeń mobilnych otacza kartę aplikacji w menedżerze aplikacji.
  • display – ta właściwość pozwala zdecydować w jakim trybie uruchomi się aplikacja na urządzeniu użytkownika. Mamy to wyboru cztery wartości: „fullscreen” (pełny ekrany), „standalone” (jak standardowa aplikacja mobilna bez paska adresu), „minimal-ui” (jak standalone ale z mniejszą ilością przycisków, np bez przycisku Wstecz) oraz „browser” (jak w standardowej przeglądarce).
  • orientation wskazuje w jakiej pozycji chcemy uruchomić aplikacje. Dostępne wartości to landscape, portrait oraz any.
  • scope – zakres aplikacji, adres spoza zakresu będzie otwarty w nowym oknie przeglądarki, domyślnie jest „/”.
  • lang – pole do określenia języka nazwy i opisu aplikacji.
  • dir – kierunek tekstu dla nazwy i opisu aplikacji. Dostępne wartości to ltr, rtl oraz auto.

Przykładowy plik manifestu z większa ilością parametrów:

{
  "lang": "pl-PL",
  "name": "Blog Kamil Wyremski",
  "short_name": "blog.wyremski.pl",
  "scope": "/",
  "display": "fullscreen",
  "start_url": "https://blog.wyremski.pl/",
  "background_color": "transparent",
  "theme_color": "transparent",
  "description": "Full Stack Web Developer - projektant stron internetowych",
  "orientation": "any",
  "icons": [
    {
      "src": "images/favicon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/favicon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/favicon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/favicon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/favicon-152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/favicon-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "url": "https://blog.wyremski.pl/"
}

Dodanie odnośnika do manifestu

Po stworzeniu pliku manifest.json musimy na naszej stronie dodać do niego odnośnik w HEAD naszej witryny:

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

Sprawdzenie poprawności manifestu

Poprawność pliku manifest.json możemy łatwo sprawdzić w przeglądarce Google Chrome. W tym celu uruchamiamy narzędzia developerskie (F12) i przechodzimy do zakładki „Application”. Po wybraniu z lewej strony na liście „Manifest” zobaczymy w głównym panelu informacje, które przeglądarka znalazła w naszym manifest.json. W ten sposób możemy sprawdzić czy przeglądarka znalazła nasz plik manifestu i go poprawnie zinterpretowała.

Generatory pliku manifest

W sieci dostęne są generatory pliku manifest dzięki którym nie musimy ich tworzyć samodzielnie.
Przykładowe linki:

https://app-manifest.firebaseapp.com/ – ten generator potrafi także wygenerować automatycznie ikonki w odpowiednich rozmiarach.

https://www.pwabuilder.com/ – ten generator potrafi także wygenerować naszą aplikację PWA którą można następnie wrzucić do Google Play.

Podsumowanie

Mam nadzieję, że ten wpis przybliżył Wam temat aplikacji PWA i co jest niezbędne dla nich: stworzenie pliku manifest.json
Od teraz na stronie będzie się pokazywać przycisk „Dodaj do ekranu głównego” umożliwiający użytkownikom umieszczenie skrótu do strony który będzie się zachowywał podobnie do natywnej aplikacji.

Jeśli widzisz jakiś błąd we wpisie lub uważasz, że powinienem uzupełnić jakąś informację, daj proszę znać w komentarzach!

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close