Manifest aplikacji internetowej jest domyślnie dostępny w aplikacji Create React i umożliwia każdemu zainstalowanie Twojej aplikacji React na swoim urządzeniu.
Create React App (CRA) zawiera domyślnie plik manifestu aplikacji internetowej. Zmodyfikowanie go pozwoli zmienić sposób wyświetlania aplikacji zainstalowanej na urządzeniu użytkownika.
Dlaczego to jest 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 zmienić wiele szczegółów 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 pliku manifestu 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ć jej domyślne szczegóły. Plik HTML (public/index.html) zawiera też element <link> wczytujący plik manifestu.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Oto przykład aplikacji utworzonej za pomocą CRA, która ma zmodyfikowany plik manifestu:
Aby sprawdzić w tym przykładzie, czy wszystkie właściwości działają prawidłowo:
- Aby wyświetlić podgląd witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran
. - Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Application (Aplikacja).
- W panelu Aplikacja kliknij kartę Plik manifestu.
Podsumowanie
- Jeśli tworzysz witrynę, która Twoim zdaniem nie wymaga instalacji na urządzeniu, usuń manifest i element
<link>w pliku HTML, który do niego odwołuje. - Jeśli chcesz, aby użytkownicy mogli zainstalować aplikację na swoim urządzeniu, zmodyfikuj plik manifestu (lub utwórz go, jeśli nie używasz CRA) za pomocą dowolnych właściwości. W dokumentacji MDN znajdziesz wszystkie wymagane i opcjonalne atrybuty.