Como usar AJAX para fazer um aplicativo para HTML5 e CSS3 Programação
Todo mundo quer fazer aplicativos móveis estes dias. Aqui está o grande segredo. Muitos aplicativos são realmente escrito em HTML5, CSS e javascript. Você já sabe tudo o que você precisa para fazer aplicativos que funcionam em dispositivos móveis. Melhor ainda, você não precisa de aprender uma nova língua ou obter permissão do App Store ou comprar uma licença, como você faz para aplicativos nativos.
Menu
Há um par de truques maravilhosas que você pode fazer para usuários de iOS. Você pode criar seu programa de modo que o usuário pode adicionar um ícone diretamente para o desktop. O usuário pode, em seguida, iniciar o programa como qualquer outro aplicativo. Você também pode fazer o navegador ocultar o navegador normal de apetrechos para que o seu programa não se parece com ele está sendo executado em um navegador!
Acontece que estes efeitos são muito fáceis de fazer.
Adicionar um ícone para o seu programa
versões modernas de iOS (sistema operacional do iPhone / iPad) já tem a capacidade de armazenar qualquer página da web no ambiente de trabalho. Basta visualizar a página web no Safari e clique no botão Compartilhar. Você vai encontrar uma opção para salvar a página da web para o desktop. Você pode instruir seus usuários a fazer isso, e eles vão ser capazes de lançar o seu programa como um aplicativo normal.
No entanto, o ícone padrão para um aplicativo salva é muito feio. Se você quer um ícone de boa aparência, você pode salvar uma pequena imagem como um arquivo .png e colocá-lo no mesmo diretório que o seu programa. Em seguida, você pode adicionar esta linha para sua página (no cabeçalho) e essa imagem aparecerá na área de trabalho quando o usuário salva o seu programa:
Como um bônus adicional, o iPhone ou iPad ajustar automaticamente a imagem para olhar como um ícone da Apple, adicionando os efeitos apropriadas para a versão instalada do iOS (arredondado e vidrados no iOS6, apartamento em iOS7.)
Claro, este ícone truque é um de somente a Apple mecanismo. Com a maioria das versões do Android, qualquer marcador que você tenha designado com o seu navegador principal pode ser adicionado à área de trabalho, mas não há nenhuma opção ícone personalizado. o apple-touch-icon directiva será simplesmente ignorado se você estiver usando algum outro OS.
Remova a barra de ferramentas do Safari
Embora o programa parece ser bom a partir da tela principal, quando o usuário ativa o programa ainda é óbvio que o programa faz parte do navegador web. Você pode facilmente esconder a barra de ferramentas do navegador com uma outra linha no cabeçalho:
Este código não vai fazer nada diferente, a menos que o programa é chamado a partir do desktop. No entanto, nesse caso, ele esconde a barra de ferramentas, tornando o visual do programa e se sentir como um aplicativo completo. Como um bônus adicional, este executa o programa em um modo de tela cheia, dando-lhe um pouco mais de espaço para o jogo.
Mais uma vez, esta é uma solução específica para Apple. Não há uma maneira fácil de obter o mesmo efeito sobre os dispositivos Android.
Armazenar seu programa off-line
Agora o programa está olhando muito como um aplicativo, exceto que só funciona quando você está conectado à Internet. HTML5 tem uma característica maravilhosa que lhe permite armazenar uma página web inteira localmente a primeira vez que é executado.
Então, se o usuário tenta acessar o programa e o sistema não pode obter on-line, a cópia local do jogo é executado em seu lugar. Em essência, o programa é descarregado a primeira vez que é activado e permanece no dispositivo local.
Este é um efeito relativamente fácil de conseguir:
Faça o seu programa de estabilidade: Antes de usar o mecanismo de armazenamento off-line, você vai querer certificar-se de seu programa está perto de liberar-pronto. No mínimo, você vai precisar para assegurar que você sabe todos os arquivos externos necessários pelo jogo.
Utilize apenas os recursos locais: Para este tipo de projeto, você não pode confiar na Internet externo, de forma que você precisa ter todos os seus arquivos locais. Isto significa que você não pode realmente usar o PHP ou arquivos externos. Você precisa ter uma cópia local de tudo no servidor.
Criar um arquivo cahce.manifest: Olhe para o diretório que contém o seu jogo, e criar um novo arquivo de texto chamado.
Escreva a primeira linha: A primeira linha do arquivo cache.manifest deve conter apenas o texto CACHE MANIFEST (Tudo em maiúsculas).
Faça uma lista de todos os arquivos no diretório: Escreva o nome de cada arquivo no diretório, um arquivo por linha. Tenha cuidado com a sua capitalização e ortografia.
Adicione o atributo manifesto: A etiqueta tem um novo atributo chamado manifesto. Use isto para descrever para o servidor onde o manifesto de cache podem ser encontrados:
Carregar a página normalmente: Você vai precisar para carregar a página web uma vez no modo normal. Se tudo estiver configurado corretamente, o navegador irá tranquilamente fazer uma cópia do arquivo.
Teste off-line: A melhor maneira de testar o armazenamento off-line é para desligar temporariamente o acesso sem fio em sua máquina e, em seguida, tentar acessar o arquivo. Se as coisas funcionaram, você deve ser capaz de ver a sua página como se você ainda estavam online.
Verifique as configurações do servidor: Se o armazenamento off-line não está funcionando, você pode precisar verificar com o seu administração do servidor. A / tipo MIME manifesto texto precisa ser configurado no servidor. Você pode ter de pedir ao seu administrador do servidor para definir esta opção no arquivo .htaccess para a sua conta:
texto AddType / manifest cache-manifesto
Observe que pode levar o mecanismo de cache-manifesto várias horas para reconhecer as mudanças, então quando você faz alterações em sua página, estas alterações não são atualizadas automaticamente para o navegador local. É por isso que é melhor para salvar arquivamento off-line para perto do fim do seu ciclo de desenvolvimento do projeto.