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 desktop, le schede GUI sono modellate sulle tradizionali schede inserite in libri, file cartacei o indici di schede. Una interfaccia per documenti a schede (TDI) o scheda è un elemento di controllo grafico che consente di contenere più documenti o riquadri all'interno di un'unica 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. 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 fallback se necessario.

Cos'è la modalità di applicazione a schede

Qualcosa che finora mancava dalla 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 PWA. La modalità di applicazione a schede colma questa lacuna.

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

Ecco alcuni esempi di siti che possono 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 sarebbero scalabili in modo accettabile fino a centinaia di schede come le schede del browser. Le convinzioni del browser, come la 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 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 termini di UI, 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. Crea messaggio esplicativo Completata
2. Creare una bozza iniziale della specifica Non avviato
3. Raccogli feedback e ottimizza la progettazione In corso
4. Prova dell'origine In corso
5. Lancio Non avviato

Utilizzo della modalità di applicazione a schede

Per utilizzare la modalità applicazione a schede, gli sviluppatori devono attivare le loro app impostando un valore specifico per la modalità "display_override" nel file manifest dell'app web.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

Successivamente, la proprietà "tab_strip" può essere utilizzata facoltativamente per ottimizzare 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 viene fatto 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 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 consentire al browser di determinare 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 per 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 Gestori

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à 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à applicazione a 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.

Parlaci della progettazione 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 opera di Alan Cutter. Questo articolo è stato esaminato da Joe Medley. Immagine hero di Till Niermann su Wikimedia Commons.