Utilizza il riquadro Applicazione per ispezionare, modificare ed eseguire il debug di manifest delle app web, service worker e cache dei service worker.
Le app web progressive (PWA) sono applicazioni moderne di alta qualità create utilizzando la tecnologia web. Le PWA offrono funzionalità simili a quelle delle app per iOS, Android e desktop. Sono:
- Affidabile anche in condizioni di rete instabili.
- Installabile per avviare piattaforme di sistemi operativi, ad esempio la cartella Applicazioni su Mac OS X, il menu Start su Windows e la schermata Home su Android e iOS.
- Vengono visualizzati 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 aiuto per gli altri riquadri, consulta l'ultima sezione di questa guida, Guide per gli altri riquadri dell'applicazione.
Riepilogo
- Utilizza la scheda File per esaminare il file manifest dell'app web.
- Utilizza la scheda Service worker per eseguire una serie di attività correlate al service worker, come annullare la registrazione o l'aggiornamento di un servizio, emulare eventi push, andare offline o arrestare un service worker.
- Visualizza la cache del service worker dalla scheda Spazio di archiviazione cache.
- Annulla la registrazione di un service worker e cancella tutto lo spazio di archiviazione e le cache con un solo clic su un pulsante dalla scheda Cancella spazio di archiviazione.
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 file manifest dell'app web. Il file manifest definisce l'aspetto dell'app nella schermata Home, dove indirizzare l'utente durante l'avvio dalla schermata Home e l'aspetto dell'app all'avvio.
Dopo aver configurato il file manifest, puoi utilizzare la scheda File manifest del riquadro Applicazione per ispezionarlo.
- Per esaminare il codice sorgente del manifest, fai clic sul link sotto l'etichetta Manifest dell'app
(
manifest.webmanifestnello screenshot sopra). - Le sezioni Identità e Presentazione mostrano semplicemente i campi dell'origine manifest in modo più intuitivo.
- La sezione Gestori di protocollo ti consente di testare la registrazione della tua PWA come gestore del protocollo URL con un semplice clic. Per saperne di più, vedi Testare la registrazione del gestore di protocollo URL.
- La sezione Icone mostra tutte le icone che hai specificato e ti consente di controllarne le maschere.
- L'insieme di sezioni Scorciatoia n. N mostra informazioni su tutti gli oggetti delle scorciatoie.
- La serie di sezioni Screenshot #N mostra gli screenshot per un'interfaccia utente di installazione più completa dell'app.
Inoltre, se DevTools rileva un errore, ad esempio un'icona che non può essere caricata, la scheda File manifest mostra una sezione Installabilità che descrive l'errore.
Visualizza e controlla le icone mascherabili
La sezione Icone della scheda Manifest mostra tutte le icone dell'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 tagliare le icone in modo che sia visibile solo l'area di sicurezza minima, seleziona 
Mostra solo l'area di sicurezza minima per le icone mascherabili.
Se il tuo intero logo è visibile nell'area di sicurezza, non devi fare nient'altro.
Attiva l'installazione
Chrome ti consente di abilitare e promuovere l'installazione della PWA direttamente all'interno della sua interfaccia utente. Scopri come offrire la tua esperienza di installazione in-app.
Per attivare il flusso di installazione della 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 non può simulare il flusso di lavoro per i dispositivi mobili. Nota come il browser Chrome desktop mostra il pulsante di installazione nella barra degli indirizzi, anche se DevTools è in Modalità dispositivo. Se invece riesci ad aggiungere correttamente la tua app al computer, funzionerà anche per i dispositivi mobili.
Se vuoi testare l'autentica esperienza mobile, puoi connettere un dispositivo mobile reale a
DevTools tramite il debug remoto. Per attivare l'installazione sul dispositivo mobile connesso, apri il menu con i tre puntini 
e fai clic su 
Installa app.
Controllare le scorciatoie
Le scorciatoie delle app ti consentono di fornire un accesso rapido a una serie di azioni comuni di cui gli utenti hanno spesso bisogno.
Per controllare le scorciatoie definite nel file manifest, scorri fino alle sezioni Scorciatoia n. N della scheda File.
Ispeziona gli screenshot per avere una UI di installazione più completa
Quando aggiungi una descrizione e un insieme di screenshot al file manifest, la finestra di dialogo di installazione dell'app diventa più completa.
Per esaminare gli screenshot, scorri fino alle sezioni Screenshot n. della scheda File.
Testa la registrazione del gestore del protocollo 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 dei gestori del protocollo degli URL per le PWA.
Per testare il gestore:
- Apri DevTools 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 ora registrato la PWA come gestore per il protocollo
web+coffee. - Nella sezione Application (Applicazione) > Manifest (Manifesto) > Protocol Handler (Gestione protocollo), inserisci l'URL che vuoi che venga testato dal gestore e fai clic su Test protocol (Testa protocollo).
In questo esempio, l'handler può elaborare americano,chaielatte-macchiato. - Quando Chrome ti chiede se può aprire l'app, conferma facendo clic su Apri gestore protocollo.
- Nella finestra di dialogo successiva, consenti all'app di gestire i link
web+coffee.
Se il gestore elabora correttamente il collegamento, nell'app viene visualizzata l'immagine di una tazza di caffè aperta.
Service worker
I worker di servizio sono una tecnologia fondamentale nella futura piattaforma web. Si tratta di script che il browser esegue in background, separati 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 in DevTools per ispezionare e eseguire il debug dei service worker.
- Se nella pagina attualmente aperta è installato un worker di servizio, lo vedrai elencato in questa scheda. Ad esempio, nello screenshot sopra è installato un worker di servizio per l'ambito
https://airhorner.com/. - La casella di controllo
Offline imposta DevTools in modalità offline. Questo è equivalente alla modalità offline disponibile nel riquadro Rete o all'opzione Go offlinenel menu di comando. - La casella di controllo
Aggiorna al ricaricamento obbliga il service worker ad aggiornarsi a ogni caricamento pagina. - La casella di controllo
Bypassa per la rete ignora il service worker e forza il browser a rivolgersi alla rete per le risorse richieste. - Il link Richieste di rete ti indirizza 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 servizio worker specificato.
- Il pulsante Push emula una notifica push senza un 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 la sezione Cancella dati archiviati per scoprire come annullare la registrazione di un worker di servizio e cancellare dati archiviati e cache con un solo clic.
- 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, vieni indirizzato all'origine del service worker.
- La riga Stato indica lo stato del service worker. Il numero in questa riga (
#16nello screenshot) indica il numero di volte in cui il servizio worker è stato aggiornato. 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 servizio worker è fermo) o un link Interrompi (se il servizio worker è in esecuzione). I worker di servizio sono progettati per essere interrotti e avviati dal browser in qualsiasi momento. L'arresto esplicito del service worker tramite il link di interruzione può simulare questa situazione. Interrompere il tuo worker di servizio è un ottimo modo per testare il comportamento del codice quando il worker di servizio viene riavviato. Spesso rivela bug dovuti a ipotesi errate sullo stato globale persistente. - La riga Clienti indica l'origine a cui è associato l'ambito del servizio worker. Il pulsante Fai attenzione è utile soprattutto quando hai più worker di servizio registrati. Se fai clic sul pulsante di elemento attivo accanto a un service worker in esecuzione in un'altra scheda, Chrome imposta lo stato attivo su quella scheda.
La tabella Ciclo di aggiornamento mostra le attività del service worker e i relativi tempi di esecuzione, ad esempio installazione, attesa e attivazione. Per visualizzare il timestamp esatto di ogni attività, fai clic sui pulsanti
Espandi.
Per saperne di più, consulta Il ciclo di vita del service worker.
Se il service worker causa degli errori, nella scheda Service worker viene visualizzata l'icona Errore 
con il numero di errori accanto alla riga Origine.
Il link con il numero ti reindirizza alla console con tutti gli errori registrati.
Per visualizzare le informazioni su tutti i service worker, fai clic su Visualizza tutte le registrazioni nella parte inferiore della scheda Service worker. Questo link rimanda a chrome://serviceworker-internals/?devtools, dove puoi eseguire ulteriormente il debug dei tuoi service worker.
Cache dei service worker
La scheda Spazio di archiviazione della cache fornisce un elenco di sola lettura delle risorse memorizzate nella cache utilizzando l'API Cache (service worker).
Tieni presente che la prima volta che apri una cache e vi aggiungi una risorsa, DevTools potrebbe 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 Spazio di archiviazione cache.
Utilizzo della quota
Alcune risposte nella scheda Archiviazione cache potrebbero essere contrassegnate come "opache". Si riferisce a una risposta recuperata da un'origine diversa, ad esempio da un'API remota o da una CDN, quando CORS non è attivato.
Per evitare la perdita di informazioni tra domini, viene aggiunta una spaziatura interna significativa alle dimensioni
di una risposta opaca utilizzata per calcolare i limiti della quota di archiviazione (ad esempio se viene lanciata un'eccezione QuotaExceeded) e segnalata dall'API navigator.storage.
I dettagli di questa spaziatura interna variano da browser a browser, ma per Google Chrome ciò significa che la dimensione minima che ogni singola risposta opaca memorizzata nella cache contribuisce all'utilizzo dello spazio di archiviazione complessivo è di circa 7 MB. Devi tenere presente questo aspetto al momento di determinare quante risposte opache vuoi memorizzare nella cache, poiché potresti facilmente superare i limiti della quota di archiviazione molto prima di quanto ti aspetteresti in base alle dimensioni effettive delle risorse opache.
Guide correlate:
- Stack Overflow: quali limitazioni si applicano alle risposte opache?
- Workbox: informazioni sulla quota di spazio di archiviazione
Cancella archivio
La scheda Libera spazio è una funzionalità molto utile per lo sviluppo di app web progressive. Questa scheda consente di annullare la registrazione dei worker di servizio e di svuotare tutte le cache e lo spazio di archiviazione con un solo clic. Per saperne di più, consulta la sezione di seguito.
Guide correlate:
Altre guide al riquadro dell'applicazione
Consulta le guide riportate di seguito per ulteriori informazioni sugli altri riquadri del riquadro Application (Richiesta).
Guide correlate: