 Bom, meu nome é Ricardo, sou desenvolvedor web e mobile há 15 anos e conheci o Postpress lá na versão 2.6, 2.8, e comecei a... desde que eu conheci o Postpress, comecei a fazer tudo com o Postpress, né? Você seja aquele filme em casamento grego, que tem o pai da menina que é grego, ele fala assim, ele fala uma palavra que eu vou te mostrar a raiz dela no grego, mais ou menos eu com o Postpress, ele fala um sistema que eu vou transformar e fazer com o Postpress. E aí, com isso, fui a ter uma diferença e hoje eu vou falar sobre o Progressive Web Apps. Alguém que já ouviu falar sobre o Progressive Web Apps? Alguém que estava... essa parede que eu apresentei na São Paulo, o Alguém estava aqui em São Paulo, essa é a chance de falar de lá? Não, beleza. Os Progressive Web Apps, eles começaram... eles começaram a dar de origem, os Progressive Web Apps foram usá-los para as aplicações web, né? Os Web Apps, que eram os aplicações... R&R Sim, eles foram evoluindo, evoluindo até que no ano passado, o ADOTO, o PWA, uma base para a continuação das aplicações web para o Progressive Web Apps. Então, ok. Pessoal, se você não vencem o microfone... Fala com o microfone para que está melhor para gravar você. Ah, para gravar o microfone. Me igualar com o Jofone. Vencei um jogo aqui em Jovem Boca, eu vencei muita montagem com o Jovem Boca. Também, também. Então, as aplicações web para o Progressive Web Apps, você tem muito bom. É um site, né? Ele roda, você acessa o URL, você acessa ele por um navegador. É um site? Não. Não é um site. É um apetitivo? Ele roda antigamente no seu usuário, ele roda em Android, antigamente. Não, não é apetitivo. Ele é um PWA. É um novo tipo de aplicação na última apresentação. E aí, para ele ser um PWA, tem que ser. Seguir três, três que fizeram. Tem que ser confiável, rápido e catugante. Essa é a definição do que eu vou mostrar. Na página anterior, ele falou agora no finalzinho, que se o seu site for mais de cinco segundos, ele vai perder uma parte da audiência. E ele já falou sobre a congessão do Mubáriac. Hoje em dia, se o seu site for mais do Mubáriac, no desktop, o seu site tem muitas erradas. E é isso que acontece. Hoje em dia, 85%, às vezes 90% do trafico de sites, de 80% a 90% do trafico de sites, que trabalha com o Mubáriac, que geralmente percebe isso, é o Wi-Fi. Seu usuário não está mais no desktop, e não está mais no desktop, ele está no celular. Ou não está mais, mas está mais de 100 a 200, 3% do trafico. É só a gente ver o quanto a gente usa no celular. Então, o PWA, a ideia do IRC, rápido, cativante, confiável, é que atenda esse público. É que o usuário tenha a melhor experiência possível no desistir do que ele tiver, seja no desktop ou no celular, e que tenha a assistência rápida. A busca, o santo viral do PWA é carregar em um segundo. Ele tem métricas e prescrições de usuário. Quando o usuário clica no botão, ele fica com aquela interação, em 10 mil segundos. Então, em todas essas métricas, ele vai ajudar a assinar uma coisa do ar. Mas vamos lá. Por que ele é confiável? Ele está sempre disponível. O PWA, ele é salvo no caixa do navegô, e ele fica disponível imediatamente para o usuário assim criado. Então, primeiro você vai... Primeiramente o usuário acessa com o site. Ele baixa, aqui ele é aplicativo, ele fica rolando e botando no navegador, no usuário. Então, outra vez que ele acessar, ele vai começar a baixar novamente, porque já vai estar ali no celular dele. Ele só vai atualizar o conteúdo. E outra coisa é que, como ele está salvo no celular, não precisa de rede para acessar. Então, você pode, por exemplo, o usuário pode acessar para a primeira vez, você baixa lá os 10 últimos postos do blog, ele é o primeiro, e depois, com ele acessar de novo, ele está offline. Ele vai conseguir ver o segundo, terceiro, o quarto, todos os outros postos do blog, sem necessariamente acessar novamente mesmo. Isso usa também, por exemplo, a loja virtual. Você baixa lá o catálogo, e quando o usuário acessar novamente, quando a gente ver offline, ele vai ver seu catálogo. Não vai precisar estar na rede novamente para baixar aquela informação de novo. E isso também genera envolvimento de dados. E é um problema muito sério que a gente tem hoje em dia, já primeiro bastante, mas dados naquilo da rede muito caro. Então, se você estiver com um pouco mais de sequência, quando ele precisa de dados do seu usuário, mais ele vai acessar o seu site. Eu falei um pouco do rápido já, então, primeiro carregamento. Aquela época que ele falou de 6 segundos, para ser considerado PWA, pelo lateral do Google, são 3 segundos para ter a frais principal ficar ociosa por 5 segundos. Então, não adianta também mais carregá-la aqui no site, em meio segundo, e depois sair aqui entre os scripts ali em cima. Não é isso. A frais principal que carrega o site tem que ser ociosa por 5 segundos. É, a partir desse momento, ele considera que o seu site foi totalmente carregado. Você pode tentar lute criar essa métrica que não vá certo. Ele realmente só considera como você faz essa... quando a frais explica a parada, né? E a interação do usuário é uma coisa muito interessante. Da pergunta do seu técnico, do seu uso para animações, você pode estar gerando muita carga para fazer uma interação simples. Por que, de repente, você usa lava? Vou desprever aqui para o primo, mas não é mais... A gente já utiliza para navegação, por exemplo, que o usuário o avoda e aí ele leva meio segundo para poder fazer a animação. Meu segundo para falar não é nada, mas o usuário percebe isso. Então, você tem que ter no máximo 10 mil segundos de interação para você tentar ter ao lado um padrão que é exigido hoje de jeito de experiência do usuário, né? E ele tem que ser cativante. Os aplicativos, eles chamam a interação. Eles buscam a interação. Se vocês vão para o aplicativo, acho que muita gente que provavelmente abaixou um aplicativo lá, principalmente lá dos produtos do Android, do iOS, que era só um fico de notícias. A gente diz que o aplicativo fosse um como exemplo, porque, por exemplo, é um aplicativo no site. E essa possibilidade do web app é essa que é considerada de um aplicativo, né? Que ele tem a interação do aplicativo. É que você pode fazer participação de PUSH dele, você pode fazer utilizar as ferramentas do sistema operacional ativo. Então, por exemplo, você pode usar o acelerômetro do Android, você pode usar o genoscope, você pode usar localização, GPS, tudo isso para criar interações para o seu usuário. Aqui, no final, tem um site que tem um pedagólico com blocs, que é um site que tem vários exemplos de pedagólico. E, por exemplo, teve um caso para a Maradona do Rio de Janeiro, que eu acho que era o... acho que era a minha taxa ou algo assim, e eles fizeram um PWA de corrida, tipo estraba, você podia fazer a sua corrida, só que eles faziam o simulômetro que eu estivesse correndo a Maradona do Rio de Janeiro, de acordo com o percudo que você tem que corria. Agora, você está passando por tal ponto de lixo, é uma aplicação ativante que você pode cheirar ao desenvolvimento do usuário. Então, como é a estrutura do pedagólico? Por que ele é tão diferente? Por que ele não é simplesmente um site? Por que ele não é simplesmente um partilho? O pedagólico tem três componentes principais. O primeiro é o app Shell. Vai causar o pedagólico o curso do PWA. O seu usuário vai necessitar para a primeira vez o site, seja um de vocês com um logo, ou um de vocês com um logo, não faz experiência. Poderia necessitar para a primeira vez e ele vai baixar o app Shell, que é a caixa do app Shell. São aquelas coisas que nunca mudam. Vamos dar um exemplo aqui no Facebook, por exemplo, o pedagólico do Facebook ele baixar, aquele em um menu superior, e aquela tela no meio cinza dizendo que tem uma conexão. A parte do momento que isso, que é salvo no navegador, ele não precisa mais baixar isso novamente. E aí ele parte para a segunda parte, que é carregar dentro do app Shell muito ludo. Então o pedagólico tem um app Shell, que é um... que é simplesmente um quadro do HTML, lá que é a base, HTML e CSS. E aí o mais simples, tem um app com o Zs, mas você pode chamar o que você quiser. Esfrablas com o JTS, que é um de app mais padrão. Esse app com o JTS vai ser o arquivo que vai carregar todo o conteúdo dentro do app Shell. Então aqui no app Shell, além do trabalho superior do Facebook, por exemplo, eu baixaria ali aquela... aquele quadradinho do Facebook com os ícones para você ficar tipo partilhar, a caixa de comentário, e isso fica salvo em caixa para você poder depois carregar como é necessário. O outro estrutura é o Salesforce. O Salesforce é um outro script, já um script que você carrega a ele, no app Shell, e você fala... você carrega o Salesforce dentro do navegador. O que é o Salesforce? O Salesforce é o que ele faz tudo isso, falando do granular. Ele tem a interação do usuário com um sistema operacional, utilizando notificações de post, por exemplo, ele faz caixa no navegador e ele fica rodando por background do navegador. Porém, o Safari, hoje em dia, ele está para o... está para o PWA, porque o Internet do Salesforce tem muito tempo que o JTS. Porque eles não inventaram até porque não passaram tanto tempo de soltar o navegador. Será que a Apple vai adotar? Será que não vai adotar o Salesforce? Aí eles analisaram que agora as continuações vão desenvolver o Salesforce com o Safari também. Então você não consegue fazer muitas coisas que você consegue fazer no Android, já, no Chrome, no Mozilla. Você não consegue fazer no iOS. Ele fica rodando no navegador e ele tem que ser carregado em HTTPS. Você não pode carregá-lo sem SSL. Porque ele vai funcionar com um proxy entre o seu web shell e aquele app com o JTS e o editor. Todas as chamadas que o web shell quiser para o seu editor, para carregar com tudo, vai passar todo o Salesforce. E aí o Salesforce vai decidir eu preciso chamar o do servidor para carregar ou eu posso carregar porque eu tenho que já salvo de caixa. E aí em duas formas você pode fazer esse caixa, você pode fazer o caixa primeiro o servidor, depois caixa, que é o seguinte, primeiro o Salesforce que vai perguntar para o servidor se tem alguma coisa nova lá e depois ele vai pegar o caixa ou você pode fazer um contrato, você pode pegar primeiro, entregar o caixa e depois verificar no servidor. Isso vai variar já com o caixa do aplicativo. Então você tem que implementar em cada projeto se você quer entregá-lo ao caixa ou se você quer ver primeiro no servidor depois entregar o caixa. E por último, o manifesto com JSON. Ou esse manifesto com JSON você pode implementar em qualquer site hoje dia. A gente que nos navegou ele já tem que ter uma utilização do isso para você carregar as animações como por exemplo, os ícones do seu site, o FAPi como o Iconic que vai parecer como processal a cor da barra de ferramentas que você quer que apareça então você vai precisar usar todos e ter que ter no PWA. E enquanto a gente tem que falar no PWA de novo de breve, isso vai funcionar. Existem duas implementações que eu já testei e isso vai variar muito de acordo com a vontade da equipe de movimento e como você vai implementar isso. Porque todas as duas funcionam muito bem. Você pode ter que levantar um tema no modo então você se você já tiver um tema pronto ou se você vai construir um tema você pode utilizar a versão modo do tema você pode utilizar uma instalação totalmente separada para você colocar um outro servidor qualquer e você pode voar da área tela para o servidor do promo para que a gente está. E aí você vai fazer uma chamada do REST FAPi e eu utilizando essa REST FAPi para fazer um dos ícones específicos porque você pode trabalhar com os ícones de padrão ou você pode ter um dos ícones específicos para já ter um conteúdo que você precisa se quiser fazer mais de uma chamada. Eu particularmente eu gosto muito da instalação separada porque a instalação separada porque a gente consegue contar a instalação separada com um cache bem específico a gente utiliza um domain mobile somente por exemplo, o site louside.com a gente utiliza o n.louside.com e a gente utiliza tudo separado tudo separado e fica muito mais prático para fazer o cache e trabalhar a rotatividade do conteúdo dentro do cache. Se você colocar uma instalação separada dentro do n.louside.com um cache bem progressivo você consegue ter um resultado de pregar um site a maioria das vezes menos de um segundo e a gente consegue pegar essa métrica e ter bastante resultado com isso. No tema mobile fica mais prático para quem está fazendo o tema do zero mas se você já tiver um tema para um outro ou se você estiver implementado no site louside.com bota um pudim adentro para criar os diferentes fontes e pode aplicar a instalação separada A instalação separada também é boa para quem quer trabalhar com outro tipo de framework não me bado porque a gente não ajuda para esse tipo de framework porque é a mesma coisa que você fala que você faz um framework que vai começar a atacar quebra e misto artilhege mas enfim você pode usar um pudim como usava no local usar re-art para criar o pwa você pode usar não vai ter problema nenhum de integração por que parece que você vai pegar por resta Bom, por acidade com o pwa por que não você fala quem já precisou de gente que chegou para você com a senhora mas agora eu quero um aplicativo tem que haver de Java tem que haver de Swift tem que correr atrás de um desenvolvimento quem já passou por isso? eu passei por isso 5 anos atrás e aí eu fiz uma gambiarra monstre para conseguir fazer o aplicativo eu já vou fazer um pouquinho da gambiarra para você eu criei uma web view dentro do aplicativo que fazia a auditicação no onepress e eu ouvi a ideia do usuário do aplicativo fazer umas curiosidades depois de melhorando começou a trabalhar com a resta de AI e hoje em dia a gente nem precisa fazer nada porque não precisa nem criar um aplicativo ou porque você pode criar um aplicativo porque você precisa mesmo de um aplicativo que é um cliente por vezes vai virar com você e falar isso não é um aplicativo porque eu quero mandar para a notificação do cliente um pedadual porque se você pegar o seu aplicativo ele lá o aplicativo dedica tempo, dedica dinheiro implementa o aplicativo faz o usuário baixar e aí ele quer baixar o cliente brush e fala lá, você não tem espaço para ser transpositivo o pedadual que você vai deditar é o seu o pedadual no Android hoje o próprio Android o próprio Chrome depois o usuário várias vezes ele já indica para o usuário colocar uma tag na tela principal acho que o Google Maps aqui a gente tem uma contribuição alguém que faz contribuição do Google Maps já recebeu a adicional no Google Maps na sua televisão se você acessar isso no celular ele fala e aí já é um pedadual ele não vai aparecer a água do Chrome ele vai aparecer com um aplicativo mesmo e o usuário não precisa instalar então quando tiver que desinstalar uma coisa ele vai desinstalar um aplicativo no outro ele não vai desinstalar o seu aplicativo então é uma possibilidade para você ter hoje de entregar com o seu cliente exatamente o que ele já tem e agregar o valor aqui você necessariamente tem que criar um aplicativo novo as novas o cliente precisa de rastrear e criar um aplicativo e rastrei a posição dele tudo bem, para ter a verdade pode fazer isso vai ser um pouco mais complexo porque esse cliente vai acessar a tela principal mas você consegue fazer isso para ter a verdade você consegue quem é que tem mais de 20 anos de idade e joga o file ou consegue vender então vou ver se consegue vender é o par de poucos jogos de tiro em grande pessoa ou seja, em 7754 não quero falar da aula de filmagem da escola o Office 3D tem uns malucos que estimaram ele em um JavaScript você consegue jogar com um JavaScript CSS o Office 3D hoje em dia e a gente fez em cadeira, botou um pedaço A como esse Office 3D então a gente tinha um Office 3D um aplicativo de jogo dentro do celular então é uma possibilidade de definir um JavaScript para conseguir a distância da sua possibilidade mas elas são muito grandes e é necessário que o pedaço A você sempre bota uma novidade então tem um aplicativo de Gmail você pode lançar seu Gmail e ler seu Gmail no pedaço A tem de pretos a um tempo tem jogo, tem os equipadores que vocês fizeram também são várias possibilidades que você tem com o pedaço A bom, é isso eu zoei bem a a festa essa sempre tem corrido mas eu vou estar lá agora no espaço fraco e será que você vai fazer um evento de representação específica eu quero fazer isso, dá para fazer eu já giro uma resposta dá para fazer como a gente vai mamar, dá para fazer eles são o Slack no Office 3D Brasil o Slack é internacional é dedicado a BFG, BFU e essa aqui é o meu e-mail qualquer dúvida que vocês quiserem mandar lá pode mandar no Slack eu demoro porque para responder mas respondo, tá? no e-mail eu não respondo 3, 4 demoro muito, não mesmo que bem obrigado pessoal