O jogo de exemplo do Progressive Web App de hoje é JavaScript Snake!
Consegui hackear algumas atualizações em um repositório de código JavaScript Snake para fazer um aplicativo da web progressivo (PWA) versão do jogo.
O código JavaScript Snake
O jogo é uma porta JavaScript/HTML do popular jogo Snake em telefones Nokia antigos. O objetivo do jogo é guiar uma’cobra’para comer um ponto. Quando a cobra come um ponto, ela cresce.
Quanto mais a cobra cresce, mais rápido ela fica e mais difícil se torna de navegar.
O jogo é mais viciante do que você imagina. Infelizmente, o código não funciona com toque neste ponto.
O código-fonte é muito simples, mas a interface do usuário para esta versão é bastante insuficiente. Desde a atualização deste repositório de código , encontrei alguns outros repositórios com interfaces de usuário ligeiramente melhores. Espero ter algum tempo no futuro próximo para atualizar a IU e torná-la habilitada para toque.
Para jogar, você pode usar as quatro teclas de seta do teclado para direcionar a cobra. Apenas não fique sem espaço ou acerte a cobra!
Fazendo um aplicativo da Web progressivo
Para tornar este jogo um aplicativo da Web progressivo, eu precisava adicionar um service worker, um válido arquivo de manifesto da web e, claro, exibi-lo usando HTTPS. Usei o PWA Builder para criar o conjunto de imagens PWA .
Não há muitos arquivos necessários para executar o JavaScript Snake, portanto, pré-armazenar todo o jogo é o caminho para ir.
cacheList=["/","css/main-snake.css","css/dark-snake.css","css/images/dark-snakeblock.png","css/images/dead-dark-snakeblock.png","css/images/deadblock_border.png","css/images/deadblock.png","css/images/snakeblock.png","js/snake.js"];
Eu adicionei alguns elementos básicos ao elemento HEAD da página para definir a janela de visualização, fazer referência ao manifesto da web arquivo e definir a cor do tema. Estou descobrindo que, ao combinar o valor meta da cor do tema com o valor da cor do tema do manifesto da web, ajuda a acionar o prompt de adição à tela inicial.
Mas aqui está o problema real. Para se qualificar como um aplicativo da web progressivo real, o site precisa funcionar bem em todos os tamanhos de tela. Se você executar os testes de PWA do Lighthouse, encontrará alguns problemas, especificamente ele diz que o aplicativo não renderiza bem em janelas de visualização pequenas.
Infelizmente, acho que esse teste falhou está impedindo meu jogo de JavaScript de acionar o add to home prompt de tela. Mesmo a adição manual do aplicativo à tela inicial não resulta em que ele seja adicionado como um Progressive Web App.
Resumindo
JavaScript Snake é um jogo simples e viciante. A base de código atual destaca a importância de uma base de código responsiva para o sucesso de qualquer site.
O prompt adicionar à tela inicial não está sendo acionado nesta primeira iteração porque não é responsivo. Ele também precisa ter suporte para toque adicionado.
Eu avisarei você quando eu adicionar esses recursos.
Até agora, esses aplicativos têm sido muito simples. Espere, há mais por vir nos próximos dias! Portanto, certifique-se de inscrever-se no meu boletim informativo .
Se você é novo no Progressive Web Apps ou deseja aprender mais sobre como criar seu próprio PWA, você precisa se inscrever em meu curso: Progressive Web Apps (PWA) From Beginner to Expert . Economize 85% do preço de tabela! No momento, custa apenas US $ 29, US $ 171 de desconto sobre o preço normal de US $ 200.
O curso tem mais de 21 horas de conteúdo de vídeo e mais planejado para os próximos dias. Portanto, certifique-se de se inscrever e começar sua jornada PWA agora!
