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.
![Ikona progresywnej aplikacji internetowej na ekranie głównym telefonu komórkowego](https://web.dev/static/articles/add-manifest-react/image/a-progressive-web-app-ico-1aeca055d20a7.png?authuser=5&hl=pl)
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.