Esegui il debug di app web progressive

Utilizza il riquadro Applicazione per esaminare, modificare ed eseguire il debug di manifest di app web, service worker e cache dei service worker.

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. Questi 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.
• Fatti trovare nei sensori 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 sugli altri riquadri, consulta l'ultima sezione di questa guida, Altre guide del riquadro delle applicazioni.

Riepilogo

• Usa la scheda Manifest per esaminare il manifest della tua app web.
• Utilizza la scheda Service worker per un'intera gamma di attività relative ai worker, come annullare la registrazione o aggiornare un servizio, emulare eventi push, passare alla modalità offline o interrompere un worker.
• Visualizza la cache del service worker dalla scheda Archiviazione cache.
• Annulla la registrazione di un service worker e svuota tutto lo spazio di archiviazione e le cache con un solo clic sulla scheda Cancella dati archiviati.

File manifest dell'app web

Se vuoi che i tuoi 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 all'avvio dalla schermata Home e l'aspetto dell'app all'avvio.

Una volta configurato il manifest, puoi utilizzare la scheda Manifest del riquadro Applicazione per esaminarlo.

• Per esaminare l'origine del file manifest, fai clic sul link sotto l'etichetta Manifest dell'app (manifest.webmanifest nello screenshot in alto).
• Le sezioni Identità e Presentazione mostrano semplicemente i campi dell'origine del manifest in un modo più facile da usare.
• La sezione Gestori di protocollo ti consente di testare la registrazione del gestore di protocolli URL della tua PWA con un clic. Per scoprire di più, consulta Testare la registrazione del gestore di protocollo URL.
• La sezione Icone mostra tutte le icone che hai specificato e ti consente di verificarne le maschere.
• L'insieme di sezioni Scorciatoia #N mostra informazioni su tutti gli oggetti delle scorciatoie.
• L'insieme di sezioni Screenshot #N mostra gli screenshot per un'interfaccia utente di installazione più completa della tua app.

Inoltre, se DevTools rileva un errore, ad esempio un'icona che non può essere caricata, nella scheda Manifest viene visualizzata una sezione Installabilità che descrive l'errore.

Visualizza e seleziona le icone mascherabili

La sezione Icone della scheda Manifest mostra tutte le icone della tua applicazione. In questa sezione puoi anche controllare le aree sicure per le icone mascherabili, ovvero 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 nell'area di sicurezza è visibile l'intero logo, non devi fare altro.

Attiva l'installazione

Chrome ti consente di attivare e promuovere l'installazione della tua PWA direttamente nella sua interfaccia utente. Scopri come offrire la tua esperienza di installazione in-app.

Per attivare il flusso di installazione della PWA:

1. Apri la pagina di destinazione della PWA in Chrome.

2. Sul lato destro della barra degli indirizzi in alto, fai clic su Installa.

   

3. Segui le istruzioni sullo schermo.

La funzionalità Installa app non può simulare il flusso di lavoro per i dispositivi mobili. Osserva come il browser Chrome per computer desktop mostra il pulsante di installazione nella barra degli indirizzi, anche se DevTools è in modalità dispositivo. Tuttavia, se riesci ad aggiungere la tua app al desktop, funzionerà anche per i dispositivi mobili.

Se vuoi provare l'esperienza mobile autentica, puoi connettere un dispositivo mobile reale a DevTools tramite il debug remoto. Per attivare l'installazione sul dispositivo mobile connesso, apri il menu con tre puntini di e fai clic su Installa app.

Ispeziona scorciatoie

Le scorciatoie app consentono di accedere rapidamente ad alcune azioni comuni di cui gli utenti hanno bisogno più spesso.

Per esaminare le scorciatoie definite nel file manifest, scorri fino alle sezioni Scorciatoia #N della scheda Manifest.

Ispeziona gli screenshot per una UI di installazione più completa

Quando aggiungi una descrizione e una serie di screenshot al file manifest, la tua app riceve una finestra di dialogo di installazione più completa.

Per esaminare gli screenshot, scorri fino alle sezioni Screenshot N della scheda Manifest.

Registrazione del gestore di protocollo URL di test

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 del protocollo URL per le PWA.

Per testare il gestore:

1. Apri DevTools nella pagina di destinazione della PWA. Ad esempio, dai un'occhiata a questa PWA demo.
2. 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.
3. Nella sezione Applicazione > Manifest > Gestore di protocollo, inserisci l'URL che vuoi venga testato dal gestore e fai clic su Verifica protocollo. In questo esempio, il gestore può elaborare americano, chai e latte-macchiato.
4. Quando Chrome ti chiede se può aprire l'app, conferma facendo clic su Apri gestore di protocollo.
5. Nella finestra di dialogo successiva, consenti all'app di gestire i link web+coffee.

Se il gestore elabora correttamente il link, viene visualizzata l'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, separati da una pagina web. Questi script consentono di accedere a funzionalità che non richiedono una pagina web o interazione da parte dell'utente, come notifiche push, sincronizzazione in background ed esperienze offline.

Guide correlate:

• Introduzione ai Service worker
• Notifiche push: tempestive, pertinenti e precise

La scheda Service worker nel riquadro Applicazione è l'area principale in DevTools per esaminare i service worker ed eseguirne il debug.

• Se nella pagina attualmente aperta è installato un service worker, lo troverai 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 DevTools in modalità offline. Equivale alla modalità offline disponibile nel riquadro Rete o all'opzione Go offline nel menu Comando.
• La casella di controllo Aggiorna al ricaricamento impone al service worker di eseguire l'aggiornamento a ogni caricamento pagina.
• La casella di controllo Escludi per la rete ignora il service worker e obbliga il browser ad accedere alla rete per le risorse richieste.
• Il link Richieste di rete consente di accedere al riquadro Rete contenente un elenco delle 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 un payload (noto anche come tickle).
• Il pulsante Sincronizza emula un evento di sincronizzazione in background.
• Il link Annulla registrazione consente di annullare la registrazione del service worker specificato. Dai un'occhiata a Cancella dati archiviati per annullare la registrazione di un service worker e cancellare lo spazio di archiviazione e le cache con un singolo 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. Facendo clic sul link, vieni indirizzato all'origine del worker di servizio.
• La riga Status (Stato) indica lo stato del service worker. Il numero su questa riga (#16 nello screenshot) indica quante volte il service worker è stato aggiornato. Se attivi la casella di controllo Aggiorna al ricaricamento, noterai che il numero viene incrementato a ogni caricamento pagina. Accanto allo stato sarà presente un link start (se il service worker è arrestato) o un link di stop (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 tramite il link stop può simulare l'operazione. L'arresto del service worker è un ottimo modo per verificare il comportamento del codice al suo riavvio. Rivela spesso bug dovuti ad ipotesi errate sullo stato globale persistente.
• La riga Client indica l'origine a cui è limitato l'ambito del service worker. Il pulsante con stato attivo è utile soprattutto quando hai più service worker registrati. Se fai clic sul pulsante con stato attivo accanto a un service worker in esecuzione in una scheda diversa, Chrome si concentra su quella scheda.

• La tabella Ciclo di aggiornamento mostra le attività del service worker e il relativo tempo trascorso, ad esempio installazione, attesa e attivazione. Per visualizzare il timestamp esatto di ciascuna attività, fai clic sui pulsanti Espandi .

  

  Per ulteriori informazioni, consulta Il ciclo di vita dei service worker.

Se il service worker causa errori, nella scheda Service worker viene visualizzata l'icona Errore con il numero di errori accanto alla riga Origine. Il link con il numero apre la console con tutti gli errori registrati.

Per visualizzare le informazioni su tutti i service worker, fai clic su Vedi 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 service worker.

Cache dei service worker

La scheda Archiviazione cache fornisce un elenco di sola lettura delle risorse che sono state memorizzate nella cache utilizzando l'API Cache (service worker)

Tieni presente che la prima volta che apri una cache e aggiungi una risorsa, DevTools potrebbe non rilevare la modifica. Ricarica la pagina; dovresti vedere la cache.

Se hai due o più cache aperte, le vedrai elencate sotto l'elenco a discesa Archiviazione cache.

Utilizzo della quota

Alcune risposte all'interno della scheda Archiviazione cache potrebbero essere contrassegnate come "opache". Si riferisce a 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 aggiunta una significativa spaziatura interna alle dimensioni di una risposta opaca utilizzata per calcolare i limiti della quota di archiviazione (ovvero se viene generata un'eccezione QuotaExceeded) e riportata 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 quando determini quante risposte opache vuoi memorizzare nella cache, poiché potresti facilmente superare i limiti della quota di spazio di archiviazione molto prima di quanto ti aspetti altrimenti in base alle dimensioni effettive delle risorse opache.

Guide correlate:

• Stack Overflow: quali limitazioni si applicano alle risposte opache?
• Casella di lavoro: Informazioni sulla quota di spazio di archiviazione

Libera spazio di archiviazione

La scheda Cancella dati archiviati è molto utile durante lo sviluppo di app web progressive. Questa scheda consente di annullare la registrazione dei service worker e di svuotare tutte le cache e lo spazio di archiviazione con un singolo clic. Per saperne di più, consulta la sezione di seguito.

Guide correlate:

• Libera spazio di archiviazione

Altre guide del riquadro dell'applicazione

Consulta le guide qui sotto per ricevere ulteriore assistenza sugli altri riquadri del riquadro Applicazione.

Guide correlate:

• Esaminare le risorse della pagina
• Ispeziona e gestisci lo spazio di archiviazione locale e le cache