Plik manifestu aplikacji internetowej jest domyślnie dołączony do aplikacji Create React i umożliwia każdemu jej zainstalowanie na urządzeniu.
Tworzenie aplikacji React (CRA) domyślnie zawiera plik manifestu aplikacji internetowej. Zmodyfikowanie tego pliku pozwoli zmienić sposób wyświetlania aplikacji po zainstalowaniu na urządzeniu użytkownika.
Dlaczego to takie przydatne?
Pliki manifestu aplikacji internetowej umożliwiają zmianę wyglądu zainstalowanej aplikacji na komputerze lub urządzeniu mobilnym użytkownika. Modyfikując właściwości w pliku JSON, możesz zmodyfikować wiele szczegółów swojej aplikacji, w tym:
- Nazwa
- Opis
- Ikona aplikacji
- Kolor motywu
Dokumentacja MDN zawiera szczegółowe informacje o wszystkich właściwościach, które można zmienić.
Modyfikowanie domyślnego pliku manifestu
W interfejsie CRA domyślny plik manifestu /public/manifest.json jest dołączany automatycznie podczas tworzenia nowej aplikacji:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Dzięki temu każdy może zainstalować aplikację na swoim urządzeniu i wyświetlić domyślne informacje o niej. Plik HTML public/index.html zawiera też element <link> służący do wczytywania pliku manifestu.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Oto przykład aplikacji utworzonej w interfejsie CRA, która ma zmodyfikowany plik manifestu:
Aby sprawdzić, czy wszystkie usługi działają prawidłowo w tym przykładzie:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
. - Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Application (Aplikacja).
- W panelu Aplikacja kliknij kartę Plik manifestu.
Podsumowanie
- Jeśli Twoim zdaniem nie trzeba instalować witryny na urządzeniu, usuń z pliku HTML plik manifestu i element
<link>, który do niej kieruje. - Jeśli chcesz, aby użytkownicy zainstalowali aplikację na swoich urządzeniach, zmodyfikuj plik manifestu (lub utwórz go, jeśli nie korzystasz z komponentu CRA) z wybranymi właściwościami. Wszystkie wymagane i opcjonalne atrybuty znajdziesz w dokumentacji MDN.