O HTML5 é muito mais do que só algumas novas tags semânticas legais. Na verdade, a especificação do HTML5 tem um monte de APIs em JavaScript novas com as quais todos nós podemos trabalhar. Nem todas essas especificações estão finalizadas e não estão todas amplamente implementadas nos navegadores. Isso não significa necessariamente que não podemos aproveitá-las agora. Vamos dar uma olhada em algumas das quais eu mais gosto e discutir se e como elas podem ser usadas ​​hoje.

1) WebSockets & Eventos Server-Sent

Eu não vou me preocupar com ordem inversa 5-1. Não faz sentido, especialmente porque eu não posso decidir como eu vou classificar todos. No entanto, WebSockets são certamente os meus preferidos, e incluí os Eventos Server-Sent com WebSockets porque oferecem uma funcionalidade semelhante, exceto que é uma conexão HTTP de longa duração, de uma via do servidor para o cliente, em vez de uma conexão de duas vias.

A capacidade do servidor de informar o cliente sobre certos acontecimentos em tempo real é uma habilidade maravilhosa. Existe o exemplo óbvio e onipresente de um aplicativo de bate-papo, mas isso está longe de ser um verdadeiro teste de seu poder. Em jogos em tempo real, até mesmo alguns tipos de jogos de estratégia podem se comunicar com ações dessa forma. Isso é usado em mídias sociais para te informar sempre que houver uma nova atualização para o seu feed (diferentes redes sociais usam diferentes técnicas para isso; nem todas utilizam WebSockets). Você ainda pode usar WebSockets para te dar o controle completo da linha de comando de um servidor a partir do browser. Na realidade, trabalhei em um projeto que me permitiu controlar servidores do MineCraft por uma conexão WebSocket. É possível ver uma demonstração da versão alpha aqui.

Embora eu não tenha usado os Eventos Server-Sent e ainda não possa te dar nenhuma ideia de como é fácil usá-los neste exato momento, eu sei que os WebSockets estão prontos para uso imediatamente. Mesmo se os WebSockets não estiverem disponíveis em um navegador, existem várias técnicas que podem ser utilizadas para emulá-los, embora algumas delas não serão boas para jogos em tempo real, pois não necessariamente lhes darão resultados rápidos o suficiente.  Você não precisa nem se preocupar com isso, porque existem algumas bibliotecas por aí que fazem tudo isso para você. As duas mais populares, e que eu recomendo, são Socket.IO e SockJS. Eu tenho um tutorial básico e um avançado para Socket.IO, mas você vai ter que aprender SockJS sozinho.

2) API Page Visibility

A API Page Visibility é muito interessante e permite todos os tipos de melhorias para os aplicativos. Ela permite que um aplicativo detecte se o script no qual a página estiver sendo executada é a aba/janela ativa. Se um usuário estiver visualizando uma aba separada ou a janela de aplicativo, então a API permitirá que você saiba que a página não está visível e vice-versa, assim você pode reagir de forma apropriada.

Praticamente todos os navegadores mais recentes suportam a API Page Visibility (exceto o Opera Mini), e a maioria deles a suporta sem um prefixo (exceto os navegadores Android e Blackberry). Existem ainda polyfills para os navegadores mais antigos que não suportam isso, mas não tenho certeza de que tipo de suporte para o navegador eles têm ou quão exatos são. Por agora, especialmente com um polyfill, você pode usá-lo como um aprimoramento progressivo, mas saiba que os seus usuários têm uma boa chance de suportá-lo.

Quais tipos de aplicativos existem para a API Page Visibility? Bem, aquele que você provavelmente já conhece e que os aplicativos do Facebook e do Google usam: notificar que você tem uma nova mensagem quando estiver ausente. Eles usam uma notificação sonora (pelo menos em navegadores desktop), mas existem outros meios que você pode utilizar, alguns dos quais você vai ver com outras APIs abaixo. Outra forma que você pode usá-lo seria a utilização de menos recursos quando a aba não estiver sendo visualizada. Você pode fazer isso pulando as animações (basta mover o elemento para onde ele deve ir) ou suspender as solicitações periódicas do servidor (tais como a verificação de conectividade), e assim por diante.

O Mozilla Developer Network tem um tutorial muito bom sobre como usar a API Page Visibility caso você esteja interessado. É realmente muito simples, uma vez que você tiver estabelecido todos os prefixos vendor que precisa usar.

3) API Web Notifications

A API Web Notifications permite que você exiba uma notificação que aparece do lado de fora da janela do navegador para o usuário. Você pode adicionar ícones, textos, links, handlers e muito mais às notificações para conseguir que façam o que você quiser. Eu já vi isso funcionando bem recentemente, uma vez que os habilitei para Gmail e Google Calendar. Agora eu recebo uma notificação sempre que chega um novo e-mail ou se um evento no calendário se aproxima.

O suporte para a API Web Notifications é muito escasso, embora o Firefox e o Chrome a tenham suportado por um tempo. A especificação dessa API ainda é um working draft, por isso a falta de suporte não é uma grande surpresa. No geral, eu diria que você pode usá-los como uma melhora progressiva, mas está longe de ser onipresente suficiente para confiar nele.

Mesmo que você pudesse confiar que o suporte existe para a API, você ainda não pode fazer o mesmo com a capacidade de exibir as notificações, pois esse é um recurso em que o usuário precisa conceder permissão, o que significa que ele pode negar sua permissão do aplicativo para exibir as notificações. Claro que isso não quer dizer que você deve evitá-lo; como já falei, o Google já está fazendo bom uso disso. Na verdade, você pode usá-lo em conjunto com a API Web Notifications para determinar quando as notificações devem ser exibidas.

Existem algumas coisas das quais eu não sou muito fã em relação à essa API:

• Você cria um objeto notification usando o constructor e ele vai mostrar a notificação imediatamente após a criação. Eu não acho que o constructor deveria lidar com isso. Eu preferiria que um método show estivesse disponível.
• Você tem muito pouco controle sobre a duração da notificação. Na verdade, isso é amplamente controlado pelos próprios navegadores. O Chrome vai exibir uma notificação até que o usuário a feche ou o aplicativo a encerre com a API. O Firefox, por outro lado, fechará automaticamente uma notificação depois de alguns segundos. Podemos, é claro, fechar a notificação antes pelo método close, mas acho que os desenvolvedores deveriam ter mais controle sobre isso.

Mais uma vez, o Mozilla Developer Network tem um tutorial muito bom sobre como usar a API Web Notifications.

4) API Vibration

A API Vibration é bastante limitada em comparação com a maioria dessas APIs, porque só pode trabalhar em um dispositivo que é capaz de vibrar, o que praticamente significa que estamos falando de telefones e talvez de alguns tablets. Apesar do campo limitado de dispositivos, essa API ainda fica no meu top 5, simplesmente porque pode funcionar muito bem nesses dispositivos.

Ela pode ser usada junto com (ou no lugar de) as notificações para chamar a atenção de um usuário, ou para dar aos usuários um feedback, especialmente em um ambiente de jogo. Parece que construir grandes jogos com HTML5 é uma grande prioridade, porque muitas APIs novas que estiveram em andamento recentemente oferecem uma grande quantidade de jogos. Me faz meio que desejar ser um desenvolvedor de jogos…

O suporte para o navegador é extremamente limitado em browsers para desktop (só faz sentido porque a maioria dos desktops não pode, de qualquer forma, utilizar a API), e o suporte para o navegador mobile está começando a pegar, mas ele ainda tem mais alguns candidatos que precisam se envolver mais, como a maioria. Você não pode confiar nos usuários recebendo as vibrações, mas pode ser um acessório para aqueles que estão usando um dispositivo e um navegador compatíveis.

A API é super simples, uma vez que consiste em uma única função: navigator.vibrate(). Você pode enviar vários milissegundos para o dispositivo vibrar ou você pode enviar um conjunto de números que representam várias vibrações, incluindo o período de tempo que o dispositivo deve vibrar e os comprimentos de pausa entre as vibrações. Você pode dar uma olhada em Vibration API Guide on MDN para mais detalhes.

5) Client-Side Storage

Isso não é, na verdade, uma única API. É uma classificação de APIs (que é parte da razão pela qual há um “9” no título do artigo). Anteriormente, se quiséssemos armazenar dados persistentes no front-end, éramos bem limitados aos cookies, que possuem inúmeras razões para ser evitados. Com o advento de IndexedDB, WebSQL, localStorage e sessionStorage, temos uma infinidade de opções.

Esses meios de armazenamento nos dão muito mais flexibilidade e menos dependência do servidor. Na verdade, eles são uma das poucas tecnologias-chave necessárias para fazer os aplicativos offline, que estão se tornando mais necessários, agora que os dispositivos com conexão de Internet irregular estão mais comuns.

A probabilidade de que um navegador suportará pelo menos uma dessas APIs é muito grande. Infelizmente, as ferramentas de desenvolvimento não avançaram tão rapidamente quanto os navegadores, por isso, se quiser ter controle sobre o armazenamento sem escrever scripts para ele, você está com muita falta de sorte. O Chrome, de longe, tem as melhores ferramentas nessa área, mas ainda faltam algumas funcionalidades básicas. No geral, porém, não é algo que deve impedir você de usar essas APIs.

Menções honrosas

• Cache de Aplicativo: Junto com o client-side storage, esta é uma das ferramentas mais úteis para a ativação de aplicativos offline. A melhor introdução que eu vi está em HTML5 Rocks.
• Network Information: Se esta API fosse mais explícita e consistente, e tivesse a capacidade de dar informações perfeitamente precisas, teria recebido mais do que uma menção honrosa. Tem algumas características úteis, mas ainda tem muito chão pela frente. Caso contrário, seria muito útil para derrubar ativos diferentes, dependendo do tipo de conexão/status.
• Battery: Tem utilização limitada, mas pode ser usada de uma maneira similar à da API Page Visibility. Se a bateria estiver fraca e o dispositivo não estiver conectado, você pode desacelerar alguns dos cálculos e outras tarefas. O Mozilla Developer Network, mais uma vez, tem um grande guia.

Conclusão

Obrigado por ler esta lista. Eu sei que é um pouco mais longa do que o anunciado, mas é difícil reduzi-la. Estou muito animado, pois muitas das APIs que expus aqui estão se tornando amplamente disponíveis nos navegadores, e estou ansioso para colocar todos elas em aplicativos futuros.

***

Artigo traduzido pela Redação iMasters com autorização do autor. Publicado originalmente em http://www.joezimjs.com/javascript/top-5-9-favorite-html5-apis/