Scegli in che modo i link nell'ambito aprono la PWA con l'acquisizione di link dichiarativa

Thomas Steiner

Attenzione: l'acquisizione dichiarativa di link faceva parte del progetto delle funzionalità. Il team di tecnici ha deciso che l'acquisizione dichiarativa link non verrà avviata con il design attuale. La funzionalità è stata invece riprogettata come descritto in Controllare come viene lanciata l'app. Se la tua app implementa l'API dichiarativa Link Capturing, devi passare all'API Launch Handler sostitutiva.

Che cos’è l’acquisizione dichiarativa di link?

Fare clic sui link sul web a volte può essere una piacevole sorpresa. Ad esempio, facendo clic sul link di una pagina web a YouTube da un dispositivo mobile si apre l'app YouTube per iOS o Android, se installata. Tuttavia, quando installi la PWA di YouTube su un computer desktop e fai clic su un link, si apre in una scheda del browser.

Ma la procedura si fa più complessa. Che cosa succede se il link non viene visualizzato in un sito web, ma in un messaggio di chat che ricevi in una delle app di chat di Google? Sui sistemi operativi desktop, che prevedono la nozione di finestre separate, se l'app è già aperta, deve essere creata una nuova finestra o scheda per ogni clic sui link? Ci sono molti modi in cui è possibile acquisire link e navigazioni, tra cui, a titolo esemplificativo:

• Link selezionati da altre pagine web.
• L'URL viene avviato da un'app specifica della piattaforma nel sistema operativo.
• Navigazioni provenienti dall'API App Shortcuts.
• Link che passano attraverso i gestori del protocollo URL.
• Navigazioni causate da gestori di file.
• Navigazioni causate dall'API Share Target.
• ...e altri ancora.

L'acquisizione di link dichiarativa è una proposta per una proprietà manifest dell'app web denominata "capture_links" che consente agli sviluppatori di determinare in modo dichiarativo cosa dovrebbe accadere quando al browser viene chiesto di passare a un URL che rientra nell'ambito di navigazione dell'applicazione, da un contesto al di fuori dell'ambito di navigazione. Questa proposta non si applica se l'utente rientra già nell'ambito della navigazione (ad esempio, se l'utente ha una scheda del browser aperta che rientra nell'ambito e fa clic su un link interno).

Termine chiave: l'ambito di navigazione del file manifest di un'app web è l'elemento "scope" di un manifest elaborato. L'ambito di navigazione limita l'insieme di URL in cui è possibile esplorare il contesto di un'applicazione mentre viene applicato il manifest. Se il membro "scope" non è presente nel file manifest, per impostazione predefinita viene utilizzato il percorso padre del membro "start_url".

Alcune condizioni speciali, come il clic centrale su un link (o il clic con il tasto destro del mouse e poi "Apri in una nuova scheda"), in genere non attivano l'acquisizione del link. Il fatto che un link sia target=_self o target=_blank non è importante, per cui i link selezionati in una finestra del browser (o in una finestra di un'altra PWA) vengano aperti nella PWA anche se normalmente causerebbero una navigazione all'interno della stessa scheda.

Casi d'uso suggeriti

Esempi di siti che possono utilizzare questa API includono:

• PWA che vogliono aprire una finestra anziché una scheda del browser quando l'utente fa clic su un link che rimanda alle app. In un ambiente desktop, spesso ha senso avere più finestre dell'applicazione aperte alla volta.
• PWA a finestra singola in cui lo sviluppatore preferisce avere una sola istanza dell'app aperta in qualsiasi momento, con nuove navigazioni incentrate sull'istanza esistente. I casi d'uso secondari includono:
  • App per cui è opportuno eseguire una sola istanza (ad esempio, un lettore musicale o un gioco).
  • App che includono la gestione di più documenti all'interno di una singola istanza (ad esempio una tabulazione implementata in HTML).

Attivazione tramite about://flags

Per sperimentare l'acquisizione di link dichiarativa in locale, senza un token di prova dell'origine, abilita il flag #enable-desktop-pwas-link-capturing in about://flags.

Come utilizzare l'acquisizione dichiarativa dei link?

Gli sviluppatori possono determinare in modo dichiarativo come devono essere acquisiti i link sfruttando il campo manifest dell'app web aggiuntivo "capture_links". Prende una stringa o un array di stringhe come valore. Se viene fornito un array di stringhe, lo user agent sceglie il primo elemento supportato nell'elenco, con il valore predefinito "none". Sono supportati i seguenti valori:

• "none" (impostazione predefinita): nessuna acquisizione di link; i link selezionati che indirizzano a questo ambito PWA si spostano normalmente senza aprire una finestra PWA.
• "new-client": ogni link selezionato apre una nuova finestra PWA in corrispondenza dell'URL.
• "existing-client-navigate": il link selezionato si apre in una finestra PWA esistente, se è disponibile, o in una nuova finestra in caso contrario. Se è presente più di una finestra PWA, il browser può sceglierne una in modo arbitrario. Questo comportamento è simile a "new-client" se al momento non ci sono finestre aperte. 🚨 Attenzione: Questa opzione potrebbe causare la perdita di dati, in quanto è possibile abbandonare le pagine in modo arbitrario. I siti devono essere consapevoli che stanno attivando questo comportamento scegliendo questa opzione. Questa opzione funziona al meglio per i siti di "sola lettura" che non contengono dati utente in memoria, ad esempio i lettori musicali. Se la pagina da cui l'utente esce dalla pagina presenta un evento beforeunload, l'utente vedrà la richiesta prima del completamento della navigazione.

Nota: si discute dell'aggiunta di opzioni che non aprono alcuna finestra, ma attivano un evento launch in una finestra in primo piano o nel service worker. Consulta la spiegazione dell'evento launch per i dettagli e, in particolare, le sezioni su existing-client-event e service-worker.

Demo

La demo per l'acquisizione dichiarativa di link consiste in due dimostrazioni che interagiscono tra loro:

1. https://continuous-harvest-tomato.glitch.me/
2. https://hill-glitter-tree.glitch.me/

Lo screencast di seguito mostra l'interazione tra i due. Mostrano due diversi comportamenti, "new-client" e "existing-client-navigate". Assicurati di testare le app in diversi stati, in esecuzione in una scheda o come PWA installata, per vedere la differenza di comportamento.

Sicurezza e autorizzazioni

Il team di Chromium ha progettato e implementato l'acquisizione dichiarativa di link utilizzando i principi fondamentali definiti nell'articolo Controllare l'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo degli utenti, trasparenza ed ergonomia. Questa API consente ai siti di utilizzare nuove opzioni di controllo aggiuntive. Innanzitutto, puoi aprire automaticamente le app installate in una finestra. Utilizza l'interfaccia utente esistente, ma il sito può attivarlo automaticamente. Secondariamente, la capacità di focalizzare una finestra esistente sul proprio dominio e attivare un evento contenente l'URL su cui l'utente ha fatto clic. Lo scopo è consentire al sito di passare da una finestra esistente a una nuova pagina, sostituendo il flusso di navigazione HTML predefinito.

Esegui la migrazione all'API Launch Handler

La prova dell'origine dell'API Declarative Link Capturing è scaduta il 30 marzo 2022 per Chromium 97 e versioni precedenti. Verrà sostituita da un insieme di nuove funzionalità e API in Chromium 98 e versioni successive, tra cui l'acquisizione di link abilitata dall'utente e l'API Launch Handler.

Acquisizione link

In Chromium 98, l'acquisizione automatica dei link è ora un comportamento di attivazione dell'utente anziché essere concessa al momento dell'installazione per un'app web. Per attivare l'acquisizione dei link, l'utente deve avviare un'app installata dal browser utilizzando Apri con e scegliere Memorizza la mia scelta.

In alternativa, gli utenti possono attivare o disattivare l'acquisizione dei link per un'app web specifica nella pagina delle impostazioni di gestione dell'app.

Al momento l'acquisizione di link è una funzionalità solo per ChromeOS; il supporto per Windows, macOS e Linux è in corso.

Avvia API Handler

Il controllo della navigazione in entrata viene migrato all'API Launch Handler, che consente alle app web di decidere come avviare un'app web in varie situazioni, ad esempio l'acquisizione di link, la condivisione di una destinazione o la gestione di file e così via. Per eseguire la migrazione dall'API Declarative Link Capturing all'API Launch Handler:

1. Registra il tuo sito per la prova dell'origine del gestore del gestore e inserisci la chiave della prova dell'origine nella tua app web.

2. Aggiungi una voce "launch_handler" al file manifest del tuo sito.

   • Per usare "capture_links": "new-client", aggiungi:"launch_handler": { "route_to": "new-client" }.
   • Per usare "capture_links": "existing-client-navigate", aggiungi: "launch_handler": { "route_to": "existing-client-navigate" }.
   • Per utilizzare "capture_links": "existing-client-event" (che non è mai stata implementata nella prova dell'origine di Acquisizione di link dichiarativi), aggiungi: "launch_handler": { "route_to": "existing-client-retain" }. Con questa opzione, le pagine nell'ambito dell'app non passeranno più automaticamente quando viene acquisita una navigazione tramite link. Per abilitare la navigazione, devi gestire LaunchParams in JavaScript chiamando window.launchQueue.setConsumer().

Il campo capture_links e la registrazione della prova dell'origine dichiarativa di link sono validi fino al 30 marzo 2022. In questo modo gli utenti su Chromium 97 e versioni precedenti potranno comunque avviare l'app web con un link acquisito.

Per maggiori dettagli, leggi l'articolo Controllare come viene lanciata l'app.

Feedback

Il team di Chromium vuole saperne di più sulle tue esperienze con l'acquisizione di link dichiarativi.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza? Segnala un problema relativo alle specifiche nel repository GitHub corrispondente o aggiungi le tue opinioni su un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chromium? Oppure l'implementazione è diversa dalle specifiche? Segnala un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e di istruzioni semplici per la riproduzione e inserisci UI>Browser>WebAppInstalls nella casella Componenti. Glitch funziona benissimo per condividere riproduzioni rapide e semplici.

Mostra il supporto dell'API

Prevedi di utilizzare l'acquisizione dichiarativa dei link? Il tuo supporto pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto è fondamentale supportarle.

Invia un tweet a @ChromiumDev usando l'hashtag #DeclarativeLinkCapturing e facci sapere dove e come lo stai usando.

Link utili

• Bozza delle specifiche
• Spiegazione
• Bug di Chromium
• Intento di prototipare
• Intenzione di sperimentare
• Voce ChromeStatus

Ringraziamenti

L'acquisizione dichiarativa link è stata specificata da Matt Giuca con l'input di Alan Cutter e Dominick Ng. L'API è stata implementata da Alan Cutter. Questo articolo è stato recensito da Joe Medley, Matt Giuca, Alan Cutter e Shunya Shishido. Immagine hero di Zulmaury Saavedra su Unsplash.