Generator manifestu PWA

Generator manifestu PWA

Progressive Web App to strona, którą można zainstalować na telefonie lub komputerze. Serce instalacji to plik manifest.json. Generator manifestu PWA buduje go z formularza, dokłada fragment do sekcji <head> i od razu sprawdza 7 punktów, od których zależy, czy przeglądarka zaproponuje instalację.

Podłączenie

Pod manifestem narzędzie wypisuje gotowy kod do sekcji <head>. Dla danych przykładowych wygląda tak:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4f6df5">
<link rel="apple-touch-icon" href="/icons/icon-192.png">

Znacznik apple-touch-icon pojawia się tylko wtedy, gdy na liście jest ikona PNG z przeznaczeniem any. Generator wybiera tę, której szerokość jest najbliższa 180 px, bo iOS nie w każdej wersji korzysta z ikon z manifestu. Jeśli zapiszesz plik pod inną nazwą albo w podkatalogu, popraw adres w href.

Co jeszcze potrzebne?

• service worker (offline i cache),
• HTTPS (PWA wymaga bezpiecznego połączenia; do testów wystarczy localhost),
• pliki ikon pod ścieżkami z manifestu, w zadeklarowanych wymiarach,
• ikona maskable — system przycina ją do swojego kształtu,
• responsywny layout i szybkie ładowanie.

Jak działa generator manifestu PWA

Manifest aplikacji to zwykły plik JSON: jeden obiekt, w którym każda informacja ma własny klucz i wartość. Generator zamienia to, co wpiszesz w formularzu, na gotowy dokument z wcięciami — sam wstawia cudzysłowy, dwukropki i przecinki we właściwych miejscach i nie zostawia przecinka po ostatnim wpisie. Jeden nadmiarowy przecinek wystarczy, żeby przeglądarka odrzuciła cały plik i nie pokazała opcji instalacji.

Kolejność kluczy nie ma znaczenia, liczą się typy wartości: display przyjmuje jeden z ustalonych trybów, pole koloru wymaga zapisu szesnastkowego (#4f6df5 albo skrócone #fff), a icons to tablica obiektów, z których każdy opisuje jeden plik graficzny osobnymi polami — src, sizes, type i purpose.

Formularz pilnuje formatu, zanim powstanie wynik. Kod języka zapisujesz jak „pl” albo „pl-PL”, kategorii może być najwyżej 20, a ikon najwyżej 30. Błąd pojawia się przy konkretnym polu, a w liście ikon razem z numerem linii. Puste pola opisu, języka, kategorii i id są pomijane, pusta krótka nazwa przejmuje pełną nazwę, a puste start_url i scope dostają wartość „/”.

Gotowy manifest kopiujesz albo pobierasz przyciskiem jako plik manifest.json, wgrywasz na serwer i podłączasz fragmentem z sekcji wyżej. Przeglądarka pobiera manifest przy wejściu na stronę i na tej podstawie wie, jak nazwać skrót na pulpicie i którą ikonę wyświetlić.

Trzy przyciski typu aplikacji ustawiają jednym kliknięciem display i orientation: Aplikacja (standalone, portrait), Gra (fullscreen, landscape) i Minimalna (minimal-ui, any).

Kontrola wymagań instalacji

Pod wynikiem jest tabela 7 punktów opartych na kryteriach Chrome. Brak w punkcie wymaganym daje status „Brakuje wymagań instalacji”, brak w zalecanym — „Manifest poprawny, są zalecenia”, a komplet — „Manifest kompletny”.

Przykład: manifest dla kalkulatora walut krok po kroku

1. Nazwa pełna: w polu name wpisujesz Kalkulator walut. Ta wartość trafia na ekran instalacji i do listy aplikacji.
2. Nazwa skrócona: short_name to Kalkulator — 10 znaków, więc mieści się w zalecanych 12. Pojawi się pod ikoną na pulpicie.
3. Adresy: start_url ustawiasz na /, a scope również na /. Aplikacja obejmuje wtedy całą witrynę, a uruchomienie otwiera stronę główną.
4. Typ aplikacji: przycisk „Aplikacja” ustawia display = standalone, czyli okno bez paska adresu przeglądarki, i orientation = portrait.
5. Kolory: theme_color to #0b5fff i odpowiada za pasek systemowy, a background_color to #ffffff — tło widoczne, zanim strona się wczyta.
6. Ikony: dwie linie w polu icons, /icons/icon-192.png; 192x192 i /icons/icon-512.png; 512x512. Typ image/png generator odczyta z rozszerzenia, a przeznaczenie ustawi na any.
7. Opis, język i kategorie czyścisz. Manifest ma wtedy 9 kluczy najwyższego poziomu: name, short_name, start_url, scope, display, orientation, theme_color, background_color i icons.

Kontrola pokaże 6 z 7 punktów i status „Manifest poprawny, są zalecenia”, bo brakuje ikony maskable. Po dopisaniu trzeciej linii /icons/maskable-512.png; 512x512; image/png; maskable wynik zmieni się na 7 z 7. Jako apple-touch-icon trafi do fragmentu /icons/icon-192.png: różnica 192 − 180 = 12 px jest mniejsza niż 512 − 180 = 332 px, a ikona maskable nie jest brana pod uwagę.

Ściągawka: pola manifestu i dopuszczalne wartości

Jak korzystać z generatora — wskazówki

• Nazwa pełna i skrócona to dwie różne role. Pełna bywa przycinana w niektórych miejscach interfejsu, więc wersję skróconą potraktuj jako osobną decyzję, a nie kopię z obciętym końcem.
• Ikonie maskable daj osobny wpis i osobny plik z marginesem: ważna treść musi zmieścić się w środkowym kole o średnicy 80% szerokości. Zwykłe logo oznaczone jako maskable straci krawędzie.
• Adres startowy powinien leżeć w zakresie. Gdy jest poza nim, przeglądarka ignoruje wpisany scope i wyznacza zakres z adresu startowego. Przy aplikacji w podkatalogu ustaw oba pola na przykład na /app/.
• Po wdrożeniu sprawdź w Chrome kartę Application, sekcję Manifest.
• Przeglądarki trzymają manifest i ikony w pamięci podręcznej, więc stara wersja potrafi się utrzymywać jeszcze po podmianie pliku. Zmiany między wersjami najprościej porównać w narzędziu do porównywania różnic w kodzie.

Czego narzędzie nie zrobi

• Nie tworzy plików graficznych ani nie wgrywa ich na serwer. Generator wypisuje ścieżki do ikon, ale same obrazki musisz przygotować i opublikować samodzielnie, na przykład w generatorze faviconów.
• Service workera nie generuje — dostajesz manifest i fragment do sekcji head, a skrypt odpowiadający za tryb offline piszesz po swojej stronie.
• Różnic między systemami nie wyrówna: Android, iOS i przeglądarki desktopowe część pól ignorują.
• Kontrola patrzy wyłącznie na wpisy w manifeście. Narzędzie nie wie, czy plik pod adresem z pola src istnieje ani czy jego rzeczywisty rozmiar zgadza się z deklaracją.