Esperienze a schermo intero

Possiamo creare facilmente applicazioni e siti web immersivi a schermo intero, ma, come qualsiasi cosa sul web, ci sono un paio di modi per farlo. Questo aspetto è particolarmente importante ora che più browser supportano l'esperienza di "app web installata" che viene avviata a schermo intero.

Visualizzazione a schermo intero dell'app o del sito

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

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

Richiedere l'attivazione della modalità a schermo intero del browser in risposta a un gesto dell'utente

Non tutte le piattaforme sono uguali. iOS Safari non dispone di un'API a schermo intero, ma lo è su Chrome su 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 principali API JS di cui devi tenere conto quando crei un'esperienza a schermo intero sono:

  • element.requestFullscreen() (attualmente preceduto da un 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 invece cancelFullScreen()) annulla la modalità a schermo intero.
  • document.fullscreenElement (attualmente con prefisso in Chrome, Firefox e IE) restituisce true se uno o più elementi sono in modalità a schermo intero.

Quando la tua app è a schermo intero, non hai più a disposizione i controlli UI del browser. Questo cambia il modo in cui gli utenti interagiscono con la tua esperienza. Non dispongono dei controlli di navigazione standard come Avanti e Indietro; non hanno l'opzione di escape che è il pulsante Aggiorna. È importante tenere conto di questo scenario. Puoi utilizzare alcuni selettori CSS per modificare lo stile e la presentazione del sito quando il browser attiva la 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: ho nascosto tutta la complessità relativa all'uso dei prefissi dei fornitori.

Il codice effettivo è molto più complesso. Mozilla ha creato uno script molto utile che puoi utilizzare per attivare lo schermo intero. Come puoi vedere, la situazione del prefisso del fornitore è complessa e ingombrante rispetto all'API specificata. Anche con il codice leggermente semplificato 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 detestiamo la complessità. Una bella API astratta di alto livello che puoi utilizzare è il modulo Screenfull.js di Sindre Sorhus, che unisce le due API JS e i prefissi del fornitore leggermente diversi in un'unica API coerente.

Suggerimenti per l'API Fullscreen

Visualizzazione del documento a schermo intero
Schermo intero sull&#39;elemento body
Figura 1: schermo intero sull'elemento body.

È naturale pensare di visualizzare l'elemento body a schermo intero, ma se utilizzi un motore di rendering basato su WebKit o Blink, noterai che l'effetto è strano: ridurre la larghezza del corpo alla dimensione più piccola possibile per contenere tutti i contenuti. (Mozilla Gecko).

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

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

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

La visualizzazione a schermo intero di un elemento video equivale alla visualizzazione a schermo intero di qualsiasi altro elemento. Chiama il metodo requestFullscreen nell'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 per l'elemento <video> non è stato definito l'attributo dei controlli, l'utente non potrà controllare il video una volta visualizzato a schermo intero. Il modo consigliato per eseguire questa operazione è disporre di un container di base che aggrega il video e i controlli che vuoi che l'utente visualizzi.

<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>

Questo ti offre molta più flessibilità perché puoi combinare l'oggetto container con lo pseudo-selettore 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 a schermo intero è in esecuzione e adattare l'interfaccia utente di conseguenza, ad esempio:

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

Avviare una pagina a schermo intero dalla schermata Home

Non è possibile avviare una pagina web a schermo intero quando l'utente vi accede. I fornitori di browser sanno bene che l'esperienza a schermo intero a ogni caricamento pagina è un grosso fastidio, pertanto è necessario un gesto dell'utente per accedere alla modalità a schermo intero. Tuttavia, i fornitori consentono agli utenti di "installare" le app e l'atto di installazione è un segnale al sistema operativo che l'utente vuole lanciare come app sulla piattaforma.

Nelle principali piattaforme per dispositivi mobili l'implementazione è semplice utilizzando meta tag o file manifest, come indicato di seguito.

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 i contenuti sono impostati su sì, l'applicazione web viene eseguita in modalità a schermo intero; in caso contrario, non viene eseguita. Il comportamento predefinito prevede l'utilizzo di 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

Il team di Chrome ha recentemente implementato una funzionalità che comunica al browser di avviare la pagina a schermo intero quando l'utente l'ha aggiunta alla schermata Home. È simile al modello iOS Safari.

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

Puoi configurare l'app web in modo che venga aggiunta l'icona di una scorciatoia dell'applicazione alla schermata Home di un dispositivo e che l'app venga avviata in "modalità app" a schermo intero utilizzando la voce di 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 offre a te, come sviluppatore, la possibilità di controllare come viene visualizzata l'app all'utente nelle aree in cui l'utente si aspetta di vedere le app (ad esempio la schermata Home del dispositivo mobile), indicare cosa può lanciare l'utente e, soprattutto, come può avviarla. In futuro il file manifest ti offrirà un controllo ancora maggiore sulla tua app, ma al momento ci stiamo concentrando solo su come lanciare la tua app. In particolare:

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

Dopo aver creato il manifest e averlo ospitato sul tuo sito, devi solo aggiungere un tag link da tutte le pagine che includono la tua app, come indicato di seguito:

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

Chrome supporta i manifest dalla versione 38 per Android (ottobre 2014) e ti consente di controllare la modalità di visualizzazione della tua app web quando viene installata nella schermata Home (tramite le proprietà short_name, name e icons) e il modo in cui 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 in un file 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 l'intenzione da parte dell'utente di considerarli come un'app, quindi devi indirizzare l'utente alla funzionalità della tua app anziché a una pagina di destinazione del prodotto. Ad esempio, se all'utente viene richiesto di accedere alla tua app, questa è una buona pagina da avviare.

App di utilità

La maggior parte delle app di utilità ne usufruirà immediatamente. È probabile che tu voglia che queste app vengano lanciate in modo autonomo, proprio come qualsiasi altra app su una piattaforma mobile. Per indicare a un'app di avviarsi in modo autonomo, aggiungi questo file manifest dell'app web:

    "display": "standalone"
Giochi

La maggior parte dei giochi beneficia immediatamente di un manifest. La maggior parte dei giochi vuole lanciare i giochi a schermo intero e avere un orientamento specifico.

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

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

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

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

I siti di notizie, nella maggior parte dei casi, sono esperienze puramente basate sui contenuti. La maggior parte degli sviluppatori naturalmente non penserebbe di aggiungere un file manifest a un sito di notizie. Il file manifest ti consente di definire cosa avviare (la prima pagina del tuo sito di notizie) e come farlo (a schermo intero o come una normale scheda del browser).

La scelta spetta a te e al modo in cui pensi che gli utenti possano accedere alla tua esperienza. Se vuoi che il tuo sito disponga di tutto il browser Chrome che ti aspetti sia di avere un sito, puoi impostare il display su browser.

    "display": "browser"

Se vuoi che il tuo sito di notizie abbia l'impressione che la maggior parte delle app incentrate sulle notizie consideri le proprie esperienze come app e rimuova dall'interfaccia utente tutto il Chrome simile al web, puoi a questo scopo impostando la visualizzazione su standalone.

    "display": "standalone"

Finto: nascondi automaticamente la barra degli indirizzi

Puoi "fasullo schermo intero" nascondendo automaticamente la barra degli indirizzi nel seguente modo:

window.scrollTo(0, 1);

Questo è un metodo piuttosto semplice: la pagina viene caricata e la barra del browser viene disposta a ostacolare. Sfortunatamente, non è standardizzato e non è ben supportato. Devi anche risolvere alcune peculiarità.

Ad esempio, i browser spesso ripristinano la posizione sulla pagina quando l'utente ritorna nella pagina. L'utilizzo di window.scrollTo esegue l'override di questo valore, il che infastidisce l'utente. Per ovviare a questo problema, devi archiviare l'ultima posizione in localStorage e gestire i casi limite (ad esempio, se l'utente ha la pagina aperta in più finestre).

Linee guida per l'esperienza utente

Quando crei un sito che sfrutta la visualizzazione a schermo intero, devi conoscere una serie di potenziali modifiche all'esperienza utente di cui devi essere a conoscenza per poter creare un servizio che gli utenti apprezzeranno.

Non affidarti ai controlli di navigazione

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

Puoi rilevare facilmente se è in esecuzione in modalità a schermo intero o installata su tutte le principali piattaforme.

iOS

Su iOS puoi usare il valore booleano navigator.standalone per vedere se l'utente si è avviato o meno dalla schermata Home.

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

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

All'avvio come app installata, Chrome non viene eseguito in un'esperienza a schermo intero reale, quindi 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 standard a schermo intero, tra cui lo pseudo-selettore CSS che ti consente di adattare la tua UI per reagire allo stato a schermo intero come riportato di seguito.

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 multimediale display-mode verrà impostata sul valore definito nel file manifest dell'app web. Nel caso dello schermo intero puro:

@media (display-mode: fullscreen) {
}

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

@media (display-mode: standalone) {
}

Firefox

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

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 la pseudo classe CSS è priva di 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
}

Specifiche

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
}

Mantieni l'utente nell'esperienza a schermo intero

L'API a schermo intero a volte può essere un po' complessa. I fornitori di browser non vogliono bloccare gli utenti in una pagina a schermo intero, pertanto hanno sviluppato meccanismi per uscire dalla modalità a schermo intero il prima possibile. Questo significa che non puoi creare un sito web a schermo intero che si sviluppa su più pagine per i seguenti motivi:

  • La modifica dell'URL in modo programmatico mediante window.location = "http://example.com" interrompe la visualizzazione a schermo intero.
  • Se un utente fa clic su un link esterno all'interno della pagina, uscirà dalla modalità a schermo intero.
  • Se modifichi l'URL tramite l'API navigator.pushState, l'esperienza a schermo intero verrà interrotta.

Per offrire agli utenti un'esperienza a schermo intero, hai due opzioni:

  1. Utilizza i meccanismi delle app web installabili per passare alla modalità a schermo intero.
  2. Gestisci la UI e lo stato dell'app utilizzando il frammento #.

Utilizzando l'hashtag #syntax per aggiornare l'URL (window.location = "#somestate") e ascoltando l'evento window.onhashchange, puoi usare lo stack della cronologia del browser per gestire le modifiche allo stato dell'applicazione, consentire all'utente di usare i pulsanti Indietro hardware oppure offrire una semplice esperienza 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 provare a ingannarlo a schermo intero.

Non intercettare l'evento primo contatto e chiama requestFullscreen().

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

Se vuoi avviare le app a schermo intero, valuta la possibilità di utilizzare le esperienze di installazione per ogni piattaforma.

Non inviare spam all'utente affinché installi la tua app in una schermata Home

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

  • Sii discreto. Utilizza un banner o un piè di pagina per far sapere agli utenti che possono installare l'app.
  • Se ignorano la richiesta, non mostrarla più.
  • Alla prima visita degli utenti, è improbabile che vogliano installare l'app, a meno che non siano soddisfatti del servizio offerto. Potresti invitarli a eseguire l'installazione dopo un'interazione positiva sul tuo sito.
  • Se un utente visita regolarmente il tuo sito e non installa l'app, è improbabile che lo installi in futuro. Non continuare a inviargli spam.

Conclusione

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

Feedback