Esperienze a schermo intero

Abbiamo la possibilità di creare facilmente siti web e applicazioni immersive a schermo intero, ma come per qualsiasi cosa sul web, esistono un paio di modi per farlo. Questo è particolarmente importante ora che un numero maggiore di browser supporta un'esperienza "app web installata" che si avvia a schermo intero.

Visualizzare l'app o il sito a schermo intero

Esistono diversi modi in cui un utente o uno sviluppatore può visualizzare un'app web a schermo intero.

  • Richiedi al browser di passare alla modalità a schermo intero in risposta a un gesto dell'utente.
  • Installa l'app nella schermata Home.
  • Simula: nascondi automaticamente la barra degli indirizzi.

Richiedere al browser di passare alla modalità a schermo intero in risposta a un gesto dell'utente

Non tutte le piattaforme sono uguali. Safari per iOS non ha un'API a schermo intero, ma è disponibile su Chrome per Android, Firefox e IE 11 e versioni successive. La maggior parte delle applicazioni che crei utilizzerà una combinazione dell' API JS e dei selettori CSS forniti dalla specifica a schermo intero. Le API JS principali di cui devi tenere conto quando crei un'esperienza a schermo intero sono:

  • element.requestFullscreen() (attualmente con prefisso in Chrome, Firefox e IE) mostra l'elemento in modalità a schermo intero.
  • document.exitFullscreen() (attualmente con prefisso in Chrome, Firefox e IE. Firefox utilizza cancelFullScreen()) annulla la modalità a schermo intero.
  • document.fullscreenElement (attualmente con prefisso in Chrome, Firefox ed IE) restituisce true se uno degli elementi è in modalità a schermo intero.

Quando l'app è a schermo intero, non hai più a disposizione i controlli UI del browser. In questo modo, il modo in cui gli utenti interagiscono con la tua esperienza cambia. Non dispongono dei controlli di navigazione standard come Avanti e Indietro; non hanno la via di fuga, ovvero il pulsante Aggiorna. È importante tenere conto di questo scenario. Puoi utilizzare alcuni selettori CSS per aiutarti a modificare lo stile e la presentazione del tuo sito quando il browser entra in modalità a schermo intero.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

L'esempio riportato sopra è un po' artificioso, poiché ho nascosto tutta la complessità relativa all'utilizzo dei prefissi dei fornitori.

Il codice effettivo è molto più complesso. Mozilla ha creato uno script molto utile che puoi utilizzare per attivare/disattivare lo schermo intero. Come puoi vedere, la situazione del prefisso del fornitore è complessa e macchinosa rispetto all'API specificata. Anche con il codice leggermente semplificato riportato di seguito, è comunque complesso.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

Noi sviluppatori web odiamo la complessità. Un'API astratta di alto livello che puoi utilizzare è il modulo Screenfull.js di Sindre Sorhus, che unifica le due API JS e i prefissi dei fornitori leggermente diversi in un'unica API coerente.

Suggerimenti per l'API a schermo intero

Visualizzare il documento a schermo intero
Schermo intero nell&#39;elemento body
Figura 1: schermo intero nell'elemento body.

È naturale pensare che l'elemento body venga visualizzato a schermo intero, ma se utilizzi un motore di rendering basato su WebKit o Blink, noterai un effetto strano: la larghezza del corpo viene ridotta alle dimensioni più piccole possibili per contenere tutti i contenuti. (Mozilla Gecko va bene).

Schermo intero sull&#39;elemento del documento
Figura 2: schermo intero nell'elemento del documento.

Per risolvere il problema, utilizza l'elemento document anziché l'elemento body:

document.documentElement.requestFullscreen();
Visualizzare un elemento video a schermo intero

Per visualizzare un elemento video a schermo intero, procedi esattamente come faresti per qualsiasi altro elemento. Chiama il metodo requestFullscreen sull'elemento video.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

Se l'elemento <video> non ha l'attributo controls definito, l'utente non può controllare il video una volta visualizzato a schermo intero. Il modo consigliato per farlo è avere un contenitore di base che includa il video e i controlli che vuoi che l'utente veda.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

Ciò ti offre molta più flessibilità perché puoi combinare l'oggetto contenitore con il selettore pseudo CSS (ad esempio per nascondere il pulsante "goFS").

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

Utilizzando questi pattern, puoi rilevare quando è attiva la modalità a schermo intero e adattare l'interfaccia utente in modo appropriato, ad esempio:

  • Fornendo un link alla pagina iniziale
  • Fornendo un meccanismo per chiudere le finestre di dialogo o tornare indietro

Avvio di una pagina a schermo intero dalla schermata Home

Non è possibile avviare una pagina web a schermo intero quando l'utente la visita. I fornitori di browser sono molto consapevoli che un'esperienza a schermo intero a ogni caricamento della pagina rappresenta un enorme fastidio, pertanto è necessario un gesto dell'utente per attivare lo schermo intero. I fornitori consentono però agli utenti di "installare" le app e l'atto di installazione è un indicazione per il sistema operativo che l'utente vuole avviare come app sulla piattaforma.

È abbastanza facile implementare i meta tag o i file manifest sulle principali piattaforme mobile come segue.

iOS

Dal lancio dell'iPhone, gli utenti possono installare app web nella schermata Home e avviarle come app web a schermo intero.

<meta name="apple-mobile-web-app-capable" content="yes" />

Se il valore di content è yes, l'applicazione web viene eseguita in modalità a schermo intero; altrimenti, no. Il comportamento predefinito è utilizzare Safari per visualizzare i contenuti web. Puoi determinare se una pagina web viene visualizzata in modalità a schermo intero utilizzando la proprietà JavaScript booleana di sola lettura window.navigator.standalone.

Apple

Chrome per Android

Di recente il team di Chrome ha implementato una funzionalità che indica al browser di avviare la pagina a schermo intero quando l'utente l'ha aggiunta alla schermata Home. È simile al modello Safari per iOS.

<meta name="mobile-web-app-capable" content="yes" />

Puoi configurare la tua app web in modo che un'icona di scorciatoia dell'applicazione venga aggiunta alla schermata Home di un dispositivo e che l'app venga avviata in "modalità app" a schermo intero utilizzando il menu "Aggiungi alla schermata Home" di Chrome per Android.

Google Chrome

Un'opzione migliore è utilizzare il file manifest dell'app web.

Manifest dell'app web (Chrome, Opera, Firefox, Samsung)

Il manifest per le applicazioni web è un semplice file JSON che consente allo sviluppatore di controllare la visualizzazione dell'app all'utente nelle aree in cui si aspetta di vedere le app (ad esempio la schermata Home del dispositivo mobile), di indicare cosa può avviare l'utente e, soprattutto, come può farlo. In futuro, il file manifest ti offrirà un maggiore controllo sulla tua app, ma al momento ci stiamo concentrando solo su come può essere lanciata. In particolare:

  1. Comunicare al browser il manifest
  2. Descrivere come avviare

Una volta creato il file manifest e ospitato sul tuo sito, non devi fare altro che aggiungere un tag link da tutte le pagine che includono la tua app, come segue:

<link rel="manifest" href="/manifest.json" />

Chrome supporta i manifest dalla versione 38 per Android (ottobre 2014) e ti consente di controllare l'aspetto della tua app web quando viene installata nella schermata Home (tramite le proprietà short_name, name e icons) e come deve essere avviata quando l'utente fa clic sull'icona di avvio (tramite start_url, display e orientation).

Di seguito è riportato un esempio di manifest. Non mostra tutto ciò che può essere presente in un manifest.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Questa funzionalità è completamente progressiva e consente di creare esperienze migliori e più integrate per gli utenti di un browser che la supporta.

Quando un utente aggiunge il tuo sito o la tua app alla schermata Home, ha intenzione di trattarlo come un'app. Ciò significa che dovresti indirizzare l'utente alle funzionalità della tua app anziché a una pagina di destinazione del prodotto. Ad esempio, se l'utente deve accedere alla tua app, questa è una buona pagina da avviare.

App di utilità

La maggior parte delle app di utilità ne trarrà immediatamente vantaggio. Per queste app, probabilmente vorrai lanciarle come app autonome, come per tutte le altre app su una piattaforma mobile. Per indicare a un'app di avviarsi in modalità autonoma, aggiungi questo elemento al manifest dell'app web:

    "display": "standalone"
Videogiochi

La maggior parte dei giochi trarrà immediatamente vantaggio da un manifest. La maggior parte dei giochi dovrà essere avviata a schermo intero e con un orientamento specifico forzato.

Se stai sviluppando uno scorrimento verticale o un gioco come Flappy Birds, molto probabilmente vorrai che il gioco sia sempre in modalità Ritratto.

    "display": "fullscreen",
    "orientation": "portrait"

Se invece stai creando un puzzle o un gioco come X-Com, probabilmente vorrai che il gioco utilizzi sempre l'orientamento orizzontale.

    "display": "fullscreen",
    "orientation": "landscape"
Siti di notizie

Nella maggior parte dei casi, i siti di notizie sono esperienze puramente basate sui contenuti. La maggior parte degli sviluppatori naturalmente non penserebbe di aggiungere un manifest a un sito di notizie. Il file manifest consente di definire cosa avviare (la home page del sito di notizie) e come avviarlo (a schermo intero o come una normale scheda del browser).

La scelta è tua e dipende da come ritieni che i tuoi utenti vorranno accedere alla tua esperienza. Se vuoi che il tuo sito abbia tutte le funzionalità del browser che ti aspetteresti da un sito, puoi impostare la visualizzazione su browser.

    "display": "browser"

Se vuoi che il tuo sito di notizie abbia la stessa esperienza della maggior parte delle app incentrate sulle notizie, imposta il valore display su standalone per rimuovere dall'interfaccia utente tutto il rivestimento del browser simile a quello del web.

    "display": "standalone"

Simulazione: nascondi automaticamente la barra degli indirizzi

Puoi "simulare il fullscreen" nascondendo automaticamente la barra degli indirizzi nel seguente modo:

window.scrollTo(0, 1);

Si tratta di un metodo abbastanza semplice: la pagina viene caricata e la barra del browser viene rimossa. Purtroppo non è standardizzato e non è supportato bene. Inoltre, devi aggirare una serie di stranezze.

Ad esempio, i browser spesso ripristinano la posizione nella pagina quando l'utente vi fa ritorno. L'utilizzo di window.scrollTo sostituisce questa impostazione, il che infastidisce l'utente. Per aggirare il problema, devi memorizzare l'ultima posizione in localStorage e gestire i casi limite (ad esempio, se l'utente ha aperto la pagina in più finestre).

Linee guida UX

Quando crei un sito che sfrutta lo schermo intero, devi tenere conto di una serie di potenziali modifiche all'esperienza utente per poter creare un servizio che i tuoi utenti apprezzeranno.

Non fare affidamento sui controlli di navigazione

iOS non ha un pulsante Indietro hardware o un gesto di aggiornamento. Pertanto, devi assicurarti che gli utenti possano navigare nell'app senza essere bloccati.

Puoi rilevare facilmente se stai utilizzando una modalità a schermo intero o una modalità installata su tutte le principali piattaforme.

iOS

Su iOS puoi utilizzare il valore booleano navigator.standalone per verificare se l'utente ha avviato l'app dalla schermata Home.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Manifest dell'app web (Chrome, Opera, Samsung)

Quando viene avviato come app installata, Chrome non è in esecuzione in un'esperienza in vero schermo intero, pertanto document.fullscreenElement restituisce null e i selettori CSS non funzionano.

Quando l'utente richiede la modalità a schermo intero tramite un gesto sul tuo sito, sono disponibili le API a schermo intero standard, incluso lo pseudo selettore CSS che ti consente di adattare l'interfaccia utente in modo che reagisca allo stato a schermo intero, come segue

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Se gli utenti avviano il tuo sito dalla schermata Home, la query mediadisplay-mode verrà impostata su quanto definito nel file manifest dell'app web. Nel caso di puro schermo intero sarà:

@media (display-mode: fullscreen) {
}

Se l'utente avvia l'applicazione in modalità autonoma, la query media display-mode è standalone:

@media (display-mode: standalone) {
}

Firefox

Quando l'utente richiede lo schermo intero tramite il tuo sito o avvia l'app in modalità schermo intero, sono disponibili tutte le API Fullscreen standard, incluso lo pseudo selettore CSS, che ti consente di adattare l'interfaccia utente in modo che reagisca allo stato a schermo intero come segue:

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

In IE l'pseudo classe CSS non ha un trattino, ma per il resto funziona in modo simile a Chrome e Firefox.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Specifica

L'ortografia nella specifica corrisponde alla sintassi utilizzata da IE.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Mantenere l'utente nell'esperienza a schermo intero

L'API a schermo intero può essere un po' complicata a volte. I fornitori di browser non vogliono bloccare gli utenti in una pagina a schermo intero, quindi hanno sviluppato meccanismi per uscire dalla modalità a schermo intero il prima possibile. Ciò significa che non puoi creare un sito web in fullscreen che si estende su più pagine perché:

  • La modifica dell'URL in modo programmatico utilizzando window.location = "http://example.com" interrompe la modalità a schermo intero.
  • Un utente che fa clic su un link esterno all'interno della tua pagina uscirà dal fullscreen.
  • Anche la modifica dell'URL tramite l'API navigator.pushState interrompe l'esperienza a schermo intero.

Se vuoi mantenere l'utente in un'esperienza a schermo intero, hai due opzioni:

  1. Utilizza i meccanismi delle app web installabili per passare a schermo intero.
  2. Gestisci l'interfaccia utente e lo stato dell'app utilizzando il frammento #.

Utilizzando la sintassi # per aggiornare l'URL (window.location = "#somestate") e ascoltando l'evento window.onhashchange, puoi utilizzare la pila di cronologia del browser per gestire le modifiche allo stato dell'applicazione, consentire all'utente di utilizzare i pulsanti Indietro hardware o offrire un'esperienza semplice con il pulsante Indietro programmatico utilizzando l'API history come segue:

window.history.go(-1);

Consenti all'utente di scegliere quando attivare lo schermo intero

Non c'è niente di più fastidioso per l'utente di un sito web che fa qualcosa di imprevisto. Quando un utente visita il tuo sito, non cercare di indurlo a attivare il fullscreen.

Non intercettare il primo evento tocco e chiamare requestFullscreen().

  1. È fastidioso.
  2. In futuro, i browser potrebbero decidere di chiedere all'utente di consentire all'app di occupare lo schermo intero.

Se vuoi avviare le app a schermo intero, ti consigliamo di utilizzare le esperienze di installazione per ogni piattaforma.

Non inviare spam all'utente per installare la tua app in una schermata Home

Se prevedi di offrire un'esperienza a schermo intero tramite i meccanismi dell'app installata, tieni conto dell'utente.

  • Sii discreto. Utilizza un banner o un piè di pagina per comunicare agli utenti che possono installare l'app.
  • Se ignora la richiesta, non mostrarla di nuovo.
  • È improbabile che un utente voglia installare l'app alla prima visita, a meno che non sia soddisfatto del tuo servizio. Valuta la possibilità di chiedere di installarlo dopo una interazione positiva sul tuo sito.
  • Se un utente visita regolarmente il tuo sito e non installa l'app, è improbabile che lo faccia in futuro. Non continuare a inviare spam.

Conclusione

Anche se non abbiamo un'API completamente standardizzata e implementata, utilizzando alcune delle indicazioni riportate in questo articolo puoi creare facilmente esperienze che sfruttano l'intero schermo dell'utente, indipendentemente dal client.

Feedback