Parece que houve um grande impulso no último ano ou dois para tornar a navegação off-line uma experiência agradável na Web; uma grande parte desse impulso provavelmente está nos aplicativos móveis HTML5 ou apenas nos aplicativos da Web em geral. É claro que seria útil se pudéssemos determinar se o usuário está on-line ou não naquele momento, e um navigator promete nos fornecer essa resposta.
navigator.onLine
O navigator.onLine fornece um valor booleano que indica se o usuário está ou não conectado à Internet. O senhor pode acessar como tal:
if(navigator.onLine) { // true|false
// ...
}
Não há nada mais fácil do que isso!
Eventos
Além de verificar o valor da propriedade, o senhor pode se conectar ao offline e online eventos:
function updateIndicator() {
// Show a different icon based on offline/online
}
// Update the online status icon based on connectivity
window.addEventListener('online', updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();
Se o senhor quiser rolar escola burra old school que o senhor pode usar ononline e onoffline atributos no body tag. Que nojo.
Posso pensar em muitos usos para esses eventos e para a propriedade em si. Se o usuário estivesse trabalhando localmente sem uma conexão, por exemplo, o aplicativo Web poderia detectar isso e salvar todas as alterações no localStorage até que o usuário se conectasse à Internet e, em seguida, o aplicativo poderia enviar dados para o servidor. Esse é apenas um exemplo, tenho certeza de que o senhor pode pensar em muitos outros!
No entanto, existe a preocupação de que essa API não seja confiável. Uma alternativa básica seria sondar um determinado endereço e retornar a resposta desejada.
Criação de efeitos de paralaxe de rolagem com CSS
Introdução Há muito tempo, os sites com o chamado efeito “parallax” são muito populares… Caso o senhor não tenha ouvido falar desse efeito, ele basicamente inclui diferentes camadas de imagens que se movem em diferentes direções ou com diferentes velocidades. Isso leva a uma…
Designing for Simplicity
Antes de começarmos, vale a pena dedicar um breve momento para me apresentar aos senhores. Meu nome é Mark (ou @integralist se o Twitter for sua ferramenta de comunicação preferida) e atualmente trabalho para a BBC News em Londres, Inglaterra, como engenheiro principal/técnico…
Fonte Redigida
Na época em que eu criava sites para clientes, uma das muitas coisas que me frustravam era a transferência inicial do design. Era sempre assim: Trabalhar duro para incorporar as ideias do cliente, sonhar com um design incrível. Criar esse design, usando texto Lorem Ipsum Enviar o conceito inicial do design para o cliente…
9 demonstrações incríveis do CodePen
O CodePen é um tesouro de demonstrações incríveis que aproveitam o poder das linguagens do lado do cliente. O lado do cliente é sempre limitado pelo que os navegadores nos fornecem, mas a criatividade e a esperteza dos desenvolvedores sempre ultrapassam os limites do que achamos que o front-end pode fazer. Graças ao CSS…