Você gosta de jogar Tetris como jogos? 
Você tem um navegador?
Hoje estou animado para anunciar meu mais recente projeto de aplicativo da web progressivo , Hextris .
Não é Tetris, mas um jogo no que chamo de gênero de correspondência de quebra-cabeça geométrica. O jogo é simples. Se você estiver na área de trabalho, poderá usar as teclas de seta direita e esquerda para girar um hexágono e empilhar os lados coloridos. Em telas sensíveis ao toque, basta tocar no lado direito e esquerdo da tela para girar o hexágono.
Junte pelo menos três linhas da mesma cor para fazer uma correspondência e limpe-as do tabuleiro. O jogo termina quando sua pilha de cores atinge o limite do tabuleiro.
A fonte do jogo
Tenho pesquisado no GitHub por projetos da web que posso atualizar para aplicativos da web progressivos. O repositório Hextris foi o primeiro projeto que descobri que atendia às minhas qualificações.
Não escrevi nem modifiquei qualquer código de jogo ou gráficos. Isso foi escrito por um quarteto de amigos do ensino médio.
Existem alguns pequenos bugs que eu encontrei, mas nada que eu não possa perdoar. Afinal, é um jogo grátis!
Existem vários aspectos da estrutura do código que não atenderiam aos meus padrões e recomendações. Só digo isso para que você não pense que escrevo código de produção dessa maneira. O código é escrito muito melhor do que o JavaScript típico que analiso.
Alguns dos problemas gritantes que descobri estão poluindo o escopo global e misturando marcação e CSS dentro do JavaScript. Se o tempo permitir, posso refatorar o código para usar módulos JavaScript, desculpe classes não podem ser polyfilled e eu não sou um fã de trans-pilling.
O outro aspecto que eu não gosto é o navegador farejar código para determine se você está usando um navegador para desktop ou celular. Por favor, nunca, nunca faça isso porque você faz suposições falsas que podem quebrar seus aplicativos.
Pelo que eu posso dizer, eles estão fazendo isso para redimensionar o quadro. É aqui que a compreensão do design responsivo ajudará. As dimensões devem ser movidas para CSS usando consultas de mídia.
Você pode clonar/bifurcar meu repositório bifurcado no GitHub .
Tornando o jogo um aplicativo da Web progressivo
Meu objetivo era atualizar o jogo Hextris para um aplicativo da Web progressivo. Isso significa que eu precisava adicionar um service worker, um arquivo de manifesto da web válido e, claro, servir o aplicativo via HTTPS.
Este é um processo simples, fiz exatamente o que escrevi no Tutorial de atualização do PWA de 15 minutos .
Eu usei o PWA Builder Image Generator para criar um conjunto básico de imagens para o arquivo de manifesto da web.
Esta foi a primeira vez que usei essa ferramenta em algum tempo. Acho que eles atualizaram o gerador para criar um conjunto para plataformas diferentes, então você obtém cerca de 100 imagens. O legal é que quando você vê os detalhes do manifesto nas ferramentas de desenvolvedor do Chrome, você vê todos eles!
Fiz upload do twitter-opengraph.png arquivo da pasta de imagens do projeto para o gerador PWA Builder para criar t ele ícones. O gerador também cria o JSON que você precisa adicionar ao seu arquivo de manifesto para fazer referência às imagens do ícone.
Eu simplifiquei o arquivo de manifesto da web. Tem os campos de nome, start_url, modo de exibição e conjunto de cores.
{"name":"Hextris PWA","short_name":"Hextris","icons": [{"src":"img/Square71x71Logo.scale-400.png","tipo":"imagem/png","tamanhos":"284x284"},...],"start_url":"/","display":"standalone","background_color":"#fff","theme_color":"# e74c3c"}
Peço desculpas porque esqueci de tirar uma captura de tela do Android solicitando que eu adicione o jogo à tela inicial. Mas isso me avisou assim que o aplicativo foi carregado.
O Service Worker da Hextris
Eu também mantive o Service Worker simples. Todo o aplicativo pode ser pré-armazenado em cache. Então, copiei o service worker do tutorial de atualização de 15 minutos e alterei a lista de URIs para pré-cache.
O service worker define algumas variáveis const para nomear o cache do aplicativo e definir a lista de URIs para armazenar em cache.
const preCacheName="pre-cache-hextris", preCacheFiles=["/",...//arquivos para armazenar em cache];
Os arquivos do aplicativo são armazenados em cache no evento de instalação:
self.addEventListener ("install", event=> {console.log ("instalando arquivos de pré-cache"); caches.open (preCacheName).then (função (cache) {return cache.addAll (preCacheFiles);});});
Depois que os arquivos são armazenados em cache, o manipulador de eventos fetch carrega os ativos do cache, evitando a rede.
self.addEventListener ("fetch", event=> {event.respondWith (caches.match (event.request).then (response=> {if (! response)) {//retrocede para a rede fetch return fetch (event.request); } resposta de retorno;}))});
Isso seria o cache voltando para a estratégia de rede.
Agora, o aplicativo não apenas carrega instantaneamente, mas funciona mesmo quando não há conexão com a Internet.
Die downasaur die !!
Eu adicionei o código de registro ao arquivo main.js do projeto. É o último código do arquivo.
`/ registrar o service worker /
if (serviceWorker in navigator) {navigator.serviceWorker.register (`/sw.js`).then (function (registration) {//O registro foi bem-sucedido console.log (`Registro de ServiceWorker bem-sucedido com escopo:`, registration.scope);}). catch (function (err) {//falha de registro:( console.log (`Falha de registro de ServiceWorker:`, err);} );}
Não há nada avançado sobre este código, apenas um código de registro do service worker padronizado.
Eu o adicionei ao arquivo main.js porque é o último arquivo carregado e parecia o lugar lógico para adicionar o registro sem código embutido no HTML.
Tornando o Hextris seguro
Todos os sites deve usar HTT PS , que é um dos muitos motivos pelos quais os Progressive Web Apps devem usar HTTPS.
Todos os meus sites são seguros por padrão porque eu uso o AWS CloudFront e o AWS Certificate Manger. Os certificados TLS são gratuitos e levam cerca de 30 segundos para serem configurados no AWS.
O site é servido do AWS S3 por meio do CloudFront. Portanto, mesmo que seja a primeira vez que você carrega o Hextris , ele deve carregar de forma super rápida e segura.
Resumindo
Espero que você se divirta jogando o jogo. Eu modifiquei a fonte original porque ela tinha malware de mineração BitCoin incluído. Se você encontrar algo parecido deixado no projeto, peço desculpas e irei removê-lo. Deixe-me saber onde está.
Quero agradecer aos quatro autores originais por seu trabalho. Eles fizeram um trabalho muito bom.
Também espero que isso ajude você a ver como é fácil tornar qualquer site um aplicativo progressivo. Eu também espero que você perceba quantos aplicativos nas lojas de aplicativos realmente não precisam ser aplicativos nativos. Eles devem ser aplicativos da web progressivos.
Este é o primeiro de uma série de aplicativos da web progressivos simples que irei postar. Portanto, certifique-se de seguir meu feed do Twitter ou se inscrever em meu newsletter .
Se você deseja aprender como criar aplicativos progressivos da web, certifique-se de se inscrever em meus Progressive Web Apps: De do iniciante ao Curso de Especialistas . Atualmente, você pode economizar US $ 171 e começar sua jornada PWA por apenas US $ 29!
O curso inclui mais de 21 horas de treinamento em vídeo, com mais em breve.
