Baixado 44 vezes
![Progressive Web Apps [pt_BR]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170306202026-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...](https://cdn.slidesharecdn.com/ss_thumbnails/erickmelo-webjump-201023142336-thumbnail.jpg?width=640&height=640&fit=bounds)
Progressive Web Apps
- 1. PROGRESSIVE WEB APPS Adquirindo super-poderesPROGRESSIVAMENTE
- 2.
- 3. eu sou uma ProgressiveWeb App PRAZER,
- 4. 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
- 5. VANTAGENS de apps nativas? ÓtimaPERFORMANCE Facilmente ACESSÍVEL a partir da home screen ANIMAÇÕES e INTERAÇÕES suaves
- 6. DESVANTAGENS de apps nativas? TEMPOde instalação Não é COMPARTILHÁVEL ATUALIZAÇÃO não costuma ser um procedimento padrão Lidar com devices com baixa MEMÓRIA
- 7. Show me yourPOWERS!
- 8. VANTAGENS de umaPWA INSTALÁ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
- 9. DESVANTAGENS de umaPWA 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
- 10. QUEM veio paraa festa?
- 11. APPLE não querdançar a música que está tocando
- 12. INGREDIENTES de umaPWA 1. APPLICATION SHELL 3. SERVICE WORKERS 2. WEB APP MANIFEST
- 13.
- 14. Application Shell No MODELOPADRÃ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
- 15. APPLICATION SHELL representao 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
- 16. O QUE deveestar 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)
- 17. 2. Web AppManifest
- 18. Web App Manifest Arquivode 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
- 19. EXEMPLO Web AppManifest
- 20. Web App ManifestVALIDATOR
- 21. Web App INSTALLBANNER 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
- 22.
- 23. Service Workers É umarquivo 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
- 24. Service Workers Pode definirquais 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
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. DICAS Service Workers Utilizeo 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
- 31. DICAS Service Workers ATENÇÃ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
- 32. DICAS Service Workers Usea guia Resources do Chrome Dev Tools para checar o que está acontecendo com service workers, cache, armazenamento etc
- 33.
- 34. FÁCIL de usare 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!
- 35. ARMAZENAMENTO Caches Object FÁCIL deusar ASSÍNCRONO Muito RÁPIDO NÃO é transacional RECENTE e possui compatibilidade muito baixa
- 36. ARMAZENAMENTO IndexedDB RÁPIDO Permite armazenas DADOSCOMPLEXOS ASSÍNCRONO TRANSACIONAL Alta COMPATIBILIDADE
- 37. ARMAZENAMENTO IndexedDB DIFICULDADE de usoda 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 Storage 2 - LoveField - fornece uma API parecida com SQL Opção mais INDICADA
- 38. 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 Indiano 63% 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
- 39.
- 40.
- 41.
Notas do Editor
- #5 => O que é uma PWA - Quando veio a especificação Notifications veio é que PWA ganhou mais atenção. - Porque? - apps podem ser um pouco mais limitada em muitos países, em alguns países apps são instaladas quando você compra o telefone e pronto em outros países você tem acesso à loja mas 3g é caro e wifi possui pouco acesso, então baixar e atualizar apps podem ser um desafio e tanto. Mesmo na América e Europa, os usuários baixam vários apps quando compram os telefones mas depois esse comportamento raramente continua acontecendo. - Quando usuários clicam em um link não tem que tomar decisões do tipo quando instalam um aplicativo. <meta name="apple-mobile-web-app-capable" content="yes">
- #6 => Desvantagens de apps nativas - A quantidade de apps que temos usadas tem sido cada vez menor, as pessoas estão deixando de baixar aplicativos, geralmente baixa quando compra o aparelho - o boom das apps passou, todo mundo lançou, tem app para cada ecommerce, cada serviço etc, web é a melhor opção de uso para esses usos mais pontuais - Faz sentido instalar um app apenas para pagar o ticket de estacionamento do shopping, ou mesmo instalar o app do restaurante que eu acabei de conhecer? De turismo relacionado a cidade que estou visitando? (Depois vou ter que me lembrar de deletar e a maioria das vezes não tem interação com SDK, a maioria só apresenta informações para o usuário) - Estudos mostram que usuários passa 80% do tempo usando app, mas não é nessas apps (Facebook, Mapa, Google, Email, Waze, Instagram). Metade do tempo que passa é no top 1, na maior parte do mundo é o Facebook. - Hoje tem um volta ao início, quando no primeiro iphone só era possível escrever uma app web, Jobs era contra desenvolver o SDK e queria que fosse tudo web. Quando publicaram as pessoas se acostumaram e acabou ficando no esquecimento. - O cara quer adicionar um ícone na home screen ou não (link descompromissado). - Qual opção temos hoje sem ter que instalar uma app? Alternativa é a web, acha um link ou faz uma busca, acha, abre a aba, usa, fecha e acabou, não exige um compromisso inicial gigantesco que é baixar uma app de 50MB, ocupar espaço, etc, o uso é pontual, descompromissado.
- #7 => Desvantagens de apps nativas - A quantidade de apps que temos usadas tem sido cada vez menor, as pessoas estão deixando de baixar aplicativos, geralmente baixa quando compra o aparelho - o boom das apps passou, todo mundo lançou, tem app para cada ecommerce, cada serviço etc, web é a melhor opção de uso para esses usos mais pontuais - Faz sentido instalar um app apenas para pagar o ticket de estacionamento do shopping, ou mesmo instalar o app do restaurante que eu acabei de conhecer? De turismo relacionado a cidade que estou visitando? (Depois vou ter que me lembrar de deletar e a maioria das vezes não tem interação com SDK, a maioria só apresenta informações para o usuário) - Estudos mostram que usuários passa 80% do tempo usando app, mas não é nessas apps (Facebook, Mapa, Google, Email, Waze, Instagram). Metade do tempo que passa é no top 1, na maior parte do mundo é o Facebook. - Hoje tem um volta ao início, quando no primeiro iphone só era possível escrever uma app web, Jobs era contra desenvolver o SDK e queria que fosse tudo web. Quando publicaram as pessoas se acostumaram e acabou ficando no esquecimento. - O cara quer adicionar um ícone na home screen ou não (link descompromissado). - Qual opção temos hoje sem ter que instalar uma app? Alternativa é a web, acha um link ou faz uma busca, acha, abre a aba, usa, fecha e acabou, não exige um compromisso inicial gigantesco que é baixar uma app de 50MB, ocupar espaço, etc, o uso é pontual, descompromissado.
- #8 => O que é uma PWA - Quando veio a especificação Notifications veio é que PWA ganhou mais atenção. - Porque? - apps podem ser um pouco mais limitada em muitos países, em alguns países apps são instaladas quando você compra o telefone e pronto em outros países você tem acesso à loja mas 3g é caro e wifi possui pouco acesso, então baixar e atualizar apps podem ser um desafio e tanto. Mesmo na América e Europa, os usuários baixam vários apps quando compram os telefones mas depois esse comportamento raramente continua acontecendo. - Quando usuários clicam em um link não tem que tomar decisões do tipo quando instalam um aplicativo. <meta name="apple-mobile-web-app-capable" content="yes">
- #9 => O que é uma PWA - Quando veio a especificação Notifications veio é que PWA ganhou mais atenção. - Porque? - apps podem ser um pouco mais limitada em muitos países, em alguns países apps são instaladas quando você compra o telefone e pronto em outros países você tem acesso à loja mas 3g é caro e wifi possui pouco acesso, então baixar e atualizar apps podem ser um desafio e tanto. Mesmo na América e Europa, os usuários baixam vários apps quando compram os telefones mas depois esse comportamento raramente continua acontecendo. - Quando usuários clicam em um link não tem que tomar decisões do tipo quando instalam um aplicativo. <meta name="apple-mobile-web-app-capable" content="yes">
- #10 => O que é uma PWA - Quando veio a especificação Notifications veio é que PWA ganhou mais atenção. - Porque? - apps podem ser um pouco mais limitada em muitos países, em alguns países apps são instaladas quando você compra o telefone e pronto em outros países você tem acesso à loja mas 3g é caro e wifi possui pouco acesso, então baixar e atualizar apps podem ser um desafio e tanto. Mesmo na América e Europa, os usuários baixam vários apps quando compram os telefones mas depois esse comportamento raramente continua acontecendo. - Quando usuários clicam em um link não tem que tomar decisões do tipo quando instalam um aplicativo. <meta name="apple-mobile-web-app-capable" content="yes">
- #11 => Apple não quer dançar a música que está tocando - Jobs foi o primeiro intusiasta mas quando descobriram o mercado enorme com App Store, criou-se uma resistência muito grande da evolução do safari no IOS porque para que isso avance eles vão ter que abrir mão do controle que eles possuem da loja, e historicamente são bem resistencia a esse tipo de mudança porque eles são bem restritivos com a loja e é complicado garantir o fluxo de dinheiro gerado pelos aplicativos. Lançaram o Apple Pay na web, mas nesse caso você teria que escolher usar e não obrigação. - Microsoft o grande problema de comprar é a falta de aplicativo, então pra eles é muito bom incentivar essa evolução, mas como o primeiro alvo dos desenvolvedores sempre é IOS, e eles desistem desse poder eles perdem a relevância desse modelo. - Google tem interesse em diminuir esse poder do concorrente, e como tem outras formas de monetizar, eles incentivam essa evolução e estão fazendo muita propaganda. Por mais que não façam dinheiro com android e apps, quando você usa android ele vem com todos os serviços deles instalados e o negócio principal do Google é, e sempre foi ads, ou seja, fazem dinheiro com você usando as ferramentas, eles querem que mais pessoas usem a web e serviços deles. - Suporte no Safari: O que foi anunciado em 2007, versão tataravó do webmanifest, é possível instalar na home screen com várias limitações, é proprietária da Apple, mas daria pra fazer uma solução com webmanifest e recursos mais novos em outros devices e uma versão com as metatags específicas da Apple para o IOS. Offline: a primeira especificação é a Application Cache API que surgiu muito tempo atrás na época dos primeiros iphones. Essa é uma especificação muito limitada, por isso surgiu uma especificação nova do services workers (que não tem no IOS). Mas poderia implementar no IOS com Application Cache API e Service Workers nos navegadores recentes, ou então no IOS não funcionar offline. Idem para push notifications. - E a busca? Nas stores é fácil ir lá e buscar uma app pelo nome, na web é mais orgânico: via google, links compartilhados em redes sociais etc. É mais fácil divulgar um link do que. Acesse a store, busque por x, baixe, instale, abra... - No primeiro acesso a app não tem como ser offline, até que baixe e guarde em cache, a pessoa pode usar e caso queira se engajar (guardar a experiência) e instalar o app ele pode adicionar a home screen (instalar) através do menu do navegador (?). Os navegadores estão inteligentes para saber o melhor momento para o usuário instalar o app (Chrome lidera pesquisas sobre isso). Se o usuário está acessando o app algumas vezes e fica perceptível que você está gostando do conteúdo é exibido um banner nativo do navegador (install banner) sugerindo que o usuário instale o app (desde que o site possua o webmanifest). É melhor que aqueles banners chatos que são exibidos de imediato quando você acessa pela primeira vez, eles estão refinando isso para tentar saber o melhor momento para convidar o usuário a executar essa ação. Exemplo do Gmail que apesar de tudo exibe o banner de instalação logo de cara. Tamanho mínimo app com swift é 60MB. As pessoas não vão queimar 60MB de 3G só pq entrou num site de notíficas e você não exibe o conteúdo completo para forçar o usuário a baixar o app. - O futuro pode ser chat bots. Ao invés de instalar um app você simplesmente adiciona um bot no seu Facebook message, pergunta alguma coisa, ele respode e você vai embora, por ex. - Onde fica phonegap, ionic etc. Google fez várias palestras sobre PWA e anunciaram na palestra principal instant apps do android, pegando de surpresa a parte de desenvolvimento web da empresa que não sabiam. Perceberam que o grande gargalho é a instalação e tentaram solucionar isso com apps nativas e não com web, ainda não foi divulgado SDK etc. mas o cara clica em um link normal, e abre a primeira view da app como se fosse uma página. o desenvolvedor tem que modularizar a app, e vai baixando e exibindo a medida que o usuário utiliza, sem ter que instalar etc. Cada parte modular do app não pode ter mais que 4MB (divulgado pelo Google). - PhoneGap, o criado disse que o objetivo dele era que morresse um dia, ele vislumbrava o dia que a web chegasse lá e não precisasse mais dos recursos. (antes de vender para Adobe). - Existe pressão dos grandes players para adoção (Facebook - React native) para que as pessoas usam sempre a versão mais recente de forma transparente, sempre oferecendo isso direto pro usuário sem ter que ir buscar as novas atualizações. - alguns lugares, principalmente África e Ásia (sem internet 3g ou com acesso muito ruim) as pessoas não atualizam as apps, usuários compartilham versões dos apps como Facebook etc através de pendrives, nesses cenários mais limitados PWA são
- #12 => Apple não quer dançar a música que está tocando - Jobs foi o primeiro intusiasta mas quando descobriram o mercado enorme com App Store, criou-se uma resistência muito grande da evolução do safari no IOS porque para que isso avance eles vão ter que abrir mão do controle que eles possuem da loja, e historicamente são bem resistencia a esse tipo de mudança porque eles são bem restritivos com a loja e é complicado garantir o fluxo de dinheiro gerado pelos aplicativos. Lançaram o Apple Pay na web, mas nesse caso você teria que escolher usar e não obrigação. - Microsoft o grande problema de comprar é a falta de aplicativo, então pra eles é muito bom incentivar essa evolução, mas como o primeiro alvo dos desenvolvedores sempre é IOS, e eles desistem desse poder eles perdem a relevância desse modelo. - Google tem interesse em diminuir esse poder do concorrente, e como tem outras formas de monetizar, eles incentivam essa evolução e estão fazendo muita propaganda. Por mais que não façam dinheiro com android e apps, quando você usa android ele vem com todos os serviços deles instalados e o negócio principal do Google é, e sempre foi ads, ou seja, fazem dinheiro com você usando as ferramentas, eles querem que mais pessoas usem a web e serviços deles. - Suporte no Safari: O que foi anunciado em 2007, versão tataravó do webmanifest, é possível instalar na home screen com várias limitações, é proprietária da Apple, mas daria pra fazer uma solução com webmanifest e recursos mais novos em outros devices e uma versão com as metatags específicas da Apple para o IOS. Offline: a primeira especificação é a Application Cache API que surgiu muito tempo atrás na época dos primeiros iphones. Essa é uma especificação muito limitada, por isso surgiu uma especificação nova do services workers (que não tem no IOS). Mas poderia implementar no IOS com Application Cache API e Service Workers nos navegadores recentes, ou então no IOS não funcionar offline. Idem para push notifications. - E a busca? Nas stores é fácil ir lá e buscar uma app pelo nome, na web é mais orgânico: via google, links compartilhados em redes sociais etc. É mais fácil divulgar um link do que. Acesse a store, busque por x, baixe, instale, abra... - No primeiro acesso a app não tem como ser offline, até que baixe e guarde em cache, a pessoa pode usar e caso queira se engajar (guardar a experiência) e instalar o app ele pode adicionar a home screen (instalar) através do menu do navegador (?). Os navegadores estão inteligentes para saber o melhor momento para o usuário instalar o app (Chrome lidera pesquisas sobre isso). Se o usuário está acessando o app algumas vezes e fica perceptível que você está gostando do conteúdo é exibido um banner nativo do navegador (install banner) sugerindo que o usuário instale o app (desde que o site possua o webmanifest). É melhor que aqueles banners chatos que são exibidos de imediato quando você acessa pela primeira vez, eles estão refinando isso para tentar saber o melhor momento para convidar o usuário a executar essa ação. Exemplo do Gmail que apesar de tudo exibe o banner de instalação logo de cara. Tamanho mínimo app com swift é 60MB. As pessoas não vão queimar 60MB de 3G só pq entrou num site de notíficas e você não exibe o conteúdo completo para forçar o usuário a baixar o app. - O futuro pode ser chat bots. Ao invés de instalar um app você simplesmente adiciona um bot no seu Facebook message, pergunta alguma coisa, ele respode e você vai embora, por ex. - Onde fica phonegap, ionic etc. Google fez várias palestras sobre PWA e anunciaram na palestra principal instant apps do android, pegando de surpresa a parte de desenvolvimento web da empresa que não sabiam. Perceberam que o grande gargalho é a instalação e tentaram solucionar isso com apps nativas e não com web, ainda não foi divulgado SDK etc. mas o cara clica em um link normal, e abre a primeira view da app como se fosse uma página. o desenvolvedor tem que modularizar a app, e vai baixando e exibindo a medida que o usuário utiliza, sem ter que instalar etc. Cada parte modular do app não pode ter mais que 4MB (divulgado pelo Google). - PhoneGap, o criado disse que o objetivo dele era que morresse um dia, ele vislumbrava o dia que a web chegasse lá e não precisasse mais dos recursos. (antes de vender para Adobe). - Existe pressão dos grandes players para adoção (Facebook - React native) para que as pessoas usam sempre a versão mais recente de forma transparente, sempre oferecendo isso direto pro usuário sem ter que ir buscar as novas atualizações. - alguns lugares, principalmente África e Ásia (sem internet 3g ou com acesso muito ruim) as pessoas não atualizam as apps, usuários compartilham versões dos apps como Facebook etc através de pendrives, nesses cenários mais limitados PWA são
- #15 => App Shell - É como o código de uma app nativa que você coloca na loja, é o código necessário para que a app funcione mas não contém nenhum dado.
- #16 => App Shell - É como o código de uma app nativa que você coloca na loja, é o código necessário para que a app funcione mas não contém nenhum dado.
- #24 => Service Workers - A maioria das web apps são construídas em um modelo cliente/servidor, totalmente dependente do servidor. Service works ajudam a mudar isso,
- #25 => Service Workers - A maioria das web apps são construídas em um modelo cliente/servidor, totalmente dependente do servidor. Service works ajudam a mudar isso,
- #35 => Armazenamento - Você deve ter em mente que os browsers não prometem manter os dados para sempre, os dados podem ser removidos sem aviso, por isso é importante sincronizar esses dados com o servidor assim que possível. Uma outra vantagem de fazer isso é que dessa forma, ao mudar de dispositivo as configurações, os dados e demais informações estarão disponíveis para o usuário.
- #36 => Armazenamento - Você deve ter em mente que os browsers não prometem manter os dados para sempre, os dados podem ser removidos sem aviso, por isso é importante sincronizar esses dados com o servidor assim que possível. Uma outra vantagem de fazer isso é que dessa forma, ao mudar de dispositivo as configurações, os dados e demais informações estarão disponíveis para o usuário.
- #37 => Armazenamento - Você deve ter em mente que os browsers não prometem manter os dados para sempre, os dados podem ser removidos sem aviso, por isso é importante sincronizar esses dados com o servidor assim que possível. Uma outra vantagem de fazer isso é que dessa forma, ao mudar de dispositivo as configurações, os dados e demais informações estarão disponíveis para o usuário.
- #38 => Armazenamento - Você deve ter em mente que os browsers não prometem manter os dados para sempre, os dados podem ser removidos sem aviso, por isso é importante sincronizar esses dados com o servidor assim que possível. Uma outra vantagem de fazer isso é que dessa forma, ao mudar de dispositivo as configurações, os dados e demais informações estarão disponíveis para o usuário.