Aggiungere un'icona touch Apple all'app web progressiva

Kayce Basques

Gli utenti di Safari per iOS possono aggiungere manualmente le app web progressive (PWA) alla nella schermata Home. L'icona che appare nella schermata Home di iOS quando viene aggiunta una PWA è denominata l'icona Apple touch. Questo codelab ti mostra come aggiungere un'icona Apple Touch a una PWA. Presuppone che hai accesso a un dispositivo iOS.

Misura

Apri l'app di esempio in una nuova scheda:

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.

  2. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero schermo intero.

  3. Prendi nota dell'URL dell'app di esempio. Sarà ad esempio https://example.glitch.me.

Esegui un controllo PWA di Lighthouse sull'app di esempio in Chrome DevTools:

  1. Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  2. Fai clic sulla scheda Lighthouse.
  3. Assicurati che la casella di controllo App web progressiva sia selezionata nell'elenco Categorie.
  4. Fai clic sul pulsante Genera report.

Nella sezione Ottimizzata per PWA, Lighthouse segnala che l'app di esempio non fornisce un indirizzo valido Icona del tocco di Apple.

Non fornisce un'icona apple-touch valida
. Il controllo Non fornisce un controllo apple-touch-icon valido

Aggiungi l'app di esempio a una schermata Home di iOS

Per dimostrare in che modo l'icona del tocco di Apple offre un'esperienza utente più curata, prova innanzitutto ad aggiungere l'app di esempio nella schermata Home del tuo dispositivo iOS quando non è stata specificata l'icona del tocco Apple.

  1. Apri Safari per iOS.
  2. Apri l'URL dell'app di esempio. Questo è l'URL, ad esempio https://example.glitch.me, che di cui sopra.
  3. Tocca Condividi Pulsante Condividi di Apple > Aggiungi a schermata Home. Probabilmente dovrai scorrere verso sinistra per vedere questa opzione.
  4. Tocca Aggiungi.

Poiché il sito non ha specificato un'icona tocco di Apple, iOS genera solo un'icona per il sito dai contenuti della pagina.

Un'icona della schermata Home generata automaticamente.
. Un'icona della schermata Home generata automaticamente.

Aggiungi un'icona Apple touch all'app di esempio

  • Rimuovi il commento dal tag <link rel="apple-touch-icon"> in fondo a <head> di 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>
  …

Aggiungi (di nuovo) l'app di esempio a una schermata Home di iOS

  • Riprova ad aggiungere l'app di esempio a una schermata Home di iOS. Questa volta, viene generata un'icona appropriata del sito. Se controlli di nuovo la pagina con Lighthouse noterai che il parametro Non fornisce un controllo apple-touch-icon valido ora superato.
di Gemini Advanced.
Icona del tocco di Apple.
Icona del tocco di Apple.