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

Thomas Steiner

Attenzione: la funzionalità di acquisizione dei link dichiarativi faceva parte del progetto relativo alle funzionalità. Il team di ingegneria ha deciso che la funzionalità di acquisizione dei link dichiarativi non verrà lanciata 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 Declarative Link Capturing, devi eseguire la transizione all'API Launch Handler sostitutiva.

Che cos'è la funzionalità di acquisizione dei link dichiarativa?

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

Ma la situazione si complica. Che cosa succede se il link non compare su un sito web, ma in un messaggio di chat che ricevi in una delle app di chat di Google? Sui sistemi operativi desktop, che hanno la nozione di finestre di app separate, se l'app è già aperta, deve essere creata una nuova finestra o scheda per ogni clic sul link? Se ci pensi, esistono molti modi per acquisire link e navigazioni, inclusi, a titolo esemplificativo:

• Ha fatto clic su link di altre pagine web.
• L'URL viene avviato da un'app specifica per la piattaforma nel sistema operativo.
• Navigazioni provenienti dall'API App Shortcuts.
• Link che passano attraverso i gestori di protocollo URL.
• Navigazioni causate da gestori file.
• Navigazioni causate dall'API Share Target.
• …e altri.

La funzionalità di acquisizione dei link dichiarativa è una proposta per una proprietà manifest dell'app web chiamata "capture_links" che consente agli sviluppatori di determinare in modo dichiarativo cosa deve accadere quando al browser viene chiesto di navigate to an URL that is within the application's navigation scope, from a context outside of the navigation scope. Questa proposta non si applica se l'utente si trova già nell'ambito di navigazione (ad esempio, se l'utente ha aperto una scheda del browser che rientra nell'ambito e fa clic su un link interno).

Termine chiave: l'ambito di navigazione del manifest di un'app web è l'elemento "scope" di un manifest elaborato. L'ambito di navigazione limita l'insieme di URL a cui è possibile accedere con un contesto dell'applicazione durante l'applicazione del manifest. Se il membro "scope" non è presente nel file manifest, viene utilizzato per impostazione predefinita il percorso principale del membro "start_url".

In genere, alcune condizioni speciali come il clic con il tasto centrale del mouse su un link (o il clic con il tasto destro del mouse e poi "Apri in una nuova scheda") non attivano il comportamento di acquisizione dei link. Non importa se un link è target=_self o target=_blank, quindi i link su cui fai clic in una finestra del browser (o nella finestra di un'altra PWA) si apriranno nella PWA anche se normalmente causerebbero una navigazione all'interno della stessa scheda.

Casi d'uso suggeriti

Ecco alcuni esempi di siti che potrebbero utilizzare questa API:

• PWA che vogliono aprire una finestra anziché una scheda del browser quando l'utente fa clic su un link che rimanda a queste app. In un ambiente desktop, spesso è utile avere più finestre dell'applicazione aperte contemporaneamente.
• PWA a finestra singola in cui lo sviluppatore preferisce avere una sola istanza dell'app aperta in qualsiasi momento, con nuove navigazioni che mettono a fuoco l'istanza esistente. I casi d'uso secondari includono:
  • App per le quali ha senso avere un'unica istanza in esecuzione (ad esempio un lettore musicale, un gioco).
  • App che includono la gestione di più documenti all'interno di una singola istanza (ad es. una barra delle schede implementata in HTML).

Attivazione tramite about://flags

Per eseguire esperimenti con la funzionalità di acquisizione dei link dichiarativi localmente, senza un token di prova dell'origine, attiva il flag #enable-desktop-pwas-link-capturing in about://flags.

Come utilizzare la funzionalità di acquisizione dei link dichiarativa?

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

• "none" (valore predefinito): nessuna acquisizione di link; i link su cui viene fatto clic che rimandano a questo ambito PWA vengono visualizzati come normale senza aprire una finestra PWA.
• "new-client": ogni link su cui si fa clic apre una nuova finestra PWA all'URL in questione.
• "existing-client-navigate": il link su cui hai fatto clic si apre in una finestra PWA esistente, se esistente, o in una nuova finestra, in caso contrario. Se esiste più di una finestra PWA, il browser può sceglierne una in modo arbitrario. Si comporta come "new-client" se non è aperta alcuna finestra. 🚨 Attenzione. Questa opzione può comportare la perdita di dati, in quanto le pagine possono essere interrotte arbitrariamente. I siti devono essere consapevoli che, scegliendo questa opzione, attivano questo comportamento. Questa opzione è ideale per i siti "sola lettura" che non memorizzano i dati utente in memoria, come i lettori di musica. Se la pagina da cui si esce contiene un evento beforeunload, l'utente vedrà la richiesta prima del completamento della navigazione.

Nota: è in corso una discussione sull'aggiunta di opzioni che non aprono affatto una finestra, ma attivano un evento launch in una finestra in primo piano scelta o nel worker di servizio. Per maggiori dettagli, consulta la spiegazione dell'evento launch e, in particolare, le sezioni su existing-client-event e service-worker.

Demo

La demo di Declarative Link Capturing è in realtà composta da due demo che interagiscono tra loro:

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

Lo screencast di seguito mostra come interagiscono i due. Mostra due comportamenti diversi, "new-client" e "existing-client-navigate". Assicurati di testare le app in stati diversi, 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 la funzionalità di acquisizione dei link dichiarativi utilizzando i principi fondamentali definiti in Controllo dell'accesso a potenti funzionalità della piattaforma web, tra cui il controllo dell'utente, la trasparenza e l'ergonomia. Questa API offre ai siti nuove opzioni di controllo aggiuntive. Innanzitutto, la possibilità di aprire automaticamente le app installate in una finestra. Viene utilizzata l'interfaccia utente esistente, ma il sito può attivarla automaticamente. In secondo luogo, la possibilità di mettere in primo piano una finestra esistente sul proprio dominio e attivare un evento contenente l'URL su cui è stato 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, che include la cattura dei link attivata dall'utente e l'API Launch Handler.

Acquisizione di link

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

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

Per il momento, la funzionalità di acquisizione dei link è disponibile solo su ChromeOS. Il supporto per Windows, macOS e Linux è in fase di implementazione.

API Launch Handler

Il controllo di una navigazione in entrata viene eseguito nell'API Launch Handler, che consente alle app web di decidere come viene avviata un'app web in varie situazioni, ad esempio l'acquisizione di link, la condivisione di destinazioni o il trattamento dei 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 dell'avvio e inserisci la chiave della prova dell'origine nella tua app web.

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

   • Per utilizzare "capture_links": "new-client", aggiungi:"launch_handler": { "route_to": "new-client" }.
   • Per utilizzare "capture_links": "existing-client-navigate", aggiungi: "launch_handler": { "route_to": "existing-client-navigate" }.
   • Per utilizzare "capture_links": "existing-client-event" (che non è mai stato implementato nella prova dell'origine di acquisizione dei link dichiarativa), aggiungi: "launch_handler": { "route_to": "existing-client-retain" }. Con questa opzione, le pagine nell'ambito dell'app non navigheranno più automaticamente quando viene acquisita la navigazione tra i link. Devi gestire LaunchParams in JavaScript chiamando window.launchQueue.setConsumer() per abilitare la navigazione.

La registrazione della prova dell'origine di capture_links e della funzionalità di acquisizione dei link dichiarativi è valida fino al 30 marzo 2022. In questo modo, gli utenti che utilizzano Chromium 97 e versioni precedenti potranno comunque avviare l'app web da un link acquisito.

Per ulteriori dettagli, consulta Controllare il modo in cui viene lanciata l'app.

Feedback

Il team di Chromium vuole conoscere le tue esperienze con la funzionalità di acquisizione dei link dichiarativi.

Fornisci informazioni sul design 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? Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi il tuo parere a un problema esistente.

Segnalare un problema relativo all'implementazione

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

Mostra il supporto per l'API

Hai intenzione di utilizzare la funzionalità di acquisizione dei link dichiarativa? Il tuo sostegno pubblico aiuta il team di Chromium a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.

Invia un tweet all'account @ChromiumDev utilizzando l'hashtag #DeclarativeLinkCapturing e facci sapere dove e come lo utilizzi.

Link utili

• Bozza delle specifiche
• Spiegazione
• Bug di Chromium
• Intent to Prototype
• Intento di partecipare a un esperimento
• Voce ChromeStatus

Ringraziamenti

La funzionalità di acquisizione dei link dichiarativa è stata specificata da Matt Giuca con il contributo di Alan Cutter e Dominick Ng. L'API è stata implementata da Alan Cutter. Questo articolo è stato esaminato da Joe Medley, Matt Giuca, Alan Cutter e Shunya Shishido. Immagine hero di Zulmaury Saavedra su Unsplash.