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:
Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
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:
- 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 jest zaznaczone pole wyboru Progresywna aplikacja internetowa.
- 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.
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.
- Otwórz Safari na iOS.
- Otwórz adres URL swojej przykładowej aplikacji. Jest to zanotowany wcześniej adres URL (np.
https://example.glitch.me
). - Kliknij Udostępnij > Dodaj do ekranu głównego. Aby ją zobaczyć, prawdopodobnie będzie trzeba przesunąć palcem w lewo.
- Kliknij Dodaj.
Ponieważ w witrynie nie ma ikony Apple Touch, iOS generuje tylko ikonę na podstawie zawartości strony.
Dodaj ikonę Apple Touch do przykładowej aplikacji
- Usuń znacznik komentarza z tagu
<link rel="apple-touch-icon">
na dole sekcji<head>
stronyindex.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
.