Como criar experiências em tela cheia

Conseguimos criar facilmente sites imersivos em tela cheia e aplicativos, mas, como qualquer coisa na Web, há algumas maneiras de fazer isso. Isso é especialmente importante agora que mais navegadores oferecem suporte a um " app da Web" que iniciam a tela cheia.

Colocar seu aplicativo ou site em tela cheia

Há várias maneiras de um usuário ou desenvolvedor colocar um app da Web em tela cheia.

  • Solicitar ao navegador a exibição em tela cheia em resposta a um gesto do usuário.
  • Instale o app na tela inicial.
  • Simular: ocultar automaticamente a barra de endereço.

Solicitar ao navegador a exibição em tela cheia em resposta a um gesto do usuário

Nem todas as plataformas são iguais. O iOS Safari não tem uma API de tela cheia, mas temos no Chrome no Android, Firefox e IE 11+. A maioria dos aplicativos que você cria usará uma combinação da API JS e os seletores de CSS fornecidos pela especificação de tela cheia. O principal As APIs JS com as quais você precisa se preocupar ao criar uma experiência de tela cheia são:

  • element.requestFullscreen() (atualmente prefixado no Chrome, no Firefox e no IE) exibe o elemento no modo de tela cheia.
  • document.exitFullscreen() (atualmente prefixado no Chrome, no Firefox e no IE. O Firefox usa cancelFullScreen(), em vez disso, cancela o modo de tela cheia.
  • document.fullscreenElement (atualmente prefixado no Chrome, no Firefox e no IE) retorna verdadeiro se algum dos elementos estiver no modo de tela cheia.
.

Quando o app está em tela cheia, os controles de interface do navegador não são mais exibidos disponíveis para você. Isso muda a forma como os usuários interagem com seu do usuário. Eles não têm os controles de navegação padrão, como "Avançar". e para trás. não há uma saída de emergência, que é o botão Atualizar. Está importante para atender a esse cenário. Use alguns seletores de CSS para ajudar você muda o estilo e a apresentação do site quando o navegador modo de tela cheia.

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

O exemplo acima é um pouco inventivo; Eu escondi toda a complexidade o uso de prefixos de fornecedor.

O código real é muito mais complexo. Mozilla criou um script muito útil que pode ser usado para alternar a tela cheia. Conforme podemos ver, a situação do prefixo do fornecedor é complexa e complicado em comparação com a API especificada. Mesmo com o código um pouco simplificado abaixo, ele ainda é complexo.

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);
  }
}

Nós, desenvolvedores Web, odiamos complexidade. Uma boa API abstrata de alto nível que você pode usar é o módulo Screenfull.js de Sindre Sorhus que unifica os dois prefixos de fornecedor e API do JS ligeiramente diferentes em um uma API consistente.

Dicas para a API de tela cheia

Exibição do documento em tela cheia
Tela cheia no elemento do corpo
Figura 1: tela cheia no elemento do corpo.

É natural pensar que você coloca o elemento corpo em tela cheia, mas se estiver em um mecanismo de renderização baseado no WebKit ou Blink, você verá que ele tem um efeito estranho de encolher a largura do corpo para o menor tamanho possível que vai conter todas as conteúdo. (o Mozilla Gecko funciona).

Tela cheia no elemento do documento
Figura 2: tela cheia no elemento do documento.

Para corrigir isso, use o elemento "document" em vez do elemento "body":

document.documentElement.requestFullscreen();
Colocar um elemento de vídeo em tela cheia

Colocar um elemento de vídeo em tela cheia é exatamente o mesmo que fazer qualquer outro em tela cheia. Você chama o método requestFullscreen no vídeo .

<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 o elemento <video> não tiver o atributo de controles definido, o usuário não consegue controlar o vídeo quando ele está em tela cheia. A a maneira recomendada de fazer isso é ter um contêiner básico que envolva o vídeo e os controles que você quer mostrar para o usuário.

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

Isso oferece muito mais flexibilidade, porque é possível combinar o com o pseudoseletor de CSS (por exemplo, para ocultar o botão "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>

Com esses padrões, você pode detectar quando a tela cheia está sendo exibida e adaptar do usuário da maneira apropriada, por exemplo:

  • Fornecendo um link para voltar à página inicial.
  • Fornecendo um mecanismo para fechar caixas de diálogo ou navegar para trás

Como iniciar uma página em tela cheia

Não é possível abrir uma página da Web em tela cheia quando o usuário navega até ela. Os fornecedores de navegadores sabem que uma experiência de tela cheia em cada carregamento de página é um grande incômodo, então é necessário um gesto do usuário para entrar no modo de tela cheia. Os fornecedores permitem que os usuários "instalem" aplicativos, e o ato de instalar é um sinalizar ao sistema operacional que o usuário deseja lançar um aplicativo na de plataforma.

Nas principais plataformas móveis, é muito fácil implementar usando meta tags ou arquivos de manifesto, como mostrado a seguir.

iOS

Desde o lançamento do iPhone, os usuários podem instalar aplicativos da web para na tela inicial e iniciá-los como aplicativos da Web em tela cheia.

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

Se content for definido como sim, o aplicativo da Web será executado no modo de tela cheia. caso contrário, ela não funciona. O comportamento padrão é usar o Safari para exibir arquivos conteúdo. É possível determinar se uma página da Web é exibida no modo de tela cheia. usando a propriedade JavaScript booleano window.navigator.inscrito somente leitura.

Apple

Google Chrome para Android

A equipe do Chrome implementou recentemente um recurso que diz ao navegador para inicia a página em tela cheia quando o usuário a adiciona à tela inicial. É semelhante ao modelo do Safari para iOS.

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

Você pode configurar seu aplicativo da web para ter um ícone de atalho do aplicativo adicionado a um tela inicial do dispositivo e fazer com que o aplicativo seja iniciado em tela cheia "modo de aplicativo" usando "Adicionar à tela inicial" do Google Chrome para Android item de menu.

Google Chrome

Uma opção melhor é usar o manifesto do app da Web.

Manifesto do app da Web (Chrome, Opera, Firefox, Samsung)

O Manifesto para aplicativos da Web é um arquivo JSON simples que fornece a você, desenvolvedor, a capacidade de controlar como seu aplicativo aparece para o usuário nas áreas que esperariam ver aplicativos (por exemplo, a tela inicial do celular), direcionar o que o usuário pode lançar e, mais importante, como ele pode iniciá-lo. Na o manifesto dará a você ainda mais controle sobre seu aplicativo, mas agora nosso foco é como seu app pode ser lançado. Especificamente:

  1. Como informar o navegador sobre seu manifesto
  2. Descrição de como iniciar

Depois de criar o manifesto e hospedá-lo no seu site, você só precisa é adicionar uma tag de link de todas as páginas que abrangem seu aplicativo, da seguinte maneira:

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

O Chrome é compatível com manifestos desde a versão 38 para Android (outubro de 2014) e oferece controle sobre como seu app da Web aparece quando é instalado à tela inicial (pelas propriedades short_name, name e icons) e como ela deve ser iniciado quando o usuário clica no ícone de inicialização (usando o start_url, display e orientation).

Confira um exemplo de manifesto abaixo. Ele não mostra tudo o que pode estar em um manifesto do aplicativo.

{
  "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"
}

Esse recurso é totalmente progressivo e permite criar conteúdo melhor, experiências integradas para usuários de um navegador compatível com o recurso.

Quando um usuário adiciona seu site ou app à tela inicial, há uma intent do o usuário a tratá-lo como um aplicativo. Isso significa que você deve ter como objetivo direcionar o usuário para a funcionalidade do seu app em vez da página de destino do produto. Por exemplo: se o usuário tiver que fazer login em seu aplicativo, essa é uma boa página para lançamento.

Apps utilitários

A maioria dos aplicativos utilitários se beneficiará disso imediatamente. Para quem Você provavelmente vai querer que eles sejam lançados de forma independente, assim como todos os outros apps em uma plataforma móvel. Para instruir um app a iniciar de forma independente, adicione o código do Manifesto do app:

    "display": "standalone"
Jogos

A maioria dos jogos vai se beneficiar de um manifesto imediatamente. A vasta a maioria dos jogos desejará abrir em tela cheia e forçar uma orientação.

Se você está desenvolvendo um botão de rolagem vertical ou um jogo como o Flappy Birds, provavelmente vai querer que o jogo fique sempre no modo retrato.

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

Se, por outro lado, você está criando um quebra-cabeça ou um jogo como X-Com, então você provavelmente vai querer que o jogo sempre use a orientação paisagem.

    "display": "fullscreen",
    "orientation": "landscape"
Sites de notícias

Na maioria dos casos, os sites de notícias são experiências puramente baseadas em conteúdo. A maioria dos desenvolvedores não pensariam em adicionar um manifesto a um site de notícias. O manifesto permitirá que você defina o que lançar (a página inicial do seu site de notícias) e como iniciá-lo (tela cheia ou como uma guia normal do navegador).

A escolha depende de você e de como você acha que os usuários gostariam de acessar seus do usuário. Se você quiser que seu site tenha todo o navegador Chrome que você espera que um site tenha, defina a exibição como browser.

    "display": "browser"

Se você quiser que seu site de notícias tenha a aparência da maioria dos apps focados em notícias, suas experiências como aplicativos e remover da interface do usuário todo o Chrome semelhante à web, defina a exibição como standalone.

    "display": "standalone"

Simular: ocultar automaticamente a barra de endereço

É possível "falsificar tela cheia" Ocultando automaticamente a barra de endereço, faça o seguinte:

window.scrollTo(0, 1);

Esse é um método bem simples: a página carrega e a barra do navegador é instruída a não atrapalhe você. Infelizmente, ele não é padronizado e não está bem suporte. Você também tem que resolver um monte de peculiaridades.

Por exemplo, os navegadores costumam restaurar a posição na página quando o usuário e navegar de volta para ele. O uso de window.scrollTo substitui isso, o que é irritante o usuário. Para contornar isso, você tem que armazenar a última posição em localStorage e lida com os casos extremos (por exemplo, se o usuário tem página aberta em várias janelas).

Orientações de UX

Ao criar um site que aproveita a tela cheia, há um de possíveis mudanças na experiência do usuário das quais você precisa estar ciente para de criar um serviço que seus usuários vão adorar.

Não dependa dos controles de navegação

O iOS não possui um botão "Voltar" físico ou um gesto de atualização. Portanto, você deve garantir que os usuários possam navegar pelo aplicativo sem ficarem presos.

Você pode detectar se está executando no modo de tela cheia ou no modo instalado facilmente em todas as principais plataformas.

iOS

No iOS, você pode usar o booleano navigator.standalone para ver se o usuário foi iniciado pela tela inicial ou não.

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

Manifesto do app da Web (Chrome, Opera, Samsung)

Ao ser iniciado como um aplicativo instalado, o Chrome não é executado em tela cheia verdadeira experiência para que document.fullscreenElement retorne um valor nulo e os seletores de CSS não funcionam.

Quando o usuário solicita a tela cheia por meio de um gesto no site, o padrão APIs de tela cheia estão disponíveis, incluindo o pseudosseletor CSS que permite adapte a IU para reagir ao estado em tela cheia da seguinte maneira:

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 os usuários abrirem seu site na tela inicial, a mídia display-mode será definida como o que foi definido no manifesto do app da Web. No caso de em tela cheia pura, ela será:

@media (display-mode: fullscreen) {
}

Se o usuário iniciar o aplicativo no modo autônomo, o display-mode consulta de mídia será standalone:

@media (display-mode: standalone) {
}

Firefox

Quando o usuário solicita a tela cheia pelo seu site ou inicia o aplicativo modo de tela cheia, todas as APIs padrão de tela cheia estão disponíveis, incluindo o Pseudosseletor de CSS, que permite adaptar a interface para reagir ao estado em tela cheia como o seguinte:

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

No IE, a pseudoclasse CSS não tem hífen, mas funciona de forma similar à Chrome e Firefox.

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

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

Especificação

A grafia da especificação corresponde à sintaxe usada pelo IE.

selector:fullscreen {
  display: block;
}

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

Manter o usuário na experiência de tela cheia

A API de tela cheia pode ser um pouco complicada às vezes. Os fornecedores de navegador não querem para bloquear usuários em uma página em tela cheia, para que eles desenvolvam mecanismos para quebrar fora da tela cheia assim que possível. Isso significa que você não pode criar uma site em tela cheia que abrange várias páginas porque:

  • Alterar o URL de maneira programática usando window.location = "http://example.com" sai da tela cheia.
  • Quando um usuário clicar em um link externo na sua página, ele sairá da tela cheia.
  • Alterar o URL pela API navigator.pushState também sairá do experiência em tela cheia.

Você tem duas opções se quiser manter o usuário em uma experiência de tela cheia:

  1. Use os mecanismos de app da Web instaláveis para ativar a tela cheia.
  2. Gerencie a interface e o estado do app usando o fragmento #.

Usando a sintaxe #para atualizar o URL (window.location = "#somestate") e ouvir o evento window.onhashchange, você poderá usar o próprio da pilha de histórico para gerenciar alterações no estado do aplicativo, permitir que o usuário utilize os botões "Voltar" físicos ou oferecer um botão "Voltar" simples e programático usando a API History da seguinte maneira:

window.history.go(-1);

Permitir que o usuário escolha quando ativar a tela cheia

Não há nada mais irritante para o usuário do que um site fazendo algo inesperados. Quando um usuário navega para seu site, não tente enganá-lo tela cheia.

Não intercepte o primeiro evento de toque e chame requestFullscreen().

  1. É irritante.
  2. Os navegadores podem decidir perguntar ao usuário em algum momento sobre permitindo que o app ocupe a tela cheia.

Se quiser abrir aplicativos em tela cheia, considere usar o comando experiências para cada plataforma.

Não envie spam ao usuário para que ele instale seu app em uma tela inicial

Se você planeja oferecer uma experiência em tela cheia pelos mecanismos de apps instalados ser atencioso com o usuário.

  • Tenha discrição. Use um banner ou rodapé para informar que eles podem instalar o app.
  • Se ele dispensar a solicitação, não a mostre novamente.
  • Na primeira visita do usuário, é improvável que ele queira instalar o app, a menos que eles estão satisfeitos com seu serviço. Solicite a instalação depois uma interação positiva em seu site.
  • Se um usuário visita seu site regularmente e não instala o aplicativo, ele está provavelmente não instalará seu app no futuro. Não continue enviando spam.

Conclusão

Embora não tenhamos uma API totalmente padronizada e implementada, usar alguns dos deste artigo, você pode criar experiências que levem aproveitar a tela inteira do usuário, independentemente do cliente.

Feedback