Installazione

Una volta che l'utente installa la PWA:

• Avere un'icona in Avvio app, nella schermata Home, nel menu di avvio o in Avvio app.
• Vengono visualizzate come risultato quando un utente cerca l'app sul proprio dispositivo.
• Avere una finestra separata all'interno del sistema operativo.
• Avere assistenza per funzionalità specifiche.

di Gemini Advanced.

Nota : anche se l'installazione varia in base al browser e al sistema operativo, non è necessario creare alcun tipo di pacchetto o eseguibile per installare la PWA da un browser.

Criteri di installazione

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

Come requisito minimo per l'installabilità, la maggior parte dei browser che la supportano utilizzano il file manifest dell'app web e alcune 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 secondo cui una PWA soddisfa i requisiti di installabilità può richiedere diversi secondi, l'installabilità stessa potrebbe non essere disponibile non appena viene ricevuta una risposta all'URL.

Nota: la procedura per disinstallare una PWA è diversa a seconda della combinazione di sistema operativo e browser. Nella maggior parte dei casi, l'app può essere disinstallata come qualsiasi altra app specifica per piattaforma. in altre situazioni, la finestra PWA offre un menu con un'opzione di disinstallazione. L'eliminazione dell'icona potrebbe non cancellare lo spazio di archiviazione utilizzato da una PWA.

Installazione desktop

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 di seguito), per indicare che il sito corrente è installabile.

Quando un utente interagisce con un sito, potrebbe visualizzare un popup come quello riportato di seguito che invita gli utenti a installarlo come app.

Nel menu a discesa del browser è presente anche il pulsante "Installa " elemento che l'utente può utilizzare:

Nota: i browser basati su Chromium sul computer ti consentono di visualizzare tutte le PWA installate con quel browser utilizzando about:apps.

Sui sistemi operativi desktop sono supportate solo le modalità di visualizzazione autonome e con UI minima.

PWA installate su computer:

• Avere un'icona nel menu Start o nella schermata Start sui PC Windows, nel dock o sul desktop nelle GUI di Linux, nel Launchpad di macOS o in Avvio applicazioni di Chromebook.
• Hanno un'icona nei commutatori e nei dock delle app quando l'app è attiva, è stata utilizzata di recente o è aperta in background.
• Compaiono nella ricerca dell'app, ad esempio, ricerca su Windows o Spotlight su macOS.
• Puoi impostare un numero di badge sulle icone per indicare le nuove notifiche. Questo viene fatto con l'API Badging.
• Consente di impostare un menu contestuale per l'icona con Scorciatoie app.
• Non può essere installata due volte con lo stesso browser.

di Gemini Advanced.

Nota: l'installazione potrebbe sbloccare altre funzionalità non disponibili per le PWA in esecuzione all'interno della scheda del browser. Ne parleremo più diffusamente nel capitolo Funzionalità.

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

Installazione di iOS e iPadOS

Su iOS e iPadOS non esiste un prompt del browser per installare la PWA. Su queste piattaforme, le PWA sono note anche come 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 nella sezione <head> del codice 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 nella schermata Home sarà uno screenshot della 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 sulla schermata Home.

Ecco i passaggi per aggiungere app alla schermata Home:

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 Aggiungi. Su iOS e iPadOS, i preferiti di siti web e PWA hanno lo stesso aspetto nella schermata Home.

Su iOS e iPadOS è supportata solo la modalità di visualizzazione autonoma. Pertanto, se utilizzi una modalità UI minima, verrà utilizzata una scorciatoia del browser. se usi la modalità a schermo intero, sarà di nuovo disponibile la modalità autonoma.

Attenzione : sui dispositivi Apple, puoi installare la stessa PWA più volte. ciascuna installazione avrà il proprio spazio di archiviazione isolato e verrà trattata come un'app diversa.

PWA installate su iOS e iPadOS:

• Vengono visualizzate nella schermata Home, nella ricerca di Spotlight, nei Suggerimenti di Siri e nella ricerca nella Raccolta di app.
• Non vengono visualizzati nelle cartelle delle categorie della Galleria app.
• Non supporta funzionalità quali i badge e le scorciatoie app.

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

Quando gli utenti utilizzano la PWA, non utilizzano un'istanza dell'app Safari (come utilizzano un'istanza di Chrome per farlo), utilizzano un'istanza nota come Web.app, quindi dovrebbero esserci lievi differenze tra la PWA visualizzata in Safari e una finestra della PWA. Sia Safari che Web.app utilizzano lo stesso core di WebKit e lo stesso runtime JavaScript, ma vengono eseguiti in processi diversi e possono avere implementazioni diverse, ad esempio avere uno spazio di archiviazione isolato.

Installazione su Android

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

• Varianti nel testo della voce di menu per l'installazione, ad esempio Installa o Aggiungi a schermata Home.
• Finestre di dialogo di installazione dettagliate.

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

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 provider 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 Samsung, ad esempio smartphone o tablet Galaxy. Insieme, questi rappresentano la maggior parte degli utenti Android.

Quando un utente installa una PWA da Google Chrome e viene utilizzato un WebAPK, il server di minting "mentre" (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 fornitori attendibili (Play Services o Samsung), il telefono lo installa senza disattivare la sicurezza, come avviene con qualsiasi app proveniente dallo store. Non è necessario installare tramite sideload l'app.

PWA installate tramite WebAPK:

• Avere un'icona in Avvio applicazioni e nella schermata Home.
• Vengono visualizzate in Impostazioni, App.
• Può avere diverse funzionalità, come l'applicazione di badge, le scorciatoie delle app e l'acquisizione di link all'interno del sistema operativo.
• Può aggiornare l'icona e i metadati dell'app.
• Non può essere installato due volte.

di Gemini Advanced.

In qualità di sviluppatore di PWA, non hai bisogno di creare o firmare alcun pacchetto quando utilizzi un WebAPK. Viene gestito in modo trasparente tra browser, dispositivo e server di minting.

Scorciatoie

Sebbene i webAPK offrano la migliore esperienza agli utenti Android, non sempre è possibile crearli. Quando non è possibile, i browser tornano alla creazione di una scorciatoia per il sito web. Poiché Firefox, Microsoft Edge, Opera, Brave e Samsung Internet (sui dispositivi non Samsung) non dispongono di server di minting affidabili, verranno create delle scorciatoie. Lo farà anche Google Chrome se il servizio di minting non è disponibile o la tua PWA non soddisfa i requisiti di installazione.

PWA installate con scorciatoie:

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

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 di questi dispositivi, come il browser Huawei, possono installare PWA pacchettizzati come QuickApp, anche se non utilizzi lo stack QuickApp.

Quando la PWA viene installata come QuickApp, gli utenti avranno un'esperienza simile a quella che avrebbero con le scorciatoie, ma con un'icona contrassegnata dall'icona QuickApp (un'immagine fulmine). L'app potrà essere lanciata anche dal Centro QuickApp.

Richiesta di installazione

Nei browser basati su Chromium su computer e dispositivi Android, è possibile attivare la finestra di dialogo di installazione del browser dalla PWA. Il capitolo relativo alla richiesta di installazione illustra i pattern per effettuare questa operazione e le modalità di implementazione.

Avviso : se fornisci istruzioni all'utente, ricorda che le voci di menu i nomi variano in base alla lingua.

Cataloghi e store di app

La tua PWA può anche essere elencata in cataloghi di app e store per aumentarne la copertura e consentire agli utenti di trovarla nello stesso posto 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 (come 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 di app e gli store che supportano la pubblicazione di una PWA sono:

• Google Play Store per Android e ChromeOS, utilizzando un'Attività web attendibile.
• Apple App Store per iOS, macOS e iPadOS, con WKWebView e domini collegati ad app.
• Microsoft Store per Windows 10 e 11, utilizzando i pacchetti APPX.
• Samsung Galaxy Store, utilizzando il server di minting Samsung WebAPK.
• Huawei AppGallery, utilizzando un container QuickApp per l'applicazione HTML.

Se vuoi scoprire di più su come pubblicare una PWA in cataloghi e negozi di app, consulta Bubble Wrap CLI e PWA Builder.

Avviso : alcuni cataloghi di app e alcuni store hanno requisiti tecnici o aziendali che possono essere accettati per la pubblicazione della PWA. Controlla i requisiti di ogni negozio prima di iniziare.

Risorse

• Cosa serve per essere installabili
• WebAPK su Android
• Pattern per promuovere l'installazione di PWA
• Usare una PWA nell'app per Android
• Pubblicare la tua app web progressiva su Google Play
• Inviare la PWA al Microsoft Store
• Pubblicazione di una PWA nell'App Store
• WebKit: domini associati all'app