Uma introdução aos aplicativos da Web progressivos

A maioria dos desenvolvedores ouviu pelo menos alguma coisa Aplicativos da Web progressivos. Eles são amplamente apoiados por empresas de tecnologia como o Google e estão se tornando rapidamente norma para aplicativos da Web com vários dispositivos.

Mas o que é exatamente o diferença entre um típico e um progressivo aplicativo web?

Para desenvolvedores, é um mundo inteiro de diferença. Aplicativos da Web progressivos usam APIs da Web modernas para crie experiências de aplicativos nativos no navegador. Isso significa que os desenvolvedores podem criar aplicativos dinâmicos de carregamento rápido sem usar estruturas híbridas.

Neste guia, vou cobrir o noções básicas de aplicativos da Web progressivos, alguns recursos primários e como você pode começar a construir seu próprio.

O que são aplicativos da Web progressivos?

Aplicativos da Web progressivos (ou PWAs) aproveite as APIs do navegador da web para criar experiências de aplicativos nativas diretamente no navegador em qualquer dispositivo.

Por fim, os Progressive Web Apps abrangem punhado de tecnologias que os desenvolvedores podem usar para criar poderosos aplicativos nativos. Muitos vêm de APIs da Web tais como o API de serviços de trabalho ou o API de envio.

tem alguns requisitos para chamar algo de um PWA, mas estes são os os mais importantes:

• É totalmente responsivo móvel.
• Adere a aprimoramento progressivo.
• Capaz de instalar localmente em smartphones e tablets.
• Corre offline sem Internet, usando trabalhadores de serviços.
• Separa o conteúdo da funcionalidade usando o shell do aplicativo.
• Builts em HTTPS para maior segurança.
• Detectável na pesquisa do Google.
• Tem páginas dinâmicas semelhantes a aplicativos mas cada um ainda tem seu próprio URL.

Se vocês são pensando em construir um pequeno aplicativo da web Você pode tentar criar um aplicativo da Web progressivo em vez disso. Isso vem com um pouco de curva de aprendizado, mas você tem muito mais controle sobre a experiência do usuário como um resultado.

Vamos mergulhar nos fundamentos dos Aplicativos da Web Progressivos e aprender o que os torna atraentes.

Trabalhadores do serviço

Cada um dos Progressive Web App precisa de trabalhadores de serviço. Esses são como oficiais de trânsito que coordenam para onde o tráfego está indo, de onde vêm os dados e como tudo fica organizado e armazenado em cache.

Em termos simples, o trabalhador de serviço opera como um arquivo JavaScript e é executado no plano de fundo do seu aplicativo da web. Sempre que o usuário realiza um evento, chama o script de trabalhador de serviço para extrair dados, salvar dados ou ambos!

Usando o API do Service Worker é essencial para executar um PWA com suporte offline. É assim que você transmitir dados entre visualizações e como você pode solicitar dados de um banco de dados local. Mas, isso é principalmente coisas avançadas que você aprende trabalhando em um projeto PWA.

Dê uma olhada no Livro de receitas dos trabalhadores de serviço para trechos básicos e demonstrações ao vivo. Esta é uma maneira fantástica de aprender estudando o que os outros fizeram e clonando isso em seus próprios aplicativos.

Se você espera criar um aplicativo da Web progressivo comece com a Service Worker API. Basta mexer com isso e criar uma demonstração simples localmente. Isto irá definir as bases para mais tarde criação de recursos e páginas de aplicativos personalizados que todos correm através de trabalhadores de serviço.

Para guias para iniciantes e trechos de código detalhados, Eu especificamente recomendo estes recursos:

• Primeiros passos com os trabalhadores do serviço
• Primeiros passos com os Service Workers
• Exemplo de trabalhador de serviço: amostra de página offline personalizada

O shell do aplicativo

A maioria dos aplicativos nativos siga uma arquitetura de shell de aplicativo onde os dados e o código do aplicativo são completamente separado da interface do usuário. O shell do aplicativo pode ser armazenada em cache localmente então cada página carrega incrivelmente rápido.

Isso continua com o mesmo “aplicativo nativo” sentindo onde o interface sempre permanece visível mas o conteúdo / funcionalidade carrega de forma diferente cada vez. Confira esta página no site do Google Developers para saber mais sobre o modelo de shell de aplicativo.

A maioria dos aplicativos tem shell app muito simples e você deve projetar sua arquitetura com simplicidade em mente.

Normalmente, o shell do aplicativo tem esses elementos principais:

• Links da barra de navegação superior.
• Botão de atualização (opcional).
• Recipiente de fundo da página.

Você pode encontrar um bom estudo de caso aqui sobre Arquitetura de shell do I / O Progressive Web App do Google. Eles também oferecem algumas dicas para criar sua própria arquitetura de shell, armazená-la em cache e puxando-o automaticamente para cada página.

Pense na arquitetura do shell como todos os elementos da interface de usuário estática você usará em todas as páginas. Estes devem ser separado do resto do seu código e em cache para fácil reutilização. Confira também Introdução do Google para o assunto com muito código snippets para ajudar você a começar.

Suporte online e offline

A maioria dos aplicativos nativos correr bem sem Internet. Os Progressive Web Apps destinam-se a seguir esse mesmo comportamento.

Através dos trabalhadores de serviços, você pode criar caches locais com código JSON para cada página. Desta forma, os usuários podem navegue no seu aplicativo da web localmente. Você também pode incluir um arquivo de manifesto para definir seus ícones, tela inicial e outras configurações de inicialização.

Se você estiver usando a Service Worker API, dê uma olhada no API de cache qual é parte do mesmo quadro. Geralmente é a melhor maneira de armazenar dados localmente e acessá-lo de trabalhadores de serviços mais tarde.

Você também pode testar qualquer aplicativo da web usando Farol, uma ferramenta gratuita para verificar a conformidade de recursos e suporte para tecnologias PWA.

PWAs sempre requer suporte offline através da Service Worker API, para que eles possam trabalhar em estados de baixa conectividade. O Lighthouse é a melhor maneira de testar o suporte off-line, juntamente com vários outros recursos.

Exemplos ao vivo

Estudar PWAs ao vivo e ver como eles funcionam é uma ótima maneira de aprender. No entanto, o mercado Progressive Web App é ainda emergindo, muitos dos melhores são espalhados em vários cantos da Internet.

Mas, graças ao PWA rocks gallery, Eu organizei alguns exemplos incríveis para mostrar o que os PWAs realmente podem fazer.

1. Conversor de Moedas

Isso é bastante simples conversor de moeda leva as taxas de câmbio e calcula a taxa atual diferenças entre uma tonelada de moedas em todo o mundo.

Você perceberá que este aplicativo da web é totalmente responsivo, suporta toque, e atualizações automáticas sem qualquer atualização de página.

Estas são apenas algumas das características que você espera em qualquer App da Web Progressivo típico. este app também pode ser salvo localmente ao seu telefone para trabalhar off-line, embora ele se conecte a um arquivo JSON para verificar as taxas de câmbio atuais.

2. Inglês Acentos

Eu simplesmente adoro este aplicativo da web porque ele é único e incrivelmente bem projetado. o Mapa de Destaques em Inglês curates videos online onde as pessoas carregam sotaques de regiões específicas dos EUA e do Reino Unido.

Ao clicar em qualquer lugar no mapa, você pode ouvir como as pessoas pronunciam certas palavras em diferentes partes do mundo. O aplicativo é muito rápido e é open-source no GitHub para quem quiser conferir.

Os internos funcionam em Reagir / Redux com Firebase e um Conexão de API ao Google Maps. Definitivamente, um ótimo exemplo de algo bastante simples para os iniciantes estudarem e aprenderem.

3. Pokedex.org

Outro PWA razoavelmente simples é este Aplicativo Pokedex criado por Nolan Lawson. Ele também publicou este código livremente no GitHub, por isso nos mais um projeto que é vale a pena bisbilhotar e estudar.

Como esses dados podem permanecer estáticos, manipulado por meio de um mecanismo local chamado PouchDB. Todos os dados vêm do PokeAPI e depois são salvos como um JavaScript simples. Isso significa que você pode salve-o localmente no seu telefone como um verdadeiro aplicativo nativo e ele será executado com ou sem acesso à Internet. Bem legal, né?

A coisa toda é alimentado por JavaScript, então é um testemunho de quanto você pode fazer com o código frontend. Usa muito cache com a Service Worker API, então é louco rápido e super fácil de usar.

4. Flipkart

Por fim e mais surpreendentemente, vamos ver o Site da Flipkart. Esta cheio loja de e-commerce é, na verdade, um aplicativo da Web progressivo.

Está totalmente responsivo e carrega páginas dinamicamente. Os URLs das páginas são anexados ao navegador para que você possa copiar / colar e compartilhá-los como um site típico.

Isso é facilmente o mais complexo PWA que eu já vi. Fico surpreso que os desenvolvedores puderam criar uma experiência tão perfeita na Web para todos os usuários, muito menos suportando armazenamento off-line local, também.

E, embora eu não tenha encontrado um repositório para todo o código-fonte do Flipkart, há um Página Flipkart no GitHub com trechos de código menores de sua equipe de desenvolvedores.

Aprendendo mais

Aplicativos da Web progressivos são incrivelmente popular e certamente vai ganhar força à medida que mais desenvolvedores mudam de aplicativos nativos / híbridos.

Há uma cúpula anual chamada de Cúpula Progressiva do Aplicativo Web e eles publicam vídeos no YouTube que você pode assistir gratuitamente. Esta é uma ótima maneira de pegar algum conhecimento pro sem pagar por um bilhete.

Mas, se você está procurando mais detalhada Guias de codificação PWA definitivamente confira estes tutoriais:

• Um guia para iniciantes de aplicativos da Web progressivos
• Crie seu primeiro aplicativo da Web progressivo com o React
• Criando um aplicativo da Web progressivo com polímero