Modalità di applicazione a schede per le PWA

Lavorare su più documenti alla volta con le schede nell'app web progressiva

Thomas Steiner

Nel mondo dell'informatica, la metafora del desktop è una metafora dell'interfaccia che rappresenta un insieme di concetti unificanti utilizzati dalle interfacce grafiche utente (GUI) per aiutare gli utenti a interagire più facilmente con il computer. In linea con la metafora del desktop, le schede dell'interfaccia utente sono modellate sulle schede tradizionali inserite in libri, fascicoli 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. Alcuni esempi 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. Tramite 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 suggeriti per la modalità di applicazione con 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 senza costi aggiuntivi, cosa che non è possibile fare oggi 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 attualmente 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 Non avviato
3. Raccogli feedback e esegui l'iterazione sul design In corso
4. Prova dell'origine In corso
5. Lancio Non avviato

Utilizzare la modalità di applicazione con 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, vengono utilizzati i valori "auto" delle proprietà specifiche. Il browser determina quali valori utilizzare per "auto".

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.

I valori consentiti per "home_tab" sono:

  • "auto" per consentire al browser di determinare cosa fare.
  • "absent" per indicare al browser di non mostrare una scheda Home.
  • Un oggetto con due proprietà secondarie:
    • "url" con i valori consentiti di "auto" o un URL a cui bloccare la scheda Home.
    • "icons" con i valori consentiti di "auto" o un array di icone come nella proprietà "icons" principale.

Pulsante Nuova scheda

Il pulsante della nuova scheda, se presente, deve aprire una nuova scheda con un URL che rientra nell'ambito dell'app. L'app può scegliere di impostare un URL e un'icona personalizzati per questo pulsante. I browser possono decidere come gestire il trascinamento di queste schede per creare nuove finestre o combinarle con le schede del browser.

I valori consentiti per "new_tab_button" sono:

  • "auto" per consentire al browser di determinare cosa fare.
  • "absent" per indicare al browser di non mostrare un pulsante per una nuova scheda.
  • Un oggetto con due proprietà secondarie:
    • "url" con i valori consentiti di "auto" o un URL ambito in cui aprire nuove schede.
    • "icons" con i valori consentiti di "auto" o un array di icone come nella proprietà "icons" principale.

Esempio completo

Un esempio completo per configurare il comportamento di un'app con un'interfaccia a schede potrebbe essere il seguente:

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

Rilevamento della 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 la modalità di applicazione a schede impostando un flag del browser:

  1. Imposta il flag #enable-desktop-pwas-tab-strip.
  2. Installa l'app tabbed-application-mode.glitch.me (codice sorgente).
  3. Fai clic sui diversi link nelle diverse schede.

Screenshot della demo della modalità di applicazione con schede all'indirizzo tabbed-application-mode.glitch.me.

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 con l'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 semplici per la riproduzione e inserisci UI>Browser>WebAppInstalls nella casella Componenti. Glitch è ideale per condividere casi di riproduzione facili e veloci.

Mostra il supporto per l'API

Hai intenzione di utilizzare la modalità di applicazione con 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.

Ringraziamenti

La modalità di applicazione a schede è stata esplorata da Matt Giuca. L'implementazione sperimentale in Chrome è stata realizzata da Alan Cutter. Questo articolo è stato esaminato da Joe Medley. Immagine hero di Till Niermann su Wikimedia Commons.