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

Plik manifestu aplikacji internetowej jest domyślnie dołączony do Create React App i umożliwia każdemu zainstalowanie aplikacji React na swoim urządzeniu.

Houssein Djirdeh

Uwaga: jeśli nie wiesz, jak działają pliki manifestu aplikacji internetowej, najpierw zapoznaj się z przewodnikiem po dodawaniu pliku manifestu aplikacji internetowej.

Create React App (CRA) zawiera domyślnie plik manifestu aplikacji internetowej. Modyfikowanie tego pliku pozwala zmienić sposób wyświetlania aplikacji po zainstalowaniu jej 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 zmodyfikować szereg 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>, który wczytuje 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ć, czy wszystkie właściwości działają prawidłowo w tym przykładzie:

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij 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

1. 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.
2. 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.