Dodawanie ikony Apple Touch do progresywnej aplikacji internetowej

Użytkownicy Safari na iOS mogą ręcznie dodawać progresywne aplikacje internetowe (PWA) do na ekranie głównym. Ikona wyświetlana na ekranie głównym iOS po dodaniu PWA nazywa się ikonę Apple Touch. Z tego ćwiczenia w Codelabs dowiesz się, jak dodać ikonę Apple Touch do aplikacji PWA. Zakłada się, do którego masz dostęp na urządzeniu z iOS.

Zmierz odległość

Otwórz przykładową aplikację w nowej karcie:

  1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

  2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran

  3. Zapisz adres URL przykładowej aplikacji. To przykładowa nazwa: https://example.glitch.me.

Przeprowadź kontrolę PWA Lighthouse na przykładowej aplikacji w Narzędziach deweloperskich w Chrome:

  1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  2. Kliknij kartę Lighthouse.
  3. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Progresywna aplikacja internetowa.
  4. Kliknij przycisk Wygeneruj raport.

W sekcji PWA Optimized (Zoptymalizowane przez PWA) narzędzie Lighthouse zgłasza, że przykładowa aplikacja nie podaje prawidłowego Ikona Apple Touch.

Nie wyświetla prawidłowej ikony dotyku Apple
nie zawiera prawidłowego audytu apple-touch-icon.
.

Dodawanie przykładowej aplikacji do ekranu głównego iOS

Aby zademonstrować, w jaki sposób ikona Apple Touch jest wygodniejsza w obsłudze, najpierw spróbuj dodać przykładowej aplikacji na ekran główny urządzenia z iOS, jeśli nie określono ikony Apple Touch.

  1. Otwórz Safari na iOS.
  2. Otwórz adres URL przykładowej aplikacji. To jest URL podobny do https://example.glitch.me, który co wspomnieliśmy wcześniej.
  3. Kliknij Udostępnij Przycisk Apple Share > Dodaj do ekranu głównego. Aby zobaczyć tę opcję, prawdopodobnie będzie trzeba przesunąć palcem w lewo.
  4. Kliknij Dodaj.

Strona nie ma przypisanej ikony Apple Touch, więc iOS tylko generuje dla niej ikonę. od treści strony.

Automatycznie wygenerowana ikona ekranu głównego.
Automatycznie wygenerowana ikona ekranu głównego.

Dodawanie ikony Apple Touch do przykładowej aplikacji

  • Usuń znacznik komentarza z tagu <link rel="apple-touch-icon"> na dole elementu <head> (index.html).
    …
    <link rel="stylesheet" href="/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

Ponownie dodaj przykładową aplikację do ekranu głównego iOS.

  • Spróbuj ponownie dodać przykładową aplikację do ekranu głównego iOS. Tym razem zostanie wygenerowana właściwa ikona dla do witryny. Jeśli sprawdzisz stronę ponownie za pomocą Lighthouse, zobaczysz też, że Nie podano prawidłowego audytu apple-touch-icon, który został zaliczony.
.
Ikona Apple Touch.
. Ikona Apple Touch.