Dodawanie ikony Apple Touch do progresywnej aplikacji internetowej

Kayce Basques

Użytkownicy Safari na iOS mogą ręcznie dodawać progresywne aplikacje internetowe (PWA) do ekranu głównego. Ikona wyświetlana na ekranie głównym iOS po dodaniu aplikacji PWA nosi nazwę ikony dotykowej Apple. Z tego ćwiczenia w Codelabs dowiesz się, jak dodać ikonę Apple Touch do aplikacji PWA. Zakładamy, że masz dostęp do urządzenia z iOS.

Zmierz odległość

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

  1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

  2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.

  3. Zapisz adres URL przykładowej aplikacji. Będzie on podobny do adresu https://example.glitch.me.

Uruchom kontrolę PWA Lighthouse przykładowej aplikacji w Chrome DevTools:

  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 jest zaznaczone pole wyboru Progresywna aplikacja internetowa.
  4. Kliknij przycisk Wygeneruj raport.

W sekcji Zoptymalizowana pod kątem PWA narzędzie Lighthouse wyświetli informację, że przykładowa aplikacja nie zawiera prawidłowej ikony Apple Touch.

Nie zawiera prawidłowej ikony apple-touch-icon
Nie zapewnia prawidłowej kontroli apple-touch-icon

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

Aby zademonstrować, że ikona Apple Touch zwiększa wygodę użytkowników, spróbuj najpierw dodać przykładową aplikację do ekranu głównego urządzenia z iOS, jeśli jej nie określono.

  1. Otwórz Safari na iOS.
  2. Otwórz adres URL swojej przykładowej aplikacji. Jest to zanotowany wcześniej adres URL (np. https://example.glitch.me).
  3. Kliknij Udostępnij Przycisk udostępniania Apple > Dodaj do ekranu głównego. Aby ją zobaczyć, prawdopodobnie będzie trzeba przesunąć palcem w lewo.
  4. Kliknij Dodaj.

Ponieważ w witrynie nie ma ikony Apple Touch, iOS generuje tylko ikonę na podstawie zawartości strony.

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

Dodaj ikonę Apple Touch do przykładowej aplikacji

  • Usuń znacznik komentarza z tagu <link rel="apple-touch-icon"> na dole sekcji <head> strony 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>
  …

Dodaj przykładową aplikację do ekranu głównego iOS (ponownie)

  • Spróbuj ponownie dodać przykładową aplikację do ekranu głównego iOS. Tym razem generowana jest właściwa ikona witryny. Po ponownym sprawdzeniu strony w Lighthouse zobaczysz też, że kontrola Nie zapewnia prawidłowego sprawdzenia apple-touch-icon.
Ikona Apple Touch.
Ikona Apple Touch.