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, scritte nel manifest. Specifica del manifest delle app web: consente di definire un elenco di scorciatoie a diverse parti o funzionalità della PWA e di accelerare la navigazione verso le sezioni a cui si accede di frequente.
Le scorciatoie 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, 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.
Le scorciatoie sono definite nel membro shortcuts del manifest. Prende 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 dovrebbe caricare quando l'utente la avvia da questa scorciatoia. Deve essere un URL all'interno dell'ambito PWA e deve rimandare direttamente alla funzionalità descritta in
nameoshort_name. short_name- (Facoltativo) Un nome più breve utilizzato quando lo spazio non è sufficiente per visualizzare il valore completo del campo
name. description- (Facoltativo) Una descrizione del funzionamento di questa scorciatoia
icons- (Facoltativo) Un array di oggetti icona con campi
src,type,sizesepurposefacoltativi che descrivono quali immagini devono rappresentare la scorciatoia
Dovresti considerare le scorciatoie app come la soluzione del tuo tentativo. Ciò significa che non puoi fare affidamento su queste scorciatoie per una visualizzazione coerente e, anche se vengono visualizzate, non sai quante scorciatoie verranno visualizzate o se la piattaforma ignorerà le icone a discrezione dei browser. Una discussione completa per ogni piattaforma non è pertinente, ma di seguito puoi avere un'idea di come funziona su Android e desktop. Il modo migliore per affrontare questa incertezza è ordinare gli articoli per priorità.
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 di PWA, esistono alcuni miglioramenti che possono migliorare l'esperienza degli utenti su Safari su iOS/iPadOS.
Schermate iniziali
Come illustrato nel capitolo Web App Manifest, 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 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 della finestra esatte che la PWA avrà all'apertura. Pertanto, dispositivi iOS e iPadOS diversi avranno bisogno di immagini diverse. Sono necessarie maggiori situazioni sull'iPad, come le aperture orizzontali/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 umana di Apple.
È possibile impostare diverse versioni dell'immagine di lancio con una query supporti 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 per startup iOS
La definizione delle immagini di avvio è complessa, perciò abbiamo un paio di strumenti per la generazione e la configurazione automatiche:
- La generazione statica si integra con il sistema di compilazione, crea tutte le immagini statiche PNG e fornisce il codice HTML con elementi
<link>da inserire nel documento. Generatore di asset PWA è un esempio di questo strumento. - Generatore lato client, strumento JavaScript che può incorporare una o più versioni base64 dell'immagine di avvio negli 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 PWA Compat Library è una libreria lato client di facile utilizzo che lo fa clonando la schermata di avvio tipica di Android.
Rilevamento di una PWA sulle piattaforme mobile Apple
Anche se dovresti utilizzare il miglioramento progressivo e il rilevamento delle funzionalità nella tua PWA, in alcuni casi limite dobbiamo sapere se l'utente utilizza una PWA sulle piattaforme mobile Apple, ad esempio quando vuoi offrire istruzioni di installazione o aggiungere link ad app specifiche della piattaforma che sono solo per iOS.
Per evitare di leggere la stringa dello user agent, controlla la proprietà standalone dell'oggetto navigator. Si tratta di una proprietà non standard ed è disponibile solo sul 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 usando. - Se
navigator.standaloneètrue, significa che l'utente ha aperto la PWA dalla schermata Home e sta usufruendo dell'esperienza PWA autonoma.
Supporto dello schermo intero
In Safari su iOS e iPad, solo display: standalone è supportata come modalità di visualizzazione per l'icona della PWA. Sebbene display: fullscreen non sia 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 visualizzare i contenuti dietro la barra di stato.
Se aggiungi il tag seguente nel codice HTML, la PWA su iOS e iPadOS attiverà la modalità a schermo intero, ma sarà diversa da quella di Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In questa modalità, la barra di stato del dispositivo (in alto dove sono presenti l'orologio, il livello della batteria e le icone di notifica) è ancora visibile, ma viene visualizzata sopra i tuoi contenuti con uno sfondo trasparente.
Quando utilizzi questa modalità, fai attenzione al design, perché il sistema operativo eseguirà sempre il rendering delle icone in bianco, quindi dovresti sempre fare un contrasto tra gli sfondi nella parte superiore dello schermo e contenuti chiari. Inoltre, è importante utilizzare le variabili di ambiente CSS per visualizzare i contenuti nell'area sicura, come mostrato nel Capitolo sulla progettazione dell'app.
Affidabilità dell'installazione
Safari su iOS e iPadOS prima della versione 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 durante il caricamento della pagina. Pertanto, fino a quel momento Safari 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 Safari lo ignora.
Quando Safari non riesce a caricare il file manifest in tempo, premendo "Aggiungi alla schermata Home" viene aggiunta un'icona nella schermata Home, ma l'esperienza utente non viene offerta; si tratta semplicemente di una scorciatoia a una scheda di Safari.