Esperienze a schermo intero

Abbiamo la possibilità di creare facilmente siti web immersivi a schermo intero e ma, come per qualsiasi altro sito web, ci sono un paio di modi per farlo. Ciò è particolarmente importante ora che più browser supportano un'istruzione app web" che avvia la modalità a schermo intero.

Visualizzazione dell'app o del sito a schermo intero

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

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

Richiedere la visualizzazione a schermo intero del browser in risposta a un gesto dell'utente

Non tutte le piattaforme sono uguali. Safari per iOS non ha un'API a schermo intero, ma su Chrome su Android Firefox, IE 11 e versioni successive. La maggior parte delle applicazioni che crei utilizza una combinazione l'API JS e i selettori CSS forniti dalla specifica a schermo intero. Il principale Le API JS che devi tenere presenti quando crei un'esperienza a schermo intero sono:

  • element.requestFullscreen() (prefisso attualmente in Chrome, Firefox e IE) mostra l'elemento in modalità a schermo intero.
  • document.exitFullscreen() (prefisso attualmente in Chrome, Firefox e IE. Firefox utilizza invece cancelFullScreen()) annulla la modalità a schermo intero.
  • document.fullscreenElement (prefisso attualmente in Chrome, Firefox e IE) restituisce true se uno o più elementi sono in modalità a schermo intero.
di Gemini Advanced.

Quando l'app è a schermo intero non hai più i controlli UI del browser a tua disposizione. Questo cambia il modo in cui gli utenti interagiscono con i tuoi un'esperienza senza intervento manuale. Non dispongono dei controlli di navigazione standard come Inoltra e viceversa; non hanno il pulsante di aggiornamento. È è importante per far fronte a questo scenario. Puoi utilizzare alcuni selettori CSS modifichi lo stile e la presentazione del sito quando il browser accede 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 sopra è un po' artificioso; Ho nascosto tutte le complessità l'uso dei prefissi dei fornitori.

Il codice vero e proprio è molto più complesso. Mozilla ha creato uno script molto utile che puoi usare per attivare/disattivare la modalità a schermo intero. Come puoi vedere, la situazione del prefisso del fornitore è complessa e ingombrante rispetto all'API specificata. Anche con il codice leggermente semplificato sottostante, è comunque complessa.

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 uno un'API coerente.

Suggerimenti sull'API Fullscreen

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

È naturale pensare di prendere l'elemento corporeo a schermo intero, ma su un motore di rendering basato su WebKit o Blink, vedrete che ha uno strano effetto riducendo la larghezza del corpo alla dimensione più piccola possibile che contenga tutte le contenuti. (Mozilla Gecko va bene.)

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

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

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

Creare un elemento video a schermo intero è come creare qualsiasi altro elemento elemento a schermo intero. Chiamerai il metodo requestFullscreen nel 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 controlli, l'utente non potrà controllare il video a schermo intero. La si consiglia di usare un container di base che aggrega 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>

Questo ti offre molta più flessibilità perché puoi combinare con lo pseudoselettore 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>

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

  • Fornendo un link per tornare alla pagina iniziale
  • Mettendo a disposizione un meccanismo per chiudere i dialoghi o spostarsi all'indietro

Avvio di una pagina a schermo intero dalla schermata Home

Non è possibile avviare una pagina web a schermo intero quando l'utente accede a tale pagina. I fornitori di browser sono consapevoli del fatto che l'esperienza a schermo intero a ogni caricamento pagina è molto fastidioso, pertanto per attivare la modalità a schermo intero è necessario un gesto dell'utente. I fornitori consentono agli utenti di "installare" app e l'installazione è un'operazione segnalare al sistema operativo che l'utente vuole avviare come app sul completamente gestita.

Nelle principali piattaforme mobile, l'implementazione è molto semplice, utilizzando i meta tag o i file manifest, come mostrato di seguito.

iOS

Dal lancio di iPhone, gli utenti possono installare applicazioni web per la schermata Home e avviarle come app web a schermo intero.

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

Se per i contenuti è selezionata l'opzione Sì, l'applicazione web viene eseguita in modalità a schermo intero; altrimenti non avviene. Il comportamento predefinito è utilizzare Safari per visualizzare contenuti. Puoi stabilire 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 avvia la pagina a schermo intero dopo che l'utente l'ha aggiunta alla schermata Home. È in modo simile al modello Safari per iOS.

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

Puoi configurare l'applicazione web in modo che l'icona di una scorciatoia applicazione venga aggiunta a un schermata Home di un dispositivo e avviare l'app in "modalità app" a schermo intero utilizzando "Aggiungi a schermata Home" di Chrome per Android voce di menu.

Google Chrome

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

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

Il file Manifest per le applicazioni web è un semplice file JSON che fornisce i dati sviluppatore, la possibilità di controllare il modo in cui l'app viene visualizzata dall'utente nelle zone che si aspettano di vedere le app (ad esempio la schermata Home dei dispositivi mobili), ciò che l'utente può lanciare e, soprattutto, come può lanciarlo. Nella il manifest ti offrirà ancora più controllo sulla tua app, ma ora ci concentreremo solo su come lanciare la tua app. In particolare:

  1. Invio del file manifest al browser
  2. Descrizione della procedura di avvio

Una volta creato il manifest e averlo ospitato sul tuo sito, ti basterà devi aggiungere un tag link da tutte le pagine relative all'app, come indicato di seguito:

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

Chrome supporta i manifest dalla versione 38 per Android (ottobre 2014) e ti permette di controllare l'aspetto della tua app web una volta installata alla schermata Home (tramite le proprietà short_name, name e icons) e come deve essere avviato 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 contenuto in un del 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"
}

Si tratta di una funzionalità completamente progressiva e ti consente di creare esperienze integrate per gli utenti di un browser che supporta questa funzionalità.

Quando un utente aggiunge il tuo sito o la tua app alla schermata Home, rileva l'intento del all'utente per considerarla un'app. Ciò significa che dovresti indirizzare l'utente a la funzionalità dell'app anziché la pagina di destinazione del prodotto. Ad esempio: se l'utente deve accedere alla tua app, questa è una buona pagina per avviare l'applicazione.

App di utilità

La maggior parte delle app di utilità ne trarrà vantaggio immediatamente. Per quelli app che probabilmente vuoi che vengano lanciate in modalità autonoma, proprio come ogni altra app su una piattaforma per dispositivi mobili. Per impostare un'app in modo che venga avviata la versione autonoma, aggiungila sul Web Manifest dell'app:

    "display": "standalone"
Videogiochi

La maggior parte dei giochi beneficerà immediatamente di un file manifest. Il vast la maggior parte dei giochi vorrà avviarsi a schermo intero e forzato l'avvio di una orientamento.

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

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

Se invece state creando un rompicapo o un gioco come X-Com, allora probabilmente il gioco utilizzerà 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 non penseresti di aggiungere un file manifest a un sito di notizie. Il file manifest ti consentirà di definire cosa lanciare (la prima pagina del tuo sito di notizie) e come si avvia (a schermo intero o come una normale scheda del browser).

La scelta spetta a te e al modo in cui pensi che gli utenti apprezzeranno l'accesso al tuo un'esperienza senza intervento manuale. Se vuoi che il tuo sito abbia tutto il browser Chrome che desideri che un sito potrebbe avere, puoi impostare la visualizzazione su browser.

    "display": "browser"

Se vuoi che il tuo sito di notizie venga considerato come la maggior parte delle app incentrate sulle notizie le loro esperienze come app e rimuovere dalla UI tutti gli elementi Chrome simili a quelli del web, per farlo impostando la visualizzazione su standalone.

    "display": "standalone"

Falsa: nascondi automaticamente la barra degli indirizzi

Puoi usare la funzionalità "Falso schermo intero" nascondendo automaticamente la barra degli indirizzi nel seguente modo:

window.scrollTo(0, 1);

Si tratta di un metodo semplice, la pagina si carica e la barra del browser togliti di mezzo. Purtroppo non è standardizzata e non bene supportati. Devi anche aggirare una serie di stranezze.

Ad esempio, i browser spesso ripristinano la posizione sulla pagina quando l'utente vi ritorna. L'utilizzo di window.scrollTo esegue l'override di questa impostazione, infastidendo per l'utente. Per ovviare a questo, devi memorizzare l'ultima posizione localStorage e gestire i casi limite (ad esempio, se l'utente ha pagina aperta in più finestre).

Linee guida per l'esperienza utente

Quando crei un sito che utilizza la modalità a schermo intero, puoi utilizzare di potenziali modifiche all'esperienza utente di cui devi essere a conoscenza creare un servizio che i tuoi utenti adoreranno.

Non fare affidamento sui controlli di navigazione

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

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

iOS

Su iOS puoi utilizzare il valore booleano navigator.standalone per vedere se l'utente ha avviato 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 è in esecuzione in modalità a schermo intero reale pertanto document.fullscreenElement restituisce un valore nullo e i selettori CSS non funzionano.

Quando l'utente richiede la modalità a schermo intero tramite un gesto sul tuo sito, lo standard sono disponibili API a schermo intero, tra cui lo pseudoselettore CSS che consente adattare la UI in modo che reagisca allo stato a schermo intero come illustrato 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, il file multimediale display-mode verrà impostata su quella definita nel file manifest dell'app web. Nel caso di sarà: a schermo intero puro:

@media (display-mode: fullscreen) {
}

Se l'utente avvia l'applicazione in modalità autonoma, display-mode la query multimediale 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, tra cui Pseudoselettore CSS, che ti consente di adattare la UI in modo che reagisca allo stato a schermo intero. ad esempio:

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 manca 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 della specifica corrisponde alla sintassi utilizzata da IE.

selector:fullscreen {
  display: block;
}

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

Offri all'utente l'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 nella pagina a schermo intero in modo che abbiano sviluppato meccanismi per interrompere fuori dalla modalità a schermo intero appena possibile. Ciò significa che non puoi creare sito web a schermo intero che si estende su più pagine perché:

  • La modifica programmatica dell'URL mediante window.location = "http://example.com" consente di uscire dalla modalità a schermo intero.
  • Un utente che fa clic su un link esterno nella tua pagina esce dalla modalità a schermo intero.
  • La modifica dell'URL tramite l'API navigator.pushState comporterà anche a schermo intero.

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

  1. Usa i meccanismi installabili dell'app web per passare alla modalità a schermo intero.
  2. Gestisci lo stato dell'interfaccia utente e dell'app utilizzando il frammento #.

Utilizzando la #sinttax per aggiornare l'URL (window.location = "#somestate") e ascoltare l'evento window.onhashchange; puoi usare le impostazioni del browser per gestire le modifiche allo stato dell'applicazione, consentire all'utente di usare o offrire un semplice pulsante Indietro programmatico usando l'API History nel seguente modo:

window.history.go(-1);

Consenti all'utente di scegliere quando passare alla modalità a schermo intero

Non c'è niente di più fastidioso per l'utente di un sito web che fa qualcosa inaspettato. Quando un utente visita il tuo sito, non cercare di indurlo con l'inganno a schermo intero.

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

  1. È fastidioso.
  2. I browser potrebbero decidere di chiedere all'utente in futuro di consentendo all'app di occupare lo schermo intero.

Se desideri avviare le app a schermo intero, prova a utilizzare l'app 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 delle app installate nei confronti dell'utente.

  • Usa la discrezione. Utilizza un banner o un piè di pagina per comunicare che può installare dell'app.
  • Se ignora la richiesta, non mostrarla più.
  • Alla prima visita di un utente, è improbabile che voglia installare l'app, a meno che sono soddisfatti del tuo servizio. Valuta la possibilità di invitarli a eseguire l'installazione dopo un'interazione positiva sul tuo sito.
  • Se un utente visita il tuo sito regolarmente e non installa l'app, è improbabile che installi la tua app in futuro. Non continuare a inviarle spam.

Conclusione

Anche se non abbiamo un'API completamente standardizzata e implementata, alcuni dei presentate in questo articolo, puoi facilmente creare esperienze che sfruttare l'intero schermo dell'utente, indipendentemente dal cliente.

Feedback