Utilizza il riquadro Applicazione per controllare, modificare ed eseguire il debug dei manifest delle app web, dei service worker e delle relative cache.
Le app web progressive (PWA) sono applicazioni moderne e di alta qualità create utilizzando la tecnologia web. Le PWA offrono funzionalità simili alle app per iOS, Android e desktop. Sono:
- Affidabili anche in condizioni di rete instabili.
- Installabili sulle superfici di avvio dei sistemi operativi, ad esempio la cartella Applicazioni su Mac OS X, il menu Start su Windows e la schermata Home su Android e iOS.
- Visualizzate nei selettori di attività, nei motori di ricerca dei dispositivi come Spotlight e nei fogli di condivisione dei contenuti.
Questa guida illustra solo le funzionalità delle app web progressive del riquadro Applicazione. Se hai bisogno di assistenza per gli altri riquadri, consulta l'ultima sezione di questa guida, Altre guide al riquadro Applicazione.
Riepilogo
- Utilizza la scheda Manifest per controllare il manifest dell'app web.
- Utilizza la scheda Service worker per una serie di attività correlate ai service worker, come annullare la registrazione o aggiornare un servizio, emulare eventi push, passare alla modalità offline o arrestare un service worker.
- Visualizza la cache del service worker dalla scheda Archiviazione cache.
- Annulla la registrazione di un service worker e cancella tutti gli spazi di archiviazione e le cache con un solo clic sul pulsante dalla scheda Cancella archivio.
Manifest dell'app web
Se vuoi che gli utenti possano aggiungere la tua app alla cartella Applicazioni su Mac OS X, al menu Start su Windows e alla schermata Home su Android e iOS, devi avere un manifest dell'app web. Il manifest definisce l'aspetto dell'app nella schermata Home, dove indirizzare l'utente quando la avvia dalla schermata Home e l'aspetto dell'app all'avvio.
Una volta configurato il manifest, puoi utilizzare la scheda Manifest del riquadro Applicazione per controllarlo.
- Per visualizzare l'origine del manifest, fai clic sul link sotto l'etichetta Manifest dell'app (
manifest.webmanifestnello screenshot sopra). - Le sezioni Identità e Presentazione mostrano i campi dell'origine del manifest in modo più intuitivo.
- La sezione Gestori di protocolli ti consente di testare la registrazione del gestore di protocolli URL della tua PWA con un clic su un pulsante. Per saperne di più, consulta Testare la registrazione del gestore di protocolli URL.
- La sezione Icons mostra tutte le icone che hai specificato e ti consente di controllarne le maschere.
- Il set di sezioni Scorciatoia #N mostra informazioni su tutti gli oggetti di scorciatoia.
- Il set di sezioni Screenshot #N mostra gli screenshot per un'interfaccia utente di installazione più completa della tua app.
Inoltre, se gli Strumenti per sviluppatori rilevano un errore, ad esempio un'icona che non può essere caricata, la scheda Manifest mostra una sezione Installabilità che descrive l'errore.
Visualizzare e controllare le icone mascherabili
La sezione Icone della scheda Manifest mostra tutte le icone della tua applicazione. In questa sezione puoi anche controllare le aree di sicurezza per le icone mascherabili, il formato delle icone che si adattano alle piattaforme.
Per ritagliare le icone in modo che sia visibile solo l'area di sicurezza minima, seleziona la casella di controllo 
Mostra solo l'area di sicurezza minima per le icone mascherabili.
Se l'intero logo è visibile nell'area di sicurezza, non devi fare altro.
Attivare l'installazione
Chrome ti consente di attivare e promuovere l'installazione della tua PWA direttamente all'interno della sua interfaccia utente. Scopri come fornire la tua esperienza di installazione in-app.
Per attivare il flusso di installazione della tua PWA:
- Apri la pagina di destinazione della PWA in Chrome.
Sul lato destro della barra degli indirizzi in alto, fai clic su
Installa.
Segui le istruzioni sullo schermo.
La funzionalità Installa app (o Aggiungi alla schermata Home su alcuni dispositivi) non può simulare il flusso di lavoro per i dispositivi mobili. Nota che il browser Chrome per computer mostra il pulsante di installazione nella barra degli indirizzi, anche se gli Strumenti per sviluppatori sono in modalità dispositivo. Tuttavia, se riesci ad aggiungere l'app al computer, funzionerà anche sui dispositivi mobili.
Se vuoi provare l'esperienza mobile autentica, puoi collegare un dispositivo mobile reale a
Strumenti per sviluppatori tramite il debug remoto. Per attivare l'installazione sul dispositivo mobile collegato, apri il menu con tre puntini 
e fai clic su 
Installa app (o Aggiungi alla schermata Home).
Controllare le scorciatoie
Le scorciatoie delle app ti consentono di fornire un accesso rapido a una serie di azioni comuni che gli utenti utilizzano di frequente.
Per controllare le scorciatoie che hai definito nel file manifest, scorri fino alle sezioni Scorciatoia #N della scheda Manifest.
Controllare gli screenshot per un'interfaccia utente di installazione più completa
Quando aggiungi una descrizione e un insieme di screenshot al file manifest, l'app ottiene una finestra di dialogo di installazione più completa.
Per controllare gli screenshot, scorri fino alle sezioni Screenshot #N della scheda Manifest.
Testare la registrazione del gestore di protocolli URL
Le PWA possono gestire i link che utilizzano un protocollo specifico per un'esperienza più integrata. Per scoprire come creare un gestore, consulta Registrazione del gestore di protocolli URL per le PWA.
Per testare il gestore:
- Apri gli Strumenti per sviluppatori nella pagina di destinazione della tua PWA. Ad esempio, dai un'occhiata a questa PWA demo.
- Dalla pagina demo, installa la PWA e ricarica l'app dopo l'installazione. Il browser ha registrato la PWA come gestore per il protocollo
web+coffee. - Nella sezione Applicazione > Manifest > Gestore di protocolli, inserisci l'URL che vuoi che il gestore testi e fai clic su Testa protocollo.
In questo esempio, il gestore può elaborare americano,chaielatte-macchiato. - Quando Chrome ti chiede se può aprire l'app, conferma facendo clic su Apri gestore di protocolli.
- Nella finestra di dialogo successiva, consenti all'app di gestire i link
web+coffee
Se il gestore elabora correttamente il link, vedrai un'immagine di una tazza di caffè aperta nell'app.
Service worker
I service worker sono una tecnologia fondamentale nella futura piattaforma web. Sono script che il browser esegue in background, separatamente da una pagina web. Questi script ti consentono di accedere a funzionalità che non richiedono una pagina web o l'interazione dell'utente, come notifiche push, sincronizzazione in background ed esperienze offline.
Guide correlate:
La scheda Service worker nel riquadro Applicazione è il luogo principale degli Strumenti per sviluppatori per controllare ed eseguire il debug dei service worker.
- Se un service worker è installato nella pagina attualmente aperta, lo vedrai elencato in questa scheda. Ad esempio, nello screenshot sopra è presente un service worker installato per l'ambito di
https://airhorner.com/. - La casella di controllo
Offline mette gli Strumenti per sviluppatori in modalità offline. Questa modalità è equivalente alla modalità offline
disponibile dal riquadro Rete o all'opzione Go offlinenel menu Comando. - La casella di controllo
Aggiorna al ricaricamento forza l'aggiornamento del service worker a ogni caricamento pagina. - La casella di controllo
Ignora per la rete ignora il service worker e forza il browser a utilizzare
la rete per le risorse richieste. - Il link Richieste di rete ti porta al riquadro Rete con un elenco di richieste intercettate relative al service worker (filtro
is:service-worker-intercepted). - Il link Aggiorna esegue un aggiornamento una tantum del service worker specificato.
- Il pulsante Push emula una notifica push senza payload (nota anche come tickle).
- Il pulsante Sincronizza emula un evento di sincronizzazione in background.
- Il link Annulla registrazione annulla la registrazione del service worker specificato. Consulta Cancella archivio per scoprire come annullare la registrazione di un service worker e cancellare l'archivio e le cache con un solo clic su un pulsante.
- La riga Origine indica quando è stato installato il service worker attualmente in esecuzione. Il link è il nome del file di origine del service worker. Se fai clic sul link, vai all'origine del service worker.
- La riga Stato indica lo stato del service worker. Il numero in questa riga (
#16nello screenshot) indica quante volte è stato aggiornato il service worker. Se attivi la
casella di controllo Aggiorna al ricaricamento, noterai che il numero aumenta a ogni caricamento pagina.
Accanto allo stato vedrai un link Avvia (se il service worker è arrestato) o un link Arresta (se il service worker è in esecuzione). I service worker sono progettati per essere arrestati e avviati dal browser in qualsiasi momento. L'arresto esplicito del service worker utilizzando il link Arresta può simulare questa operazione. L'arresto del service worker è un ottimo modo per testare il comportamento del codice quando il service worker viene riavviato. Spesso rivela bug dovuti a ipotesi errate sullo stato globale persistente. - La riga Client indica l'origine a cui è limitato l'ambito del service worker. Il pulsante Metti a fuoco è utile soprattutto quando hai più service worker registrati. Se fai clic sul pulsante Metti a fuoco accanto a un service worker in esecuzione in un'altra scheda, Chrome mette a fuoco quella scheda.
La tabella Ciclo di aggiornamento mostra le attività del service worker e i relativi tempi trascorsi, ad esempio installazione, attesa e attivazione. Per visualizzare il timestamp esatto di ogni attività, fai clic sui pulsanti
Espandi.
Per saperne di più, consulta Ciclo di vita del service worker.
Se il service worker causa errori, la scheda Service worker mostra un'icona 
Errore con il numero di errori accanto alla riga Origine.
Il link con il numero ti porta alla Console con tutti gli errori registrati.
Per visualizzare informazioni su tutti i service worker, fai clic su Visualizza tutte le registrazioni nella parte inferiore della scheda Service worker. Questo link ti porta a chrome://serviceworker-internals/?devtools, dove puoi eseguire il debug dei service worker.
Cache dei service worker
La scheda Archiviazione cache fornisce un elenco di risorse di sola lettura che sono state memorizzate nella cache utilizzando l'API (service worker) Cache.
Tieni presente che la prima volta che apri una cache e aggiungi una risorsa, gli Strumenti per sviluppatori potrebbero non rilevare la modifica. Ricarica la pagina e dovresti vedere la cache.
Se hai aperto due o più cache, le vedrai elencate sotto il menu a discesa Archiviazione cache.
Utilizzo quota
Alcune risposte nella scheda Archiviazione cache potrebbero essere contrassegnate come "opache". Si tratta di una risposta recuperata da un'origine diversa, ad esempio da una CDN o da un'API remota, quando CORS non è abilitato.
Per evitare la perdita di informazioni tra domini, viene aggiunto un padding significativo alle dimensioni di una risposta opaca utilizzata per il calcolo dei limiti della quota di spazio di archiviazione (ovvero se viene generata un'eccezione QuotaExceeded) e segnalata dall'API navigator.storage.
I dettagli di questo padding variano da browser a browser, ma per Google Chrome, ciò significa che la dimensione minima che una singola risposta opaca memorizzata nella cache contribuisce all'utilizzo complessivo dello spazio di archiviazione è di circa 7 megabyte. Tieni presente questo aspetto quando determini il numero di risposte opache da memorizzare nella cache, poiché potresti superare facilmente i limiti della quota di spazio di archiviazione molto prima di quanto ti aspetteresti in base alle dimensioni effettive delle risorse opache.
Guide correlate:
Cancella archivio
La scheda Cancella archivio è una funzionalità molto utile durante lo sviluppo di app web progressive. Questa scheda ti consente di annullare la registrazione dei service worker e cancellare tutte le cache e gli spazi di archiviazione con un solo clic su un pulsante. Consulta la sezione seguente per saperne di più.
Guide correlate:
Altre guide al riquadro Applicazione
Consulta le guide riportate di seguito per ulteriore assistenza sugli altri riquadri del riquadro Applicazione.
Guide correlate: