PWA
Progressive Web
Applications
Jackson Veroneze
Software Developer
jackson@jacksonveroneze.com
https://jacksonveroneze.com
https://br.linkedin.com/in/jacksonveroneze
Autores
Mario Mendonça
Software Developer
mario.mendonca@gmail.com
https://br.linkedin.com/in/mario-mendonca
Aplicações CLI
Aplicações Desktop
Aplicações Web
Aplicações Mobile
Por que gostamos dos aplicativos Mobile?
Usamos aplicativos de celular todos os dias, e repetidas vezes ao dia – utilitários,
redes sociais, aplicativos de mensagens, tocadores de música.
Não precisa abrir um navegador, digitar uma URL, se autenticar e por aí vai. Basta
clicar em um ícone na Home que está tudo pronto.
Além disso, o aplicativo é mais rápido normalmente, trabalha offline e envia
notificações.
O que é ruim nas Apps Mobile?
Não são facilmente linkáveis, ou seja, não tem como eu enviar um link do
Facebook, de uma postagem da Web e você ver no seu telefone.
Não são indexadas pelos mecanismos de busca do Google, o que pode impactar
diretamente a visibilidade da sua app, ficando restrita apenas ao marketplace.
Por fim temos a instalação e atualização dos aplicativos, que muitas vezes são
muito custosos.
O que é ruim nas Web Mobile Apps?
Os websites mobile continuam lentos, pesados, e muitas vezes travam o
navegador no meio da navegação.
Facebook e o Google já começaram a preparar iniciativas para driblar esse
problema, como o Facebook Instant Articles e o Google Accelerated Mobile
Pages.
Mas esse tipo de iniciativa não resolve o problema, apenas o contorna.
Não tem notificações.
Não trabalham offline.
PWA - A Salvação?
Ele começa como uma simples aba no Chrome e se torna “progressivamente
mais app” à medida em que você engaja e interage com ele. Até chegar ao ponto
onde basta você adicionar o Web App à sua página inicial e pronto: ele passa a
adquirir funções que antes eram exclusivas de aplicativos nativos: geolocalização,
notificações, uso offline, etc..
“É uma aplicação Web com performance, animações,
notificações, instalável, trabalhando offline, linkável,
indexável e de fácil atualização.”
“Esses aplicativos não são entregues
através da App Store, eles são apenas
websites que tomaram a dose certa
de vitaminas.”
As vantagens para o usuário
Exemplo: O Shopping
Imagine você visitando o shopping pela primeira vez e talvez a única vez. Para
efetuar o pagamento do estacionamento você necessita usar o app do shopping.
Pensando num app nativo, precisaria ir até a loja de aplicativos do seu SO e
instalá-lo. Para utilizar, provavelmente, apenas uma vez.
Agora imagine a mesma situação, porém, para efetuar o pagamento você precisa
acessar apenas uma url em seu browser e progressivamente ele vai se tornando
um app, sem necessidade de instalação.
Características
Progressivos: funcionam para todos os usuários, independentemente da escolha de navegador, pois são
criados com aprimoramento progressivo como princípio central.
Responsivos: ajustam-se a qualquer formato: computador, dispositivo móvel, tablet ou o que quer que
esteja por vir.
Independentes de conectividade: aprimorados para usar service workers para funcionar off-line ou em
redes de baixa qualidade.
Semelhantes a um app: o usuário sente que está usando um app, com interações e navegação no
mesmo estilo de apps, pois eles são criados no modelo app shell.
Atualizados: sempre atualizados, graças ao processo de atualização do service worker.
Características
Seguros: veiculados por HTTPS para impedir o rastreamento e assegurar que o conteúdo não foi
adulterado.
Detectáveis: são identificáveis como "aplicativos" graças ao escopo de registro do service worker e
manifestos W3C, permitindo que mecanismos de pesquisa os encontrem.
Reengajados: facilitam o reengajamento por meio de recursos como notificações push.
Instaláveis: permitem que os usuários "salvem" os apps que consideram mais úteis na sua tela inicial
sem a inconveniência de ter que usar uma loja de apps.
Vinculáveis por link: compartilhamento fácil por meio de URL, sem a exigência de instalações
complexas.
Criar atalho
Service worker
Status SSL
Heurística de frequência
de acessos
Será que a moda pega?
Tecnologicamente falando: não é todo navegador que suporta as tecnologias e
frameworks necessários para que um aplicativo web progressivo funcione a 100%
de suas capacidades. Mas isso é só uma questão de tempo; toda tecnologia
acaba empurrando os limites das plataformas onde ela roda.
Exemplos
https://sergiolopes.github.io/shopping/
https://paperplanes.world/
https://task-list-5944f.firebaseapp.com/
https://pwa.rocks/
Referências
http://arquiteturadeinformacao.com/mobile/o-que-sao-progressive-web-apps/
https://codelabs.developers.google.com/codelabs/your-first-pwapp-
pt/index.html?index=..%2F..%2Findex#0
http://blog.balta.io/2016/10/10/pwa-por-onde-comecar/
http://hipsters.tech/progressive-web-apps-hipsters-03/

Progressive Web Apps

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
    Por que gostamosdos aplicativos Mobile? Usamos aplicativos de celular todos os dias, e repetidas vezes ao dia – utilitários, redes sociais, aplicativos de mensagens, tocadores de música. Não precisa abrir um navegador, digitar uma URL, se autenticar e por aí vai. Basta clicar em um ícone na Home que está tudo pronto. Além disso, o aplicativo é mais rápido normalmente, trabalha offline e envia notificações.
  • 8.
    O que éruim nas Apps Mobile? Não são facilmente linkáveis, ou seja, não tem como eu enviar um link do Facebook, de uma postagem da Web e você ver no seu telefone. Não são indexadas pelos mecanismos de busca do Google, o que pode impactar diretamente a visibilidade da sua app, ficando restrita apenas ao marketplace. Por fim temos a instalação e atualização dos aplicativos, que muitas vezes são muito custosos.
  • 9.
    O que éruim nas Web Mobile Apps? Os websites mobile continuam lentos, pesados, e muitas vezes travam o navegador no meio da navegação. Facebook e o Google já começaram a preparar iniciativas para driblar esse problema, como o Facebook Instant Articles e o Google Accelerated Mobile Pages. Mas esse tipo de iniciativa não resolve o problema, apenas o contorna. Não tem notificações. Não trabalham offline.
  • 10.
    PWA - ASalvação? Ele começa como uma simples aba no Chrome e se torna “progressivamente mais app” à medida em que você engaja e interage com ele. Até chegar ao ponto onde basta você adicionar o Web App à sua página inicial e pronto: ele passa a adquirir funções que antes eram exclusivas de aplicativos nativos: geolocalização, notificações, uso offline, etc.. “É uma aplicação Web com performance, animações, notificações, instalável, trabalhando offline, linkável, indexável e de fácil atualização.”
  • 11.
    “Esses aplicativos nãosão entregues através da App Store, eles são apenas websites que tomaram a dose certa de vitaminas.”
  • 12.
    As vantagens parao usuário Exemplo: O Shopping Imagine você visitando o shopping pela primeira vez e talvez a única vez. Para efetuar o pagamento do estacionamento você necessita usar o app do shopping. Pensando num app nativo, precisaria ir até a loja de aplicativos do seu SO e instalá-lo. Para utilizar, provavelmente, apenas uma vez. Agora imagine a mesma situação, porém, para efetuar o pagamento você precisa acessar apenas uma url em seu browser e progressivamente ele vai se tornando um app, sem necessidade de instalação.
  • 13.
    Características Progressivos: funcionam paratodos os usuários, independentemente da escolha de navegador, pois são criados com aprimoramento progressivo como princípio central. Responsivos: ajustam-se a qualquer formato: computador, dispositivo móvel, tablet ou o que quer que esteja por vir. Independentes de conectividade: aprimorados para usar service workers para funcionar off-line ou em redes de baixa qualidade. Semelhantes a um app: o usuário sente que está usando um app, com interações e navegação no mesmo estilo de apps, pois eles são criados no modelo app shell. Atualizados: sempre atualizados, graças ao processo de atualização do service worker.
  • 14.
    Características Seguros: veiculados porHTTPS para impedir o rastreamento e assegurar que o conteúdo não foi adulterado. Detectáveis: são identificáveis como "aplicativos" graças ao escopo de registro do service worker e manifestos W3C, permitindo que mecanismos de pesquisa os encontrem. Reengajados: facilitam o reengajamento por meio de recursos como notificações push. Instaláveis: permitem que os usuários "salvem" os apps que consideram mais úteis na sua tela inicial sem a inconveniência de ter que usar uma loja de apps. Vinculáveis por link: compartilhamento fácil por meio de URL, sem a exigência de instalações complexas.
  • 15.
    Criar atalho Service worker StatusSSL Heurística de frequência de acessos
  • 16.
    Será que amoda pega? Tecnologicamente falando: não é todo navegador que suporta as tecnologias e frameworks necessários para que um aplicativo web progressivo funcione a 100% de suas capacidades. Mas isso é só uma questão de tempo; toda tecnologia acaba empurrando os limites das plataformas onde ela roda.
  • 17.
  • 18.