Lavorare su più documenti alla volta con le schede nell'app web progressiva
Nel mondo dell'informatica, la metafora del desktop è una metafora dell'interfaccia, ovvero un insieme di concetti unificanti utilizzati dalle interfacce utente grafiche (GUI) per aiutare gli utenti a interagire in modo più intuitivo con il computer. In linea con la metafora del desktop, le schede della GUI sono modellate sulle schede classiche inserite in libri, file di carta o indici di schede. Una scheda o un'interfaccia di documento con schede (TDI) è un elemento di controllo grafico che consente di includere più documenti o pannelli in un'unica finestra, utilizzando le schede come widget di navigazione per passare da un insieme di documenti all'altro.
Le app web progressive possono essere eseguite in varie modalità di visualizzazione determinate dalla proprietà display
nel file manifest dell'app web. Le opzioni sono fullscreen
, standalone
,
minimal-ui
e browser
. Queste modalità di visualizzazione seguono una
catena di riserva ben definita
("fullscreen"
→ "standalone"
→ "minimal-ui"
→ "browser"
). Se un browser non supporta una
determinata modalità, passa alla modalità di visualizzazione successiva della catena. Utilizzando la proprietà
"display_override"
, gli sviluppatori possono specificare la propria catena di riserva
se necessario.
Che cos'è la modalità di applicazione a schede
Finora nella piattaforma mancava un modo per consentire agli sviluppatori di PWA di offrire ai propri utenti un'interfaccia di documenti con schede, ad esempio per consentire la modifica di diversi file nella stessa finestra della PWA. La modalità di applicazione a schede colma questa lacuna.
Casi d'uso per la modalità di applicazione a schede
Ecco alcuni esempi di siti che potrebbero utilizzare la modalità di applicazione a schede:
- App di produttività che consentono all'utente di modificare più documenti (o file) contemporaneamente.
- App di comunicazione che consentono all'utente di avere conversazioni in stanze diverse per scheda.
- App di lettura che aprono i link agli articoli in nuove schede in-app.
Differenze rispetto alle schede create dagli sviluppatori
Avere i documenti in schede del browser separate comporta l'isolamento delle risorse, cosa non possibile al momento utilizzando il web. Le schede create dagli sviluppatori non possono essere scalate in modo accettabile a centinaia di schede come accade per le schede del browser. Le funzionalità del browser come la cronologia di navigazione, "Copia l'URL di questa pagina", "Trasmetti questa scheda" o "Apri questa pagina in un browser web" verrebbero applicate alla pagina dell'interfaccia con schede creata dallo sviluppatore, ma non alla pagina del documento selezionata.
Differenze rispetto a "display": "browser"
L'attuale "display": "browser"
ha già un
significato specifico:
Apre l'applicazione web utilizzando la convenzione specifica della piattaforma per l'apertura dei link ipertestuali nell'agente utente (ad es. in una scheda del browser o in una nuova finestra).
Sebbene i browser possano fare ciò che vogliono in merito all'interfaccia utente, sarebbe chiaramente una sovversione piuttosto grande delle aspettative degli sviluppatori se "display": "browser"
significasse improvvisamente "esegui in una finestra distinta specifica per l'applicazione senza funzionalità del browser, ma con un'interfaccia di documento a schede".
L'impostazione "display": "browser"
è il modo per disattivare la visualizzazione in una finestra dell'applicazione.
Stato attuale
Passaggio | Stato |
---|---|
1. Creare un video esplicativo | Completata |
2. Creare una bozza iniziale della specifica | Completata |
3. Raccogli feedback e esegui l'iterazione sul design | Completato |
4. Prova dell'origine | Completato |
5. Lancio | Completata (ChromeOS) |
Utilizzare la modalità di applicazione a schede
Per utilizzare la modalità di applicazione a schede, gli sviluppatori devono attivarla nelle proprie app impostando un valore specifico della modalità "display_override"
nel file manifest dell'app web.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Successivamente, la proprietà "tab_strip"
può essere utilizzata facoltativamente per perfezionare il comportamento della scheda. Ha due proprietà secondarie consentite, "home_tab"
e "new_tab_button"
. Se la proprietà "tab_strip"
non è presente, verrà utilizzato per impostazione predefinita il seguente oggetto:
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
Scheda Home
La scheda Home è una scheda bloccata che, se attivata per un'app, deve essere sempre presente quando l'app è aperta. Questa scheda non deve mai essere visualizzata. I link su cui fai clic da questa scheda dovrebbero aprirsi in una nuova scheda dell'app. Le app possono scegliere di personalizzare l'URL a cui è bloccata questa scheda e l'icona visualizzata al suo interno.
Il membro "home_tab"
dell'oggetto "tab_strip"
contiene informazioni su una "scheda Home" speciale
che deve fungere da menu di primo livello per l'applicazione. Contiene il seguente membro:
"scope_patterns"
: l'elemento"scope_patterns"
è un elenco di pattern URL che definiscono l'ambito della scheda Home rispetto all'URL del manifest.
Pulsante Nuova scheda
Il membro "new_tab_button"
dell'oggetto "tab_strip"
descrive il comportamento di un'affordance dell'interfaccia utente (ad esempio un pulsante) che, quando viene fatto clic/attivato, apre un nuovo contesto dell'applicazione all'interno della finestra dell'applicazione. Ha il seguente membro:
"url"
: il membro"url"
è una stringa che rappresenta un URL relativo all'URL del manifest che rientra nell'ambito di un manifest elaborato.
Un'applicazione ha un pulsante per una nuova scheda se l'elemento "url"
new_tab_button del manifest elaborato non rientra nell'ambito della scheda Home. Se l'applicazione non ha un pulsante per la nuova scheda, il browser non rende disponibile all'utente l'affordance "Nuova scheda".
Esempio completo
Un esempio completo per configurare il comportamento di un'app con un'interfaccia a schede potrebbe essere il seguente:
{
"name": "Tabbed App Example",
"start_url": "/",
"display": "standalone",
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"scope_patterns": [
{"pathname": "/"},
{"pathname": "/index.html"}
]
},
"new_tab_button": {
"url": "/create"
}
}
}
Rileva la modalità dell'applicazione a schede
Le app possono rilevare se sono in esecuzione in modalità di applicazione a schede controllando la
display-mode
funzionalità dei contenuti multimediali del CSS
in CSS o JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Interazione con l'API Launch Handler
L'API Launch Handler consente ai siti di reindirizzare i lanci di app nelle finestre delle app esistenti per evitare l'apertura di finestre duplicate. Quando un'app con schede imposta "client_mode": "navigate-new"
, i lanci dell'app apriranno una nuova scheda in una finestra dell'app esistente.
Demo
Puoi provare l'applicazione a schede su ChromeOS:
- Installa l'app tabbed-application-mode.glitch.me (codice sorgente).
- Fai clic sui diversi link nelle diverse schede.
Feedback
Il team di Chrome vuole conoscere la tua esperienza con la modalità di applicazione a schede.
Fornisci informazioni sul design dell'API
C'è qualcosa nella modalità di applicazione a schede che non funziona come previsto? Commenta la issue del file manifest dell'app web che abbiamo creato.
Segnalare un problema relativo all'implementazione
Hai trovato un bug nell'implementazione di Chrome? Segnala un bug all'indirizzo
new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile,
istruzioni per la riproduzione e inserisci UI>Browser>WebAppInstalls
nella casella Componenti.
Glitch è ideale per condividere casi di riproduzione rapida.
Mostra il supporto per l'API
Hai intenzione di utilizzare la modalità di applicazione a schede? Il tuo supporto pubblico aiuta il team di Chrome 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
#TabbedApplicationMode
e facci sapere dove e come lo utilizzi.
Link utili
- Spiegazione
- Problema relativo alle specifiche del file manifest dell'app web
- Bug di Chromium
- Componente lampeggiante:
UI>Browser>WebAppInstalls
Ringraziamenti
La modalità di applicazione a schede è stata esplorata da Matt Giuca. L'implementazione sperimentale in Chrome è stata realizzata da Alan Cutter. Questo documento è stato esaminato da Joe Medley. Immagine hero di Till Niermann su Wikimedia Commons.