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.

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.

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.

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

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

Guida interna al prodotto di Google Chrome che suggerisce l'installazione della PWA.

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

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

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.

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.

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.

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).

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 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:

di Gemini Advanced.

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.

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 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.

QuickApps su una schermata Home di Huawei o ZTE.

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.

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:

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

Risorse