Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA Progressive Web Apps guia em Português

47 views

Published on

Os Progressive Web Apps (PWAs) aproveitam os principais avanços em navegadores da web modernos, APIs da web e estruturas front-end para oferecer excelentes experiências de aplicativos para usuários móveis e de desktop.Grandes marcas como Twitter e Pinterest estão demonstrando como os PWAs podem impulsionar a aquisição de usuários, engajamento e, por fim, a receita.

Published in: Software
  • Login to see the comments

PWA Progressive Web Apps guia em Português

  1. 1. 1 Progressive Web Apps Os Progressive Web Apps (PWAs) aproveitam os principais avanços em navegadores da web modernos, APIs da web e estruturas front-end para oferecer excelentes experiências de aplicativos para usuários móveis e de desktop.Grandes marcas como Twitter e Pinterest estão demonstrando como os PWAs podem impulsionar a aquisição de usuários, engajamento e, por fim, a receita. Mas os PWAs não são uma bala de prata. Eles funcionam melhor como parte de uma estratégia de aplicativos mais ampla que se concentra na criação de uma experiência de usuário consistente e de alta qualidade em todos os canais que seus usuários desejam interagir com você. Este breve guia fornece aos arquitetos corporativos e aos líderes de desenvolvimento de aplicativos insights essenciais sobre quais projetos são adequados para PWAs e como construir um PWA pronto para produção hoje.
  2. 2. 2 SUMÁRIO Progressive Web Apps Por que os PWAs importam O que são PWAs? Os fatos Como os PWAs se encaixam na estratégia do seu aplicativo Você tem uma alta taxa de rejeição? Você tem requisitos técnicos incomuns? Você está criando um aplicativo B2E para funcionários da empresa? Suporte de desktop para PWAs Como funcionam os PWAs Trabalhadores de serviço Manifestos do Web App Como Começar O kit de ferramentas do PWA Ionic Framework
  3. 3. 3
  4. 4. 4 Por que os PWAs importam O mundo das aplicações é altamente competitivo e cada vez mais cheio. Apenas nos últimos anos, o número de aplicativos de loja de aplicativos mais que dobrou, para mais de 2 milhões ( Lifewire ).O impacto disso é duplo: a fadiga dos aplicativos para os usuários e a imensa pressão para os desenvolvedores de aplicativos e arquitetos corporativos garantirem que seus aplicativos se destaquem e forneçam a melhor experiência de usuário. Um aplicativo que leva mais de alguns segundos para carregar ou mais do que alguns cliques para encontrar e fazer o download de uma loja de aplicativos pode custar esse usuário. Do lado positivo, um aplicativo que fornece conteúdo excelente de maneira simples e rápida, independentemente do dispositivo que o usuário possui, pode diferenciar sua empresa. É por isso que os Progressive Web Apps (PWAs) estão rapidamente se tornando a maneira padrão de enviar essas ótimas experiências de usuário para a web. Na verdade, o Gartner prevê que até 2020, 50% dos aplicativos móveis voltados para o consumidor, de propósito geral, serão PWAs. Mas o que são exatamente os PWAs e como você os faz trabalhar para você? Neste guia, você conhecerá os PWAs, completos com estatísticas e exemplos da vida real, para responder às perguntas de por que você precisa de um, como eles funcionam e como você pode começar. GARTNER PREVÊ QUE ATÉ 2020, 50% DE USO GERAL, APLICATIVOS MÓVEIS DEVIDO AO CONSUMIDOR SERÃO PWA.
  5. 5. 5 O que são PWAs? Os PWAs aproveitam os padrões e APIs da Web mais recentes para fornecer a experiência confiável, rápida e envolvente que as pessoas esperam dos aplicativos modernos. Por serem baseados na Web, eles entregam inerentemente as melhores partes da Web, incluindo um alcance extremamente amplo, acesso instantâneo, atualizações instantâneas e facilidade de compartilhamento. Em comparação com os aplicativos da web para dispositivos móveis tradicionais, os PWAs parecem muito mais com um aplicativo nativo. Na verdade, eles são quase sempre indistinguíveis de suas contrapartes nativas. Eles incluem armazenamento off-line e acesso a recursos nativos, como notificações push, geolocalização e câmera, todos entregues instantaneamente através do navegador da web.Diferentemente dos aplicativos nativos tradicionais, os usuários não precisam ser encaminhados pela loja de aplicativos.Os PWAs também costumam ser muito menores em tamanho do que os aplicativos nativos, por isso carregam mais rápido, funcionam melhor em redes de baixa largura de banda e ocupam menos espaço no dispositivo de um usuário . Aplicativos da Web progressivos são um Uma nova maneira de oferecer incríveis experiências de aplicativos para dispositivos móveis altamente otimizados, confiáveis e acessíveis completamente na Web.Aqui estão alguns dos recursos críticos que diferenciam os PWAs dos aplicativos tradicionais da web. Confiável Trabalhe offline e tenha bom desempenho em redes de baixa qualidade. RÁPIDO Carregue em segundos, com interações suaves dentro do aplicativo. Envolvente Experiência imersiva de aplicativos com acesso total aos recursos nativos. INDEXÁVEL
  6. 6. 6 Facilmente descoberto através de uma simples pesquisa na web. Menor Uma fração do tamanho de um aplicativo tradicional de loja de aplicativos. Novo Sempre atualizado com o conteúdo mais recente veiculado instantaneamente. INSTALÁVEL Permitir que os usuários "mantenham" os apps que consideram úteis em sua tela inicial. acessível 8, 216 Execute em computadores e dispositivos móveis ou em qualquer lugar que você encontrar um navegador. Os fatos Um expansivo estudo do usuário do Doubleclick by Google descobriu que: • ´ ↓ 53% dos usuários • ´ ↓ Sites carregados • ´ ↓ A maioria dos sites vai abandonar Dentro de 3 segundos leva cerca de 19 um site se isso acontecer ganhou duas vezes segundos para carregar não carregar dentro receita de publicidade em uma rede 3G 3 segundos em um como sites mais lentos dispositivo móvel
  7. 7. 7 O takeaway: aqueles que podem fornecer uma experiência rápida e amigável não basta se diferenciar com usuários mais felizes, eles realmente vêem um aumento de receita.É aqui que os PWAs separam sua empresa da multidão. Talvez você prefira exemplos da vida real sobre pesquisa? Duas empresas você pode ter ouvido falar de PWAs implementados e ter visto resultados impressionantes. Pinterest o envolvimento do usuário aumenta em 60%, ajudando a gerar um aumento de 44% na receita de anúncios gerada pelo usuário .Estes aumentos também representaram um aumento de 2-3% sobre o aplicativo nativo do Pinterest . Twitter's PWA fornece exatamente a mesma experiência do usuário que o aplicativo nativo do Twitter, enquanto usando menos de 3% do armazenamento do dispositivo.Esta combinação de um melhor, mais rápido, mais eficiente O produto tem sido um sucesso entre os usuários, com uma redução de 20% na taxa de rejeição e um aumento de 75% nos tweets enviados. O takeaway: Seja qual for o seu setor ou marca, os PWAs podem oferecer mais usuários engajamento, taxas de rejeição mais baixas e, finalmente, mais receita, proporcionando uma experiência melhor para seus usuários. Como os PWAs se encaixam na estratégia do seu aplicativo Vamos tirar uma coisa do caminho: PWAs vs. apps nativos não é uma batalha que ganha tudo.Os PWAs devem fazer parte de uma estratégia de aplicativos
  8. 8. 8 mais ampla focada na criação de uma experiência consistente, perfeita e de alta qualidade em todos os canais, seja um navegador para dispositivos móveis, um aplicativo móvel nativo, um navegador de desktop ou um aplicativo de desktop nativo. Em geral, os PWAs são ótimos para atrair novos usuários, enquanto os aplicativos instalados nativamente podem ser melhores para oferecer a mais rica experiência a usuários leais e repetitivos. Cada um tem suas vantagens e desvantagens, por isso é importante fazer algumas perguntas sobre sua marca. De onde vem sua base de usuários? Se a maioria de sua base de usuários já vem da web, então um PWA é um ajuste natural para o seu produto. Da mesma forma, se você quiser aumentar a quantidade de usuários que vêm da Web, fornecer uma experiência na Web aprimorada com um PWA pode ser um grande atrativo. PWAs VS. BATALHA NATIVO DOS APLICAÇÕES ISN 'TA WINNER-TAKE- ALL. Os PWAs DEVEM PARTICIPAR DE UMA ESTRATÉGIA DE APLICAÇÕES MAIS AMPLA E FOCADA NA CRIAÇÃO DE UMA EXPERIÊNCIA CONSISTENTE, SEM EMENDA E DE ALTA QUALIDADE EM TODOS OS CANAIS. Você tem uma alta taxa de rejeição? Se você deseja reduzir a taxa de rejeição, a experiência instantânea fornecida por um PWA pode ajudar. Ao reduzir a quantidade de etapas necessárias para entrar em sua experiência, passando de ir ao aplicativo ou à loja de jogos, pesquisar seu aplicativo e instalar seu aplicativo, basta clicar em um link para reduzir drasticamente a taxa de rejeição e rejeição. Você tem requisitos técnicos incomuns? Enquanto a web está se tornando mais poderosa a cada dia, ainda existem algumas coisas, como a autorização de impressões digitais, que ainda não estão disponíveis. Portanto, o caso mais comum em que um PWA pode não ser um ótimo ajuste é para produtos que possuem um requisito técnico disponível apenas em plataformas nativas. Mesmo nesses casos, no entanto, vale a pena
  9. 9. 9 considerar a adição de um PWA para melhorar a experiência do usuário para novos visitantes e, em seguida, rotea-los para as lojas de aplicativos, uma vez que eles desejam acessar funcionalidades mais avançadas. Você está criando um aplicativo B2E para funcionários da empresa? Para as equipes que criam aplicativos B2E (business-to-employee), a distribuição e a privacidade de dados podem ser um desafio e geralmente exigem uma solução de gerenciamento de dispositivo móvel (MDM). Como os PWAs são baseados em navegador, não são permitidas atividades robustas de gerenciamento de aplicativos, como lista de permissões, quebra automática de aplicativos e DLP com um aplicativo nativo .Na frente de distribuição, não há necessidade de implantar PWAs em uma loja de aplicativos, os funcionários podem simplesmente baixá-los diretamente do seu site quando eles precisarem deles.E as informações são armazenadas longe do dispositivo, no nível do navegador, facilitando as preocupações de privacidade de dados ( Forrester Research ). Os PWAs TÊM AMPLO SUPORTE EM TODO O MOBILE (INCLUINDO O SUPORTE DO IOS EM BREVE), E TAMBÉM ESTÃO INICIANDO PARA SER APOIADO EM PLATAFORMAS DE DESKTOP, COMO O CHROME O guia do arquiteto para aplicativos da Web progressivos Suporte de desktop para PWAs Os PWAs têm amplo suporte em dispositivos móveis (incluindo o suporte a iOS em breve) e também estão começando a receber suporte em plataformas de desktop, como o Chrome OS e o Windows 10. Microsoft anunciou recentemente sua intenção de tornar os PWAs um cidadão de primeira classe no Windows 10.Isso permitirá que eles sejam instalados diretamente da Microsoft Store,
  10. 10. 10 Inicie o menu e a lista de aplicativos ao lado de aplicativos nativos e abra em uma janela separada como um aplicativo normal do Windows. O Google também começou recentemente a melhorar a experiência do PWA no Chrome OS. Quando um usuário visita um PWA no Chromebook, ele é solicitado a adicionar esse PWA ao dispositivo, assim como no Android.Uma vez adicionado, esse PWA será exibido na gaveta de aplicativos e aberto em uma janela separada. O que tudo isso significa para você? Agora você pode enviar um PWA e fazer com que ele funcione tão bem para usuários em uma estação de trabalho quanto em dispositivos móveis e tablets. Os PWAs UTILIZAM NOVOS APIS WEB MODERNOS, OS TRABALHADORES DE SERVIÇOS MAIS CRUCIALMENTE E UM MANIFESTO DA APP DA WEB. Como funcionam os PWAs Os PWAs utilizam APIs da Web novas e modernas, mais crucialmente os Service Workers e um Manifesto do Aplicativo da Web. Embora essas duas APIs sejam relativamente novas, elas já têm suporte total no Chrome (e navegadores baseados no Chrome, como a Samsung Internet) e no Firefox, além de oferecer suporte na versão beta para o Safari e o Edge. Essas APIs possibilitam o envio de uma experiência de aplicativo com todos os recursos que não foi possível na Web até agora. Trabalhadores de serviço Os Service Workers são o maior participante, ajudando seu PWA a atingir esses benchmarks confiáveis, rápidos e envolventes. Os Service Workers permitem que o seu PWA trabalhe offline - não tradicionalmente possível na Web - carregue de maneira confiável independentemente do estado da conexão de rede do usuário e ative recursos como notificações push e sincronização de dados em segundo plano. Os Service Workers também oferecem a você um controle refinado sobre o armazenamento em cache por meio de APIs JavaScript, permitindo que você crie uma experiência off-line personalizada sob medida para seu aplicativo. Por
  11. 11. 11 exemplo, você pode programar o funcionário do serviço para veicular primeiro o conteúdo em cache, mantendo o aplicativo agradável e rápido, mas atualizar o cache em segundo plano para que, na próxima vez que o usuário abrir o PWA, o conteúdo esteja atualizado. Manifestos do Web App Os Manifestos do Web App permitem que o seu PWA ofereça a aparência que as pessoas esperam. Eles permitem que você especifique um ícone, o nome do aplicativo e a cor da tela inicial, além de permitir que os usuários instalem o PWA no dispositivo e o façam ao lado de seus aplicativos nativos. Mais informações Confira esses artigos para obter mais informações sobre os Service Workers e Manifestos de aplicativos da Web: •• Trabalhadores de Serviço: uma Introdução •• Cookbook do ServiceWorker •• O manifesto do aplicativo da Web Com um sólido entendimento dessas APIs, você está pronto para avançar para a próxima etapa: Construindo seu primeiro PWA. Como Começar Há muitos recursos úteis para ajudá-lo a criar um PWA. Aqui está um casal para você começar: •• O Google oferece um excelente laboratório de código que usa o vanilla JS para revisar os principais conceitos de PWAs de construindo um tempo simples PWA
  12. 12. 12 •• Se você for mais um aprendiz visual, o Chrome Dev Summit 2017 teve uma ótima palestra sobre os princípios básicos a ter em mente ao criar seu primeiro PWA Quando você estiver pronto para construir um PWA real, pronto para produção, considere o Ionic PWA Toolkit. O kit de ferramentas do PWA Ionic Framework Ouça, apesar de todas as suas grandes vantagens, construir um PWA rápido, envolvente e ótimo é um grande desafio quando você está tentando usar ferramentas tradicionais da web.Nosso objetivo com o PWA iônico Conjunto de ferramentas estava para remover essa complexidade. Ele começa com todas as práticas recomendadas do PWA como a configuração padrão, sem necessidade de configuração. Portanto, todos os recursos essenciais para fornecer uma ótima experiência - otimizar o tamanho do pacote, carregamento lento, divisão de código etc. - estão lá para começar, não são necessárias melhorias difíceis de implementar nas quais você precisa codificar.Isso tudo significa que seu aplicativo só carregará exatamente o JavaScript que uma página individual precisa, garantindo que o seu PWA possa atingir o tão importante tempo de carregamento de 3 a 5 segundos na rede média. O Ionic PWA Toolkit também fornece nossa configuração recomendada para a construção de PWAs prontos para produção com o Ionic, incluindo o Stencil de código aberto. (um projeto de código aberto da equipe Ionic) para sua lógica de aplicativo e o Ionic Framework de código aberto para sua interface de usuário. O TOOLKIT IONIC PWA TAMBÉM FORNECE NOSSA CONFIGURAÇÃO RECOMENDADA PARA A CONSTRUÇÃO DE PWAS PRONTOS PARA A PRODUÇÃO COM O IONIC.
  13. 13. 13 O Stencil utiliza os padrões mais recentes, como componentes da web, módulos ES, importações dinâmicas ES e muito mais, para garantir que seus aplicativos ofereçam uma excelente experiência construída em uma pilha de tecnologia moderna e confiável. O uso do Ionic Framework para seus componentes de UI garante que o seu PWA tenha a aparência moderna que os clientes esperam. Nossos componentes utilizam o design do material quando são executados em um dispositivo Android ou desktop e no design do iOS quando executados em um dispositivo iOS, garantindo que o usuário esteja familiarizado com sua interface do usuário. Também utilizamos as práticas recomendadas mais recentes para garantir que todas as suas animações sejam suaves e rápidas, mesmo em dispositivos inferiores. Para saber mais sobre o Ionic PWA Toolkit e se ele pode ajudar sua empresa, confira alguns de nossos recursos: •• Fórum de usuários •• Instruções de início rápido •• Guias, vídeos e e-books •• Documentos do desenvolvedor •• Kit de ferramentas Ionic PWA

×