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:
Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
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:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Progresywna aplikacja internetowa.
- 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.
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.
- Otwórz Safari na iOS.
- Otwórz adres URL przykładowej aplikacji. To jest URL podobny do
https://example.glitch.me, który co wspomnieliśmy wcześniej. - Kliknij Udostępnij
>
Dodaj do ekranu głównego. Aby zobaczyć tę opcję, prawdopodobnie będzie trzeba przesunąć palcem w lewo. - Kliknij Dodaj.
Strona nie ma przypisanej ikony Apple Touch, więc iOS tylko generuje dla niej ikonę. od treści strony.
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.
