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.

2. 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.

3. 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

4. 3

5. 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.

6. 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

7. 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

8. 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

9. 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

10. 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,

11. 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

12. 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

13. 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.

14. 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