PROGRESSIVE WEB APPS

Adquirindo super-poderes PROGRESSIVAMENTE

SORRY!

eu sou uma Progressive Web AppPRAZER,

O QUE É uma PWA?NÃO é uma especificação

PROGRESSIVE por adquirir poderes progressivamente de acordo com a capacidade dos browsers

EVOLUÇÃO de ideias que foram surgindo e amadurecendo ao longo dos anos que podem ser melhor aplicadas hoje, no cenário atual

É uma BUZZWORD que de novo mesmo tem pouca coisa

VANTAGENS de apps nativas?

Ótima PERFORMANCE

Facilmente ACESSÍVEL a partir da home screen

ANIMAÇÕES e INTERAÇÕES suaves

DESVANTAGENS de apps nativas?

TEMPO de instalação

Não é COMPARTILHÁVEL

ATUALIZAÇÃO não costuma ser um procedimento padrão

Lidar com devices com baixa MEMÓRIA

Show me your POWERS!

VANTAGENS de uma PWAINSTALÁVEL (mas ainda compartilhável usando URLs)

É possível utilizar PUSH NOTIFICATIONS

Pode funcionar OFFLINE e conexões lentas

CARREGAMENTO INSTANTÂNEO e com splash screen (apps nativas)

Excelente RENDERIZAÇÃO e ANIMAÇÕES SUAVES com 60fps

Ainda funciona como uma web app normal, acessível pelo BROWSER

SEGURANÇA, pois service workers requerem tráfego usando HTTPS

DESVANTAGENS de uma PWA

Ainda é algo muito RECENTE

Não é possível usar todas as FUNCIONALIDADES NATIVAS do device (https://whatwebcando.today)

COMPATIBILIDADE dos navegadores

Requer um nível mais alto de EXPERIÊNCIA dos desenvolvedores para gerar algo de ALTA QUALIDADE

QUEM veio para a festa?

APPLE não quer dançar a música que está tocando

INGREDIENTES de uma PWA

1. APPLICATION SHELL

3. SERVICE WORKERS

2. WEB APP MANIFEST

1. Application Shell

Application Shell

No MODELO PADRÃO, toda a página, inclusive o conteúdo é gerada no servidor antes de ser entregue para o browser.

PWAs separam as partes que são ALTERADAS COM FREQUÊNCIA, que são essencialmente o conteúdo, das partes que não sofrem tantas mudanças

APPLICATION SHELL representa o MÍNIMO de HTML, CSS e JS requerido para fornecer a INTERFACE para a PWA garantindo uma boa performance.

Primeiro carregamento é EXTREMAMENTE RÁPIDO e vai imediatamente para o CACHE

Nas requisições sequentes a PWA não precisa carregar tudo novamente, apenas os dados necessários

Application Shell

O QUE deve estar no meu Application Shell?

O que precisa estar na PRIMEIRA TELA imediatamente?

Quais componentes da INTERFACE são essenciais para o aplicativo?

Quais os assets necessários (javascripts, styles, imagens etc)

2. Web App Manifest

Web App Manifest

Arquivo de configuração JSON

DEFINE nome, ícones, splash screen, theme color, modo full screen, orientação da tela

App ISOLADA no gerenciador de tarefas como qualquer outro aplicativo

EXEMPLO Web App Manifest

Web App Manifest VALIDATOR

Web App INSTALL BANNER

Funcionalidade somente do CHROME

BANNER sugerindo ao usuário instalar seu aplicativo na home screen

REQUISITOS: service workers, web app manifest, engajamento do usuário

EVENTOS: antes de exibir o banner, após instalar o app etc. Existem opções no dev tools para testar esses eventos

3. Service Workers

Service Workers

É um arquivo JAVASCRIPT que roda em BACKGROUND, separado da sua página, que não precisa estar aberta

Como um PROXY que fica entre o browser e o servidor interceptando as requisições e decidindo como agir

Fornece PODERES para PWAs existirem ALÉM do browser

Service Workers

Pode definir quais EVENTOS que irão despertar o service worker (push notifications, sincronização quando conexão for restaurada etc)

Por interceptar as requisições necessita HTTPS (exceto desenvolvimento), oferecendo SEGURANÇA

Ao interceptar requisições, pode fazer CACHE dos recursos e usá-los como resposta em requisições subsequentes, respondendo instantaneamente e offline

REGISTRANDO Service Worker

REGISTRANDO Service Worker

ESCOPO Service Worker

INSTALANDO Service Worker

INTERCEPTANDO REQUISIÇÕES Service Worker

DICAS Service Workers

Utilize o MODO ANÔNIMO para se certificar que os service workers e qualquer coisa que esteja em cache irão expirar

chrome://serviceworker-internals - service workers instalados e seus estados. Você pode atualizá-los ou removê-los

DICAS Service WorkersATENÇÃO: Várias abas abertas compartilham o mesmo service worker. Ao atualizar o service worker a versão mais recente fica inativa até que todas as abas sejam fechadas ao se fechar a janela

DICAS Service WorkersUse a guia Resources do Chrome Dev Tools para checar o que está acontecendo com service workers, cache, armazenamento etc

COMPATIBILIDADE Service Workers

FÁCIL de usar e baseado em chave-valor

ARMAZENAMENTO Local Storage

Pode armazenar APENAS STRINGS

SÍNCRONO

DISPONÍVEL em quase todos os navegadores

NÃO é transacional

Deve ser EVITADO!

ARMAZENAMENTO Caches Object

FÁCIL de usar

ASSÍNCRONO

Muito RÁPIDO

NÃO é transacional

RECENTE e possui compatibilidade muito baixa

ARMAZENAMENTO IndexedDB

RÁPIDO

Permite armazenas DADOS COMPLEXOS

ASSÍNCRONO

TRANSACIONAL

Alta COMPATIBILIDADE

ARMAZENAMENTO IndexedDB

DIFICULDADE de uso da API, que exige várias configurações e manuseio de callbacks

Biblioteca FACILITAM O USO:1 - localForage - publicado pela Mozilla, fornece uma API parecida com Local Storage2 - LoveField - fornece uma API parecida com SQL

Opção mais INDICADA

EXEMPLOS de PWAs

FLIPBOARD - Aplicativo agregador no formato de revistas traduzidos em mais de 20 idiomas

Usuários ativos por mês cresceram 75%. Na web usuários podem chegar até um site através de um simples click

FLIPKART - Mais popuplar ecommerce Indiano63% dos usuários com internet 2G. Adicionaram service workers e simplificaram o site, facilitando a busca dos produtos e usando 3x menos dados do usuário. Navegação e visualização dos produtos offline resultaram em aumento de engajamento e vendas

#sóquenão

Referências

https://classroom.udacity.com/courses/ud811

https://www.youtube.com/watch?v=sH7dlRnuh-k&feature=youtu.be&a=

http://hipsters.tech/progressive-web-apps-hipsters-03

https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/

OBRIGADO!