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.
![Nie zawiera prawidłowej ikony apple-touch-icon](https://web.dev/static/articles/codelab-apple-touch-icon/image/does-provide-valid-appl-3f357b1a31581.png?authuser=4&hl=pl)
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.
![Automatycznie wygenerowana ikona ekranu głównego.](https://web.dev/static/articles/codelab-apple-touch-icon/image/an-auto-generated-home-sc-3fae3a26906d9.png?authuser=4&hl=pl)
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
.
![Ikona Apple Touch.](https://web.dev/static/articles/codelab-apple-touch-icon/image/the-apple-touch-icon-fb4c851adc96.png?authuser=4&hl=pl)