Esistono molti miglioramenti che possono migliorare la conversione e l'utilizzo della tua PWA.
Scorciatoie applicazioni
Le scorciatoie app sono un elenco statico di link diretti alla tua PWA, scritti nel file manifest. Specifiche del manifest dell'app web. Ti consente di definire un elenco di scorciatoie per diverse parti o funzionalità della tua PWA, che accelerano la navigazione alle sezioni a cui accedi di frequente.
Le scorciatoie delle app sono disponibili sulla maggior parte dei sistemi operativi desktop e su Android con WebAPK e vengono visualizzate in un menu contestuale sull'icona dell'app nella schermata Home, nella barra delle app o nella barra delle app, come nell'immagine seguente:
Per accedere a questo menu, gli utenti devono fare clic con il tasto destro del mouse o premere a lungo sull'icona della PWA.
Le scorciatoie sono definite nell'elemento shortcuts del manifest. Accetta un array di membri con le seguenti proprietà:
name- Il testo che verrà mostrato all'utente, in genere in un menu contestuale.
url- L'URL che la PWA deve caricare quando l'utente la avvia da questa scorciatoia. Deve essere un URL all'interno dell'ambito della tua PWA e deve includere un link diretto alla funzionalità descritta da
nameoshort_name. short_name- (Facoltativo) Un nome più breve utilizzato quando non c'è spazio sufficiente per visualizzare il valore completo del campo
name. description- (Facoltativo) Una descrizione di cosa farà questa scorciatoia
icons- (Facoltativo) Un array di oggetti icona con campi
src,type,sizesepurposefacoltativi che descrivono le immagini che devono rappresentare la scorciatoia
Devi trattare le scorciatoie delle app come una funzionalità di tipo "best effort". Ciò significa che non puoi fare affidamento sulla visualizzazione coerente di queste scorciatoie e, anche se vengono visualizzate, non sai quante verranno visualizzate o se la piattaforma ignorerà le icone, in quanto è a discrezione dei browser. Una discussione completa per piattaforma non rientra nell'ambito, ma di seguito puoi avere un'idea di come funziona su Android e computer. Il modo migliore per gestire questa incertezza è ordinare gli elementi in base alla priorità.
Il seguente esempio di codice definisce diverse scorciatoie per l'app che puoi provare se installi l'app su Android con Chrome o su computer con Edge o Chrome.
iOS e iPadOS
Quando pubblichi PWA, ci sono alcuni miglioramenti che possono migliorare l'esperienza degli utenti su Safari su iOS/iPadOS.
Schermate iniziali
Come descritto nel capitolo Manifest dell'app web, Android crea automaticamente schermate iniziali in base ai valori del manifest. Non è così per iOS e iPadOS. In questi dispositivi, devi definire le schermate iniziali in HTML come immagini statiche utilizzando gli elementi <link>.
Queste immagini sono note come immagini di avvio sui dispositivi Apple e utilizzano la proprietà rel con il valore apple-touch-startup-image, ad esempio:
<link rel="apple-touch-startup-image" href="ios-startup.png">
Il problema è che l'immagine di avvio deve avere le dimensioni esatte della finestra che avrà la tua PWA all'apertura. Pertanto, i diversi dispositivi iOS e iPadOS avranno bisogno di immagini diverse. Su iPad è necessario coprire più situazioni, ad esempio l'apertura in modalità Orizzontale/Ritratto e il rendering della PWA in modalità multitasking (ad esempio 1/3, 1/2 o 2/3 dello schermo).
Puoi controllare un elenco aggiornato delle dimensioni degli schermi di iOS e iPadOS nelle linee guida per l'interfaccia utente di Apple.
È possibile impostare versioni diverse dell'immagine di lancio con una media query all'interno dell'attributo media:
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
Pattern di progettazione per le immagini di avvio di iOS
La definizione delle immagini di avvio è un lavoro impegnativo, quindi abbiamo a disposizione un paio di strumenti per la generazione e la configurazione automatica:
- La generazione statica si integra con il sistema di compilazione, crea tutte le immagini statiche PNG e fornisce il codice HTML con gli elementi
<link>da inserire nel documento. PWA Asset Generator è un esempio di questo tipo di strumento. - Generatore lato client, uno strumento JavaScript che può incorporare una o più versioni base64 dell'immagine di avvio negli elementi iniettati di
<link>in base al tipo e alle dimensioni dello schermo del dispositivo corrente. Puoi utilizzare una tela in memoria, eseguire il rendering dell'immagine e convertirla in un URIdata:con un file PNG. La libreria PWA Compat è una libreria lato client facile da usare che esegue questa operazione clonando la schermata di avvio tipica di Android.
Rilevamento di una PWA sulle piattaforme mobile Apple
Sebbene tu debba utilizzare il miglioramento progressivo e il rilevamento delle funzionalità nella tua PWA, potrebbero esserci casi limite in cui dobbiamo sapere se l'utente si trova in una PWA su piattaforme mobile Apple, ad esempio quando vuoi offrire istruzioni di installazione o aggiungere link ad app specifiche della piattaforma solo per iOS.
Per evitare di leggere la stringa dell'user agent, controlla la proprietà standalone dell'oggetto navigator. Si tratta di una proprietà non standard ed è disponibile solo nel motore WebKit su iOS e iPadOS.
- Se
navigator.standaloneèundefined, significa che l'utente non utilizza un dispositivo iPadOS o iOS. - Se
navigator.standaloneèfalse, significa che l'utente ha aperto la PWA nel browser e la sta utilizzando. - Se
navigator.standaloneètrue, significa che l'utente ha aperto la PWA dalla schermata Home e sta utilizzando l'esperienza PWA autonoma.
Supporto per lo schermo intero
Su Safari su iOS e iPad, è supportata solo la modalità display: standalone come modalità di visualizzazione per la tua PWA.
Nell'immagine successiva, a sinistra puoi vedere un design autonomo predefinito con un colore tema e a destra una PWA con una modalità a schermo intero per iOS che ti consente di visualizzare i contenuti dietro la barra di stato.
Se aggiungi il seguente tag al codice HTML, la tua PWA su iOS e iPadOS entrerà in modalità a schermo intero, ma in modo diverso da Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In questa modalità, la barra di stato del dispositivo (la parte superiore in cui sono visualizzati l'orologio, il livello della batteria e le icone di notifica) è ancora visibile, ma viene visualizzata sopra i contenuti con uno sfondo trasparente.
Quando utilizzi questa modalità, fai attenzione al design perché il sistema operativo renderizzerà sempre le icone in bianco, quindi devi sempre creare un contrasto tra gli sfondi per la parte superiore dello schermo e i contenuti chiari. Inoltre, è importante utilizzare le variabili di ambiente CSS per visualizzare i contenuti nell'area di sicurezza, come descritto nel capitolo sul design delle app.
Affidabilità dell'installazione
Su iOS e iPadOS precedenti alla versione 15.4, il file manifest viene caricato dalla rete solo quando l'utente apre il riquadro di condivisione utilizzando l'icona di condivisione nel browser e non quando viene caricata la pagina. Pertanto, fino a quel momento il browser non controlla se il tuo sito web è una PWA, il che può portare a situazioni in cui il manifest non può essere caricato o richiede troppo tempo e il browser lo ignora.
Quando il browser non riesce a caricare il manifest in tempo, premendo "Aggiungi a schermata Home" viene visualizzata un'icona nella schermata Home, ma non viene fornita un'esperienza con l'app. Si tratta semplicemente di una scorciatoia per una scheda del browser.