Questa pagina è stata tradotta dall'API Cloud Translation.

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 schermata Home. L'icona che viene visualizzata nella schermata Home di iOS quando viene aggiunta una PWA è denominata icona Apple touch. Questo codelab mostra come aggiungere un'icona touch Apple a una PWA. Presuppone che tu abbia accesso a un dispositivo iOS.

Misura

Apri l'app di esempio in una nuova scheda:

Fai clic su Remix per modificare per rendere il progetto modificabile.
Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
Prendi nota dell'URL della tua app di esempio, che sarà simile a https://example.glitch.me.

Esegui un controllo PWA Lighthouse sulla tua app di esempio in Chrome DevTools:

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

Nella sezione Ottimizzata PWA, Lighthouse segnala che l'app di esempio non fornisce un'icona Apple touch valida.

Il controllo Non fornisce un controllo apple-touch-icon valido

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

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

Apri Safari per iOS.
Apri l'URL della tua app di esempio, ad esempio https://example.glitch.me che hai indicato in precedenza.
Tocca Condividi > Aggiungi a schermata Home. Probabilmente dovrai scorrere verso sinistra per vedere questa opzione.
Tocca Aggiungi.

Poiché il sito non ha specificato un'icona Apple Touch, iOS genera soltanto un'icona per il sito a partire dai contenuti della pagina.

Un'icona della schermata Home generata automaticamente.

Aggiungere un'icona Apple Touch all'app di esempio

Rimuovi il commento dal tag <link rel="apple-touch-icon"> in fondo alla sezione <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>
  …

Aggiungere 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 corretta per il sito. Se controlli di nuovo la pagina con Lighthouse, noterai anche che il controllo Non fornisce un valore apple-touch-icon valido ora è superato.

L'icona Apple Touch.