À medida que mergulhei nas arquiteturas modernas da web e móvel, cheguei a uma conclusão: os sites de várias páginas são homens mortos caminhando. Solicitar, recuperar e reagir constantemente não é um design de aplicativo competitivo no futuro. A combinação de motores de navegador AJAX de alta velocidade, o aumento das plataformas móveis e aplicativos da web HTML5/CSS3 de página única são o aqui e agora.
Para os desenvolvedores, isso significa que há um novo conjunto de problemas a resolver. Como você carrega conteúdo, marcação e outros recursos? Como você o gerencia depois de colocá-lo no navegador?
Uma estratégia é aproveitar o cache do aplicativo, mas quanto mais venho testando e lendo sobre cache de aplicativo menos gosto dele como estratégia. O conceito de um aplicativo offline é incrível e precisamos ter uma ótima infraestrutura integrada para dar suporte. No entanto, realmente parece que não é o caso no momento.
Há algumas semanas, descobri como Google e Bing estão aproveitando o localStorage para armazenar e gerenciar o conteúdo do aplicativo. Isso realmente despertou meu interesse, pois tenho trabalhado com localStorage neste verão.
Como tudo isso se relaciona com a premissa de meu aplicativo da web de página única? Bem, um dos problemas que tenho trabalhado neste verão é como gerenciar efetivamente o conteúdo do aplicativo sem sobrecarregar a largura de banda do dispositivo (pensando em 3G móvel e vida útil da bateria), bem como os limites de memória do navegador. Para testar uma teoria, criei um aplicativo da web simples de 3 páginas.
O aplicativo contém três páginas, chamadas Home, Página 2 e Página 3 (veja, eu disse que era simples). Quando a página inicial é solicitada, ela utiliza o método $.get da jQuery para carregar o conteúdo das páginas 2 e 3 quando a página carrega. Uma vez que o conteúdo é carregado, ele é armazenado em localStorage.
Por que localStorage?
Se você nunca ouviu falar sobre localStorage, ele não é realmente um novo recurso para navegadores, mas é considerado parte de HTML5. Acredite ou não, o Internet Explorer 8 oferece suporte a localStorage. Basicamente, ele oferece um local seguro para armazenar dados específicos de seu aplicativo. O valor padrão é 5 MB, mas sua milhagem pode variar .
Browser localStorage oferece um local para armazenar dados baseados em string, desculpe, não há binários aqui. Mas para a maior parte do conteúdo de um aplicativo da web, isso funcionará bem. Ele armazena seus dados em uma tabela de hash, onde cada entrada possui uma chave associada a ela. Você simplesmente chama localStorage.keyName para recuperar o valor.
Visto que localStorage salvará dados de texto e você pode construir uma camada de gerenciamento simples para gerenciar seu conteúdo, gosto do potencial como um mecanismo de armazenamento offline, bem como um ferramenta para limitar nossa necessidade de solicitar conteúdo do servidor. Claro que eu adoraria que um mecanismo sólido fosse incluído no navegador nativamente.
Usando localStorage para conteúdo de várias páginas
Primeiro, esta é uma página da web de teste super simples para conter as páginas iniciais conteúdo. Também possui 3 botões para alternar entre as páginas. Eu adicionei alguns rabiscos para simular o conteúdo real.
kfslakjdf sa; lkjf sdlkfj sa; ljfk sadljfk sal; dkjf sldkjf sa;'
sa; lkjf sdlkfj sa; ljfk sadljfk sal; dkjf sldkjf sa;'
kfslakjdf sa; lkjf sdlkfj sa; ljfk sadljfk sal; dkjf sldkjf sa;'
kfslakjdf sa; lkjf sdlkfj sa; ljfk sadljfk sal; dkjf sldkjf sa;'
O site tem duas páginas subsequentes para as páginas adicionais que se parecem com esta:
kfslakjdf sa; lkjf sdlkfj sa; ljfk sadljfk...
kfslakjdf sa; lkjf sdlkfj sa; ljfk sadljfk...
kfslakjdf sa; lkjf sdlkfj sa ; ljfk sadljfk...
kfslakjdf sa; lkjf sdlkfj sa ; ljfk sadljfk...
kfslakjdf sa; lkjf sdlkfj sa; ljfk sadljfk...
Agora que mostrei minhas páginas de teste extravagantes , deixe-me explicar um pouco mais. A página inicial tem todo o material da página, como cabeçalho, corpo, etc. não mostrado. Mas ele contém um DIV chamado’wrapper’. Isso é usado para envolver o conteúdo da página, daí o nome do curso.
=””img=””data-src=”/img/single-page-ls-home.png”class=”lazy-image”>
Agora, vamos examinar o script que conduz este aplicativo. No método jQuery Ready, o script carrega o conteúdo da página 2 e 3. No retorno de chamada $.get, ele salva o conteúdo (dados) retornado do servidor para localStorage usando o método setItem. Mas depois que essas duas páginas são armazenadas, ela pega a marcação contida no #wrapper DIV, lembre-se de que este é o conteúdo da página inicial e o armazena em localStorage.
Se você notou que estilizei o DIV inicialmente escondido. Isso me dá a capacidade de fazer uma entrada mais grandiosa com uma animação de transição. O script usa um simples $.fadeIn para simular algo legal.
$ (document).ready (function () {$.get ('defered1.htm', function (data) {localStorage.setItem ("page2", data);}); $.get ('defered2.htm', function (data) {localStorage.setItem ("page3", data);}); localStorage.setItem ("homepage", $ ("# wrapper"). html ()); $ ("# homepage").fadeIn (500); $ ("# btnHome"). click (function (e) {e.preventDefault (); $ ("# wrapper> div"). fadeOut (function (e) {$ (this).remove (); $ ("# wrapper"). append (localStorage.homepage); $ ("# homepage"). fadeIn (500);});}); $ ("# btn2"). click (função (e) {e.preventDefault (); $ ("# wrapper> div"). fadeOut (function (e) {$ (this).remove (); $ ("# wrapper"). append (localStorage.page2) ; $ ("# page2"). fadeIn (500);});}); $ ("# btn3"). click (function (e) {e.preventDefault (); $ ("# wrapper> div").fadeOut (function (e) {$ (this).remove (); $ ("# wrapper"). append (window.localStorage.page3); $ ("# page3"). fade Em (500); }); }); });
Agora, quando cada um dos botões é clicado (ou tocado), o conteúdo existente desaparece da visualização. Quando esse conteúdo desaparece, ele é removido da página. Isso é importante porque não precisamos mais da marcação e, se precisarmos, podemos restaurá-la. Mas você deseja fazer isso porque isso mantém o tamanho da página menor, reduzindo assim a quantidade de memória que o navegador precisa para executar a página.
O conteúdo da página solicitada é então carregado de localStorage, localStorage. [Page name] e anexado ao div #wrapper. Ele é então desbotado à vista. Muito legal hein?
Então, deixe-me revisar, carregamos a página padrão do aplicativo e, em seguida, carregamos de forma assíncrona o restante do conteúdo do aplicativo e o armazenamos localmente. Sob demanda, carregamos o conteúdo do armazenamento local. Ao fazer isso, reduzimos a quantidade de tráfego de rede, aumentamos a velocidade do aplicativo e também minimizamos o consumo de memória do aplicativo. Além de tudo isso, agora temos a capacidade de integrar algum conteúdo legal ou transições de página.
É claro que há muito mais que poderia ser adicionado a este exemplo. Por um lado, poderíamos carregar o conteúdo da página filha sob demanda, em vez de quando a página inicial é carregada. Antecipar o que o usuário fará a seguir também é divertido.
Se você ler sobre como Google e Bing estão usando esta técnica. Eles estão aproveitando os cookies para verificar se há versões mais recentes de conteúdo. ter conteúdo atualizado é importante para qualquer aplicativo nativo ou web. Outra coisa sobre a qual posso fazer um blog em um futuro próximo é armazenar dados em localStorage e executá-los por meio do plugin de template jQuery para criar a marcação dinamicamente.
Espero que isso te faça pensar e ajude a criar dispositivos móveis e aplicativos de desktop daqui para frente.