Installazione

Una volta installata la PWA, l'utente:

  • Hanno un'icona in Avvio app, nella schermata Home, nel menu Start o in Avvio app.
  • Vengono visualizzati come risultati quando un utente cerca l'app sul proprio dispositivo.
  • Utilizza una finestra separata all'interno del sistema operativo.
  • Assistenza per funzionalità specifiche.

Criteri di installazione

Ogni browser ha un criterio che contrassegna quando un sito web o un'app web sono un'app web progressiva e può essere installato per un'esperienza autonoma. I metadati della PWA sono impostati da un file basato su JSON noto come manifest dell'app web, di cui parleremo in dettaglio nel prossimo modulo.

Come requisito minimo per l'installabilità, la maggior parte dei browser che lo supportano utilizzano il file manifest dell'app web e determinate proprietà, come il nome dell'app e la configurazione dell'esperienza installata. Un'eccezione è Safari per macOS, che non supporta l'installabilità.

I requisiti per consentire l'installazione variano a seconda del browser. Questo articolo descrive in dettaglio i criteri per Google Chrome e include i link ai requisiti per gli altri browser.

Poiché il test che stabilisce che una PWA soddisfa i requisiti di installabilità può richiedere diversi secondi, l'installabilità in sé potrebbe non essere disponibile non appena viene ricevuta una risposta dell'URL.

Installazione su computer

L'installazione di PWA desktop è attualmente supportata da Google Chrome e Microsoft Edge su Linux, Windows, macOS e Chromebook. Questi browser mostreranno un badge di installazione (icona) nella barra degli URL (vedi l'immagine sotto) per indicare che il sito corrente è installabile.

Chrome ed Edge su computer con il badge di installazione nella barra degli URL

Quando un utente interagisce con un sito, potrebbe visualizzare una finestra popup come quella riportata di seguito che invita gli utenti a installarlo come app.

Guida all'interno del prodotto di Google Chrome che suggerisce l'installazione della PWA.

Il menu a discesa del browser include anche un elemento "Installa " che l'utente può utilizzare:

Voci di menu di Chrome ed Edge per l'installazione della PWA.

I sistemi operativi desktop supportano soltanto le modalità di visualizzazione autonome e minime.

PWA installate sui computer:

  • Avere un'icona nel menu Start o nella schermata Start sui PC Windows, sul dock o sul desktop nelle GUI di Linux, nel Launchpad di macOS o in Avvio applicazioni di Chromebook.
  • Visualizza un'icona nel selettore e nei dock delle app quando l'app è attiva, utilizzata di recente o è aperta in background.
  • Compari nella ricerca di app, ad esempio ricerca su Windows o Spotlight su macOS.
  • È possibile impostare un numero di badge sulle icone per indicare le nuove notifiche. Per questa operazione viene utilizzata l'API Badging.
  • È possibile impostare un menu contestuale per l'icona con Scorciatoie app.
  • Non può essere installato due volte con lo stesso browser.

Dopo aver installato un'app sul computer, gli utenti possono accedere a about:apps, fare clic con il tasto destro del mouse su una PWA e selezionare "Avvia app all'accesso" se vogliono che la tua app si apra automaticamente all'avvio.

Installazione di iOS e iPadOS

Su iOS e iPadOS non esiste una richiesta del browser per installare la PWA. Su queste piattaforme, le PWA sono anche chiamate app web nella schermata Home. Queste app devono essere aggiunte manualmente alla schermata Home tramite un menu disponibile solo in Safari. Ti consigliamo di aggiungere il tag apple-touch-icon al tuo codice HTML. Per definire l'icona, includi il percorso dell'icona alla sezione <head> HTML, in questo modo:

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari utilizzerà queste informazioni per creare la scorciatoia e, se non fornisci un'icona specifica per i dispositivi Apple, l'icona sulla schermata Home sarà uno screenshot della tua PWA quando l'utente l'ha installata.

È importante capire che l'installazione della PWA è disponibile solo se l'utente naviga nel tuo sito web da Safari. Altri browser disponibili nell'App Store, come Google Chrome, Firefox, Opera o Microsoft Edge, non possono installare una PWA nella schermata Home.

Per aggiungere app alla schermata Home, procedi nel seguente modo:

  1. Apri il menu Condividi, disponibile nella parte inferiore o superiore del browser.
  2. Fai clic su Aggiungi a schermata Home.
  3. Conferma il nome dell'app; il nome è modificabile dall'utente.
  4. Fai clic su Add (Aggiungi). Su iOS e iPadOS, i preferiti dei siti web e le PWA vengono visualizzati nello stesso modo sulla schermata Home.

Su iOS e iPadOS è supportata solo la modalità di visualizzazione autonoma. Pertanto, se utilizzi la modalità UI minima, verrà mostrata una scorciatoia del browser; se utilizzi la modalità a schermo intero, verrà ripristinata la modalità autonoma.

PWA installate su iOS e iPadOS:

  • Vengono visualizzati nella schermata Home, nella ricerca di Spotlight, nei suggerimenti di Siri e nella ricerca nella libreria di applicazioni.
  • Non vengono visualizzati nelle cartelle delle categorie della Galleria app.
  • Mancanza del supporto per funzionalità quali badge e scorciatoie delle app.

Per inciso, Safari utilizza una tecnologia nativa nota come Clip web per creare le icone PWA nel sistema operativo. Si tratta di file XML nel formato elenco delle proprietà di Apple archiviati nel file system.

Installazione di Android

Su Android, le richieste di installazione di PWA variano in base al dispositivo e al browser. Gli utenti possono vedere:

  • Variazioni nel testo della voce di menu da installare, ad esempio Installa o Aggiungi alla schermata Home.
  • Finestre di dialogo di installazione dettagliate.

Nell'immagine di seguito puoi vedere due diverse versioni di una finestra di dialogo di installazione, una semplice mini-barra delle informazioni (a sinistra) e una finestra di dialogo di installazione dettagliata (a destra).

Mini barra delle informazioni e finestre di dialogo di installazione su Android.

A seconda del dispositivo e del browser, la PWA verrà installata come WebAPK, scorciatoia o QuickApp.

WebAPKs

Un WebAPK è un pacchetto Android (APK) creato da un fornitore attendibile del dispositivo dell'utente, generalmente nel cloud, su un server di minting WebAPK. Questo metodo viene utilizzato da Google Chrome sui dispositivi su cui è installato Google Mobile Services (GMS) e dal browser Internet Samsung, ma solo sui dispositivi prodotti da Samsung, ad esempio un telefono o un tablet Galaxy. Insieme, questo rappresenta la maggior parte degli utenti Android.

Quando un utente installa una PWA da Google Chrome e viene utilizzato un WebAPK, il server di minting "mints" (pacchetti) e firma un APK per la PWA. Questo processo richiede tempo, ma quando l'APK è pronto, il browser installa l'app automaticamente sul dispositivo dell'utente. Poiché l'APK è stato firmato da provider attendibili (Play Services o Samsung), il telefono lo installa senza disattivare la sicurezza, come per qualsiasi app proveniente dallo store. Non è necessario eseguire il sideload dell'app.

PWA installate tramite WebAPK:

Scorciatoie

Sebbene i WebAPK offrano un'esperienza ottimale agli utenti di Android, non sempre possono essere creati. Quando non è possibile, i browser tornano a creare una scorciatoia per il sito web. Poiché Firefox, Microsoft Edge, Opera, Brave e Samsung Internet (su dispositivi non Samsung) non dispongono di server di minting affidabili, creeranno scorciatoie. Lo farà anche Google Chrome se il servizio di minting non è disponibile o se la tua PWA non soddisfa i requisiti di installazione.

PWA installate con le scorciatoie:

  • Avere un'icona con il badge del browser nella schermata Home (vedi gli esempi che seguono).
  • Non sono presenti icone in Avvio app o in Impostazioni, App.
  • Impossibile utilizzare funzionalità che richiedono l'installazione.
  • Non possono aggiornare le icone e i metadati delle app.
  • Può essere installato più volte, anche utilizzando lo stesso browser; in questo caso tutti gli utenti rimanderanno alla stessa istanza e utilizzeranno lo stesso spazio di archiviazione.

Una PWA installata con diversi browser sullo stesso dispositivo.

QuickApps

Alcuni produttori, tra cui Huawei e ZTE, offrono una piattaforma nota come QuickApps per creare app web leggere, simili alle PWA, ma utilizzando uno stack tecnologico diverso. Alcuni browser su questi dispositivi, come il browser Huawei, possono installare PWA che vengono pacchettizzate come QuickApp, anche se non utilizzi lo stack QuickApp.

Quando la PWA viene installata come QuickApp, gli utenti otterranno un'esperienza simile a quella che avranno con le scorciatoie, ma con un'icona con il badge dell'icona QuickApp (un'immagine a forma di fulmine). L'app sarà disponibile anche per l'avvio da QuickApp Center.

QuickApps su una schermata Home di Huawei o ZTE.

Richiesta dell'installazione

Nei browser basati su Chromium su dispositivi desktop e Android, è possibile attivare la finestra di dialogo di installazione del browser dalla PWA. Il capitolo Richiesta di installazione illustrerà i pattern per eseguire questa operazione e come implementarli.

Cataloghi e store di app

La tua PWA può anche essere elencata nei cataloghi e negli store di app per aumentarne la copertura e consentire agli utenti di trovarla nello stesso luogo in cui trovano altre app. La maggior parte dei cataloghi e degli store di app supporta tecnologie che ti consentono di pubblicare un pacchetto che non include l'intera app web (ad esempio il codice HTML e gli asset). Queste tecnologie ti consentono di creare soltanto un Avvio app per un motore di rendering web autonomo che caricherà l'app e consentirà al service worker di memorizzare nella cache gli asset necessari.

I cataloghi e gli store di app che supportano la pubblicazione di una PWA sono:

Se vuoi scoprire di più su come pubblicare una PWA su cataloghi e store di app, dai un'occhiata all'interfaccia a riga di comando BubbleWrap e allo Strumento di creazione PWA.

Risorse