Modalità di applicazione a schede per le PWA

Lavora su più documenti contemporaneamente usando le schede nell'app web progressiva

Thomas Steiner

Nel mondo dell'informatica, la metafora desktop è una metafora dell'interfaccia ovvero 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 GUI sono modellate sulla base delle tradizionali schede inserite in libri, file cartacei o indici di schede. Un'interfaccia a schede (TDI) o scheda è un elemento di controllo grafico che consente di contenere più documenti o riquadri all'interno di una singola finestra utilizzando le schede come widget di navigazione per passare da un set 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. 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à, torna alla modalità di visualizzazione successiva nella 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

Qualcosa che finora non è presente nella piattaforma è un modo per consentire agli sviluppatori di PWA di offrire ai propri utenti un'interfaccia a schede, ad esempio per consentire la modifica di diversi file nella stessa finestra di PWA. La modalità applicazione a schede colma questa lacuna.

Casi d'uso suggeriti per la modalità dell'applicazione a schede

Esempi di siti che possono utilizzare la modalità di applicazione a schede includono:

  • App di produttività che consentono all'utente di modificare più di un documento (o file) contemporaneamente.
  • App di comunicazione che consentono all'utente di intrattenere conversazioni in stanze virtuali diverse per scheda.
  • Lettura di app che aprono i link agli articoli in nuove schede in-app.

Differenze rispetto alle schede create dagli sviluppatori

Avere i documenti in schede separate del browser offre l'isolamento delle risorse senza costi, cosa che attualmente non è possibile se si utilizza il web. Le schede create dagli sviluppatori non vengono ridimensionate in modo accettabile fino a centinaia di schede come le schede del browser. Le caratteristiche del browser, come cronologia di navigazione, "Copia l'URL di questa pagina", "Trasmetti questa scheda" o "Apri questa pagina in un browser web" verranno applicate alla pagina dell'interfaccia a schede realizzata 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 aprire i link ipertestuali nello user agent (ad es. in una scheda del browser o in una nuova finestra).

Sebbene i browser possano fare tutto ciò che vogliono per quanto riguarda l'interfaccia utente, sarebbe chiaramente una grande sovversione delle aspettative degli sviluppatori se "display": "browser" all'improvviso significasse "essere eseguito in una finestra separata specifica dell'applicazione senza le opportunità del browser, ma in un'interfaccia a schede".

L'impostazione di "display": "browser" è di fatto il modo in cui disattivi l'inserimento in una finestra dell'applicazione.

Stato attuale

Passaggio Stato
1. Crea messaggio esplicativo Completata
2. Crea una bozza iniziale della specifica Not started
3. Raccogli feedback e ottimizza il design In corso
4. Prova dell'origine In corso
5. Lancio Not started

Utilizzo della modalità dell'applicazione a schede

Per utilizzare la modalità applicazione a schede, gli sviluppatori devono attivare le loro 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 abilitata per un'app, deve essere sempre presente quando l'app è aperta. Questa scheda non deve mai essere aperta. I link selezionati 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 nella scheda.

I valori consentiti per "home_tab" sono:

  • "auto" per lasciare che sia il browser a stabilire 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 Nuova scheda, se presente, dovrebbe aprire una nuova scheda in 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 lasciare che sia il browser a stabilire cosa fare.
  • "absent" per indicare al browser di non mostrare un pulsante Nuova scheda.
  • Un oggetto con due proprietà secondarie:
    • "url" con i valori consentiti di "auto" o un URL nell'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 può 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 funzionalità dei contenuti multimediali CSS display-mode 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 gli avvii delle app nelle finestre esistenti delle app per impedire l'apertura di finestre duplicate. Quando un'app a schede imposta "client_mode": "navigate-new", l'avvio dell'app apre una nuova scheda in una finestra dell'app esistente.

Demo

Puoi provare la modalità dell'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 vari link nelle varie schede.

Screenshot della demo della modalità applicazione a schede su tabbed-application-mode.glitch.me.

Feedback

Il team di Chrome vuole conoscere le tue esperienze con la modalità applicazione a schede.

Parlaci della progettazione dell'API

C'è qualcosa nella modalità dell'applicazione a schede che non funziona come previsto? Commenta il problema relativo al file manifest dell'app web che abbiamo creato.

Segnala 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 e di semplici istruzioni per la riproduzione, quindi inserisci UI>Browser>WebAppInstalls nella casella Componenti. Glitch funziona benissimo per condividere custodie di riproduzione facile e veloce.

Mostra il supporto dell'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 è fondamentale supportarle.

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

Ringraziamenti

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