Esistono molti miglioramenti che possono migliorare la conversione e l'utilizzo della PWA.
Scorciatoie applicazioni
Le scorciatoie app sono un elenco statico di link diretti alla tua PWA, sono scritti nel file manifest. Specifiche dei file manifest delle app web. Consente di definire un elenco di scorciatoie per parti o funzionalità diverse nella PWA, accelerando la navigazione verso le 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 visualizzato sull'icona dell'app nella schermata Home, nel dock o nella barra delle applicazioni, 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.
di Gemini Advanced.Le scorciatoie sono definite nel membro shortcuts del file manifest. È necessario un array di membri con le seguenti proprietà:
name- Il testo che verrà mostrato all'utente, solitamente in un menu contestuale.
url- L'URL che la PWA deve caricare quando l'utente la avvia da questa scorciatoia. Deve essere un URL nell'ambito della PWA e deve collegare un link diretto alla funzionalità descritta in
nameoshort_name. short_name- (Facoltativo) Un nome più breve utilizzato quando non c'è abbastanza spazio per visualizzare il valore completo del campo
name. description- (Facoltativo) Una descrizione di ciò che fa questa scorciatoia
icons- (Facoltativo) Un array di oggetti icona con i campi
src,type,sizesepurposefacoltativi, che descrive quali immagini devono rappresentare la scorciatoia
Dovresti considerare le scorciatoie app come il massimo sforzo. Ciò significa che non puoi fare affidamento sulla visualizzazione uniforme di queste scorciatoie e, anche se vengono visualizzate, non sai quante scorciatoie verranno visualizzate o se la piattaforma ignorerà le icone poiché è a discrezione dei browser. Una discussione completa per ogni piattaforma è fuori ambito, ma di seguito trovi un'idea di come funziona su Android e computer. Il modo migliore per affrontare questa incertezza è ordinare gli articoli in base alla priorità.
di Gemini Advanced.Il seguente esempio di codice definisce diverse scorciatoie app che puoi provare se installi l'app su Android con Chrome o su computer con Edge o Chrome.
iOS e iPadOS
Durante la pubblicazione delle PWA, sono stati apportati alcuni miglioramenti che possono migliorare l'esperienza degli utenti su Safari su iOS/iPadOS.
Schermate iniziali
Come indicato nel capitolo relativo al file manifest dell'app web, Android crea automaticamente schermate iniziali in base ai valori del file manifest. Questo non è il caso di iOS e iPadOS. In questi dispositivi, devi definire le schermate iniziali nel codice HTML come immagini statiche utilizzando elementi <link>.
Queste immagini sono note come immagini di avvio sui dispositivi Apple e utilizzano la proprietà rel con 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 la PWA avrà all'apertura. Pertanto, dispositivi iOS e iPadOS avranno bisogno di immagini diverse. Sono necessarie altre situazioni sull'iPad, come aperture orizzontali/verticali e il rendering della PWA in modalità multitasking (ad esempio 1/3, 1/2 o 2/3 dello schermo).
Puoi consultare un elenco aggiornato delle dimensioni dello schermo di iOS e iPadOS nelle Linee guida per l'interfaccia umana di Apple
È possibile impostare diverse versioni dell'immagine di lancio con una query multimediale 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 immagini di avvio iOS
La definizione delle immagini di avvio è un'attività impegnativa, quindi disponiamo di un paio di strumenti per la generazione e la configurazione automatiche:
- La generazione statica si integra con il tuo sistema di compilazione, crea tutte le immagini statiche PNG e fornisce il codice HTML con elementi
<link>da inserire nel documento. Il Generatore di asset PWA è un esempio di questo strumento. - Generatore lato client, uno strumento JavaScript in grado di incorporare una o più versioni in base64 dell'immagine di avvio in elementi inseriti in
<link>in base al tipo di dispositivo e alle dimensioni dello schermo correnti. Puoi utilizzare un canvas in memoria, eseguire il rendering dell'immagine e convertirla in un URIdata:con un file PNG. La libreria Compat PWA è una libreria lato client facile da usare che esegue questa operazione clonando la tipica schermata di avvio di Android.
Rilevamento di una PWA sulle piattaforme mobile Apple
Anche se nella PWA dovresti utilizzare il miglioramento progressivo e il rilevamento delle funzionalità, potrebbero esserci alcuni casi limite in cui dobbiamo sapere se l'utente utilizza una PWA su piattaforme mobile Apple, ad esempio quando vuoi offrire istruzioni di installazione o aggiungere link ad app specifiche per le piattaforme che sono solo iOS.
Per evitare di leggere la stringa dello user agent, controlla la proprietà standalone dell'oggetto navigator. Questa è una proprietà non standard 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 lì. - Se
navigator.standaloneètrue, significa che l'utente ha aperto la PWA dalla schermata Home e sta ricevendo l'esperienza PWA autonoma.
Supporto dello schermo intero
Su Safari su iOS e iPad, solo display: standalone è supportata come modalità di visualizzazione per l'icona della PWA. Anche se display: fullscreen non è supportato sui dispositivi Android, è possibile utilizzare un meta-tag non standard per attivare la modalità a schermo intero della PWA.
Nell'immagine successiva, puoi vedere a sinistra un design autonomo predefinito con un colore del tema e a destra una PWA con una modalità iOS a schermo intero che ti consente di eseguire il rendering dei contenuti dietro la barra di stato.
Se aggiungi il seguente tag nel codice HTML, la PWA su iOS e iPadOS entrerà in modalità a schermo intero, ma è 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 vedi 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 visualizza sempre le icone in bianco, quindi devi sempre creare un contrasto tra gli sfondi della parte superiore dello schermo e contenuti chiari. Inoltre, è importante utilizzare le variabili di ambiente CSS per eseguire il rendering dei contenuti nell'area sicura, come illustrato nel capitolo Design dell'app.
Affidabilità dell'installazione
Safari su iOS e iPadOS prima della 15.4 carica il file manifest dalla rete solo quando l'utente apre il foglio di condivisione, utilizzando l'icona di condivisione all'interno del browser, e non al caricamento della pagina. Pertanto, Safari non controlla se il tuo sito web è una PWA fino a quel momento, il che può creare situazioni in cui il file manifest non può essere caricato o richiede troppo tempo e Safari lo ignora.
Quando Safari non riesce a caricare in tempo il file manifest, premi "Aggiungi alla schermata Home" inserisce un'icona nella schermata Home, ma non offre un'esperienza con l'app; sarà semplicemente una scorciatoia a una scheda di Safari.