W aplikacji Create React domyślnie jest dostępny plik manifestu aplikacji internetowej, który umożliwia każdemu zainstalowanie Twojej aplikacji React na swoim urządzeniu.
Aplikacja Create React (CRA) domyślnie zawiera plik manifestu aplikacji internetowej. Modyfikuję umożliwia zmianę sposobu wyświetlania zainstalowanej aplikacji 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=9&hl=pl)
Dlaczego to jest przydatne?
Pliki manifestu aplikacji internetowej umożliwiają zmianę sposobu jak aplikacja będzie wyglądać na komputerze lub urządzeniu mobilnym użytkownika. Przez zmianę właściwości w pliku JSON możesz zmienić w aplikacji, w tym:
- Nazwa
- Opis
- Ikona aplikacji
- Kolor motywu
Dokumentacja MDN obejmuje wszystkie właściwości, które można zmienić.
Modyfikowanie domyślnego pliku manifestu
W 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 zobaczyć
z domyślnymi informacjami o aplikacji. Plik HTML public/index.html
również
zawiera element <link>
, który umożliwia wczytanie pliku manifestu.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Oto przykład aplikacji utworzonej przy użyciu interfejsu CRA, która ma zmodyfikowany plik manifestu plik:
Aby sprawdzić w tym przykładzie, czy wszystkie właściwości działają prawidłowo:
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij
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 uważasz, że witryna nie musi być instalowana
na urządzeniu, usuń plik manifestu i element
<link>
z pliku HTML, wskazuje go. - Jeśli chcesz, aby użytkownicy instalowali aplikację na swoich urządzeniach, zmodyfikuj plik manifestu (lub utwórz go, jeśli nie używasz CRA) z żadnym w Twoich ulubionych usługach. Dokumentacja MDN zawiera opis wszystkich wymaganych i opcjonalnych atrybutów.