Data di pubblicazione: 19 agosto 2025
La gestione della navigazione comprende i metodi per controllare il modo in cui un'applicazione web progressiva (PWA) gestisce la navigazione degli utenti. Un componente fondamentale di questo è l'acquisizione della navigazione, il processo del browser che determina se fare clic su un link deve avviare la PWA installata o aprire una nuova scheda del browser.
Questa guida illustra la nuova versione dell'acquisizione della navigazione, disponibile a partire da Chrome 139. Sebbene il comportamento predefinito del browser sia adatto alla maggior parte dei casi, una comprensione più approfondita di queste tecniche di gestione e delle relative API è essenziale se vuoi creare l'esperienza più fluida per i tuoi utenti.
La sezione Controlli per gli sviluppatori spiega come personalizzare la navigazione per offrire la migliore esperienza di avvio possibile per la tua PWA.
Il nuovo comportamento predefinito
Per allinearsi alle preferenze degli utenti e ridurre gli attriti, Chrome sta standardizzando la gestione dei link. In precedenza, il comportamento era incoerente tra le piattaforme. I dispositivi mobili in genere danno la priorità all'avvio delle app installate, mentre i browser desktop aprono prima un link in una scheda prima di segnalare che un'app può gestirlo.
Il nuovo approccio unificato per l'acquisizione della navigazione apre automaticamente i link nella PWA installata corrispondente. I link verranno visualizzati in una scheda del browser solo se la PWA non è installata o se l'utente ha disattivato l'opzione. Questo nuovo comportamento è disponibile a partire da Chrome 139 per Windows, Mac e Linux, mentre il supporto di ChromeOS sarà disponibile in una release futura.
Il processo di gestione della navigazione
L'acquisizione della navigazione fa parte del processo di gestione della navigazione. Questo processo copre l'intero flusso, dall'azione iniziale dell'utente alle decisioni del browser e ai comportamenti risultanti configurati dallo sviluppatore:
- Azioni utente:include interazioni come clic o tocchi su link.
- Decisioni del browser: include attività e decisioni gestite dal browser, come i comportamenti predefiniti, ad esempio l'acquisizione della navigazione.
- Controlli per sviluppatori: include API web che consentono agli sviluppatori di indicare al browser come gestire attività specifiche.
L'interazione di questi elementi determina se la PWA si apre in una finestra autonoma o in una scheda del browser.
Un caso d'uso fondamentale per la gestione della navigazione si verifica quando un utente fa clic o tocca un link alla PWA installata da un'altra pagina del browser. L'esempio seguente illustra il caso di un utente che ha installato la PWA di Google Chat e fa clic su un link alla PWA da un invito di Google Calendar.
calendar.google.com.Azioni utente
Ogni azione dell'utente è costituita da tre elementi chiave: l'evento (ad esempio un clic o un tocco), la superficie in cui si svolge (ad esempio una pagina web o una scorciatoia sul desktop) e il tipo di link attivato (ad esempio un URL HTTPS). Ad esempio,
l'azione di un utente potrebbe essere fare clic su un link a
https://chat.google.com/meeting_room_id nell'ambito della PWA
di Google Chat da una pagina web su calendar.google.com.
Decisioni del browser
In seguito a un'azione dell'utente, ad esempio un clic nel passaggio precedente, il browser esegue il processo di acquisizione della navigazione per decidere se i link devono essere aperti in una scheda del browser o in una PWA installata. Consiste nei seguenti passaggi:
- Determina se la navigazione è acquisibile: in generale, una navigazione è considerata acquisibile se crea un nuovo frame e non si apre in un contesto di navigazione ausiliario.
- Identifica una PWA di controllo: se la navigazione è acquisibile, il browser tenta di trovare una PWA che "controlli" l'URL (rientra nell'ambito definito nel manifest dell'app web).
- Verifica la preferenza dell'utente: se viene trovata una PWA di controllo, il browser controlla la preferenza dell'utente. Se l'utente non ha disattivato l'opzione nelle impostazioni dell'app, viene avviata la PWA; in caso contrario, il link si apre in una nuova scheda del browser.
- Avvia la PWA: il browser avvia la PWA utilizzando l'algoritmo di gestione dell'avvio. Puoi influenzare questo aspetto utilizzando l'API Launch Handler, di cui parleremo di seguito.
Il seguente diagramma riassume questo processo:
Controlli per gli sviluppatori
Sebbene il processo di navigazione si basi principalmente sulle impostazioni predefinite del browser e sulle impostazioni utente, puoi utilizzare varie API per gestire aspetti specifici. A seguito del recente aggiornamento dell'acquisizione della navigazione, alcune API web di lunga data sono diventate più pertinenti.
API Launch Handler
Questa API entra in gioco quando il browser decide di avviare la PWA, consentendoti di controllare la modalità di avvio, ad esempio in una finestra nuova o esistente.
Definisci come viene avviata la PWA tramite il membro launch_handler nel manifest dell'app web, che include un campo secondario chiamato client_mode. Questo campo secondario
determina se deve essere utilizzata una finestra nuova o esistente e se deve
spostarsi. I valori consentiti per client_mode sono:
focus-existing: per gestire il link in una finestra dell'app esistente, ad esempio una PWA già in esecuzione in modalità autonoma.navigate-existing: in questa opzione, il contesto di navigazione con cui è stata eseguita l'interazione più recente in una finestra dell'app web viene indirizzato all'URL di destinazione dell'avvio.navigate-new: con questa opzione viene creato un nuovo contesto di navigazione in una finestra dell'app web per caricare l'URL di destinazione del lancio.
Utilizza launchQueue API per fornire parametri aggiuntivi e gestire casi speciali.
L'API Launch Handler è disponibile a partire da Chrome 110, ma diventa molto più
utile con l'aggiornamento dell'acquisizione della navigazione. Per saperne di più, consulta la
documentazione dell'API Launch Handler.
Altre API correlate
Oltre alla gestione del lancio, anche altre API possono svolgere un ruolo in questo processo, a seconda delle esigenze specifiche della tua app. Questi includono
gestori di protocolli URL,
che consentono a un'app web di registrare la propria capacità di gestire schemi URL oltre a
http e https standard (ad esempio, protocolli standard come mailto: o
personalizzati come web+music). Inoltre, l'API Web App Scope Extensions (attualmente
in fase di sviluppo) consente di estendere l'ambito della tua PWA per acquisire link da
altre origini, inclusi i sottodomini, in modo che quando un utente fa clic su un link da
un'origine associata, la PWA possa essere avviata. La loro trattazione approfondita non rientra nell'ambito di questo articolo, ma puoi consultare i link corrispondenti per saperne di più.
Caso d'uso: acquisizione dei link di Google Chat nella PWA di Chat
Per concludere, scopri come funzionano insieme i diversi elementi nell'esempio di un utente che fa clic su un link di Google Calendar a una stanza di Google Chat e ha già installato la PWA di Google Chat.
Prima dell'acquisizione della navigazione
Nel video seguente, un utente crea una riunione di Google Calendar e invita tre ospiti. L'app Calendar genera automaticamente un link di Google Chat che include tutti i partecipanti. Quando l'utente fa clic su questo link, la stanza virtuale si apre in una nuova scheda del browser. Un'icona nella barra degli indirizzi indica che è installata una PWA corrispondente, ma l'utente deve avviarla manualmente. Questo era il comportamento prima dell'aggiornamento dell'acquisizione della navigazione:
Dopo l'acquisizione della navigazione
Il seguente video mostra lo stesso flusso di lavoro dell'utente, ma ora con il nuovo
comportamento di acquisizione della navigazione. In questa versione, se fai clic sul link di Google Chat da Google Calendar, la chat room corrispondente si apre direttamente nella PWA installata. Inoltre, il team di Google Chat ha implementato la gestione dell'avvio
aggiungendo un attributo launch_handler al manifest dell'app web. Impostando il valore di client_mode su focus-existing, si assicurano che il link si apra in un'istanza esistente della PWA, se ne è già in esecuzione una. Se si elimina la latenza
coinvolta nell'apertura di una nuova scheda del browser e nell'attivazione del caricamento di una pagina, il
"tempo di interattività dell'utente" effettivo può essere, per progettazione, più veloce. Infatti,
Google Chat ha migliorato significativamente la latenza di navigazione eliminando la necessità
di avviare una nuova app.
Conclusioni e passaggi successivi
Questo articolo ha esaminato il nuovo comportamento di acquisizione della navigazione predefinito disponibile a partire da Chrome 139, concentrandosi su un caso d'uso comune di un utente che fa clic su un link HTTPS nell'ambito di una PWA installata. Puoi trovare maggiori informazioni e casi d'uso in Gestione della navigazione nelle PWA installate. Il seguente diagramma mostra la suddivisione completa dei casi d'uso, inclusi eventi utente, piattaforme e protocolli, con i risultati corrispondenti:
La gestione della navigazione è un aspetto cruciale, ma spesso trascurato, dell'esperienza utente della tua app, in quanto controlla il punto di ingresso. Le funzionalità e i link trattati in questo articolo possono aiutarti a ottenere la migliore esperienza possibile simile a quella di un'app per la tua PWA.