Dodawanie manifestu aplikacji internetowej za pomocą narzędzia Create React

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.

Houssein Djirdeh

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.

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

1. Jeśli uważasz, że witryna nie musi być instalowana na urządzeniu, usuń plik manifestu i element <link> z pliku HTML, wskazuje go.
2. 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.