Transforme seu site em Aplicativo! Como criar sua PWA e TWA?

[@luizpedro-programador]

Top! não sabia que se chamava PWA, fiz um sistema em flutter web e ele faz isso ai de instalar sozinho, mas nem sabia que era essa tecnologia, vlw!

[@estudantepontodev]

Obrigado :)

[@gab0nezio]

Obrigado por mostrar passo a passo de como cria uma PWA do zero de um geito facil!, acredito muito que muitas e muitas empresas e startups novas relacionadas a Web 3.0 irão utilizar PWA, é evidente que isso ocorrerá, a utilização da outra nova tecnologia "WGPU" tanto para jogos como para comécios mais sofisticados tbm utilizarão!

[@estudantepontodev]

Que ótimo que gostou, eu também acredito muito que startups podem usar essa tecnologia para ajudá-las

[@vladimirmelo8188]

Parabéns, excelente aula! Só uma dúvida, porque a opção "instalar app" não aparece nos navegadores Safari ou Firefox? Tem como resolver isso?

[@estudantepontodev]

Não sei te responder isso, mas provavelmente, deve ser configurações um pouco diferentes para fazer funcionar neles, ou até mesmo poça ser que eles não tenham a funcionalidade de reconhecer um site com PWA.

[@NaturezaHarmonia]

Não conhecia, muito top

[@Miojjin]

Valeu amigo, você é um amigo

[@portfolioz2023]

Oi! Seria interessante fazer um novo vídeo sobre a nova versão do SAP AppGyver, mostrando a integração com o Firebase para aplicações Web da maneira mais simples possível. De uns tempos para cá, o Google Play está mais exigente - e o iOS, nem se fala. A tendência pode ser o uso de apps na versão Web! Um vídeo assim seria muito útil!

[@profedsondecarvalho]

Parabéns, excelente tutorial. Curti e seguindo!

[@estudantepontodev]

Muito obrigado 😁

[@luizmiranda4881]

O arquivo offline é uma cópia do index? É Preciso fazer mais de um arquivo offline pra cada arquivo? isso, caso eu tenha mais de um além do index ?

[@estudantepontodev]

Não apenas 1 arquivo offline por PWA

[@AlexandrePereira-wo5zd]

Cara, parabéns o vídeo mais completo sobre o tema na internet!

[@estudantepontodev]

Muito obrigado, Espero ter ajudado você 😊

[@lucassiqueira8281]

Obrigado por compartilhar todo esse conhecimento, estava precisando muito desse conteúdo, valeu.

[@estudantepontodev]

Que bom que conseguiu aproveitar bem :) Se gostar de se aprofundar no assunto, de uma conferida em meu Curso.

[@rodriggobarra]

Vlw pelo vídeo. Outros sites que criam pwa são pagos. Este pwa builder é 100% gratuito ou tem alguma restrição que tem que assinar um plano pago e sem anúncios, etc? Não encontrei nada de planos no site deles, então quero confirmar mesmo. Vlw.

[@estudantepontodev]

Esse site é grátis 100% criado pela Microsoft para difundir ainda mais a tecnologia da PWA e TWA!

[@Jogabilizado]

Olá, eu fiz meu aplicativo pelo glideapp e utilizei o pwabuilder pra conseguir o .abb, infelizmente a barra de besquisa continua aparecendo. como utilizo o glideapp, é possivel algum outro tipo de configuração para sumir?

[@estudantepontodev]

Se não tiver permissão de gerenciar os arquivos hospedados no seu site então não é possível remover a barra, teria que fazer seu app/site de outra maneira!

[@fadao9026]

Obrigado pelo tutorial, muito bom.

[@estudantepontodev]

Disponha :)

[@moxinnovations]

Hola genial tu vídeo pero tengo un problema que no se cómo solucionar... Cómo elimino la barra del navegador en mi APK ? Me compila pero me muestra la barra

[@estudantepontodev]

Eu falo sobre isso nesse momento do vídeo 17:18

[@engroga]

Excelente vídeo.

[@estudantepontodev]

Obrigado 😃

[@MarkimMarques]

Parabéns, ótima aula! Como faço para aparecer um popup dizendo para a pessoa instalar o app com um botão de instalar? mas que apareça apenas para quem não tem instalado

[@estudantepontodev]

Muito obrigado, no meu curso eu apresento formas de fazer isso, vale a pena da uma conferida ;)

[@evandroferreiraoficial]

Quero comprar seu curso, esse aplicativo da pra ser loja virtual? Eu já tenho o site, quero agora o aplicativo.

[@estudantepontodev]

Você tem a possibilidade de converter seu site de loja virtual em aplicativo sim, segue o link do curso: curto.dev/z29o93eK

[@seguraltafranquias]

Cara muito obrigado, parabéns pelo tutorial.

[@danilolima1962]

mano, você conseguiu remover a barra de endereço da TWA antes de publicar na Google Play?

[@estudantepontodev]

obrigado

[@rodrigor.galvao4313]

Tenho uma dúvida, esse arquivo offline veio de onde?, porque no site tem meus index.html, no caso eu preciso mudar o nome do meu index principal para offiline???

[@estudantepontodev]

o offiline precisa ser criado, para ter uma página que irá aparecer quando a pessoa tiver sem internet, eu mostro melhor no curso como criar a pagina offline

[@kleberaugus]

Eu reparei que na hora de colocar o código que retira a barra do navegador você fez isso DEPOIS de já ter gerado a apk no pwabuilder, para um app offline como eu colocaria isso se a apk foi gerada antes? Não entendi.

[@estudantepontodev]

Isso por que esse arquivo ele não vai ser compilado dentro do APK ele apenas deve ficar disponível no seu site, para que o APK acesse a url e cheque as informações dentro desse arquivo para confirmar que o APK que você gerou é do mesmo dono do site, então se seu arquivo estiver disponível na URL algo como [ SEU_DOMINIO].com/.well-known/assetlinks.json então provavelmente irá funcionar e a barra do navegador será removida do APK.

[@kleberaugus]

@@estudantepontodev Então a barra só é retirada se estiver online?

[@estudantepontodev]

@@kleberaugus Sim, no primeiro momento para qualquer PWA e TWA funcionar, precisa ter internet pelo menos na primeira vez que o usuário baixar o seu app e abrir pela primeira vez isso por que o ServiceWorks.js que faz o seu site poder ser acesso Offline vai precisar de internet ao menos uma vez para executar e baixar as páginas e arquivos que você pretende deixar disponível em modo offline, eu explico bem melhor isso no meu curso da uma conferida lá ;) curto.dev/z29o93eK

[@marcoskleinubing8144]

Parabéns! Muito bom

[@estudantepontodev]

Muito obrigada 😊

[@MarceloAugustoMonteiro]

É possível adicionar também na Apple Store?

[@gabrielanjosbottino5116]

Bom vídeo, mas eu tive um problema pra crirar o manifesto. Eu criei as imagens de icone normalmente como no tutorial, porém quando faço a análise do manifesto diz que elas não existem. Será que é algum problema no local que eu estou armazenando as imagens?

[@kidlandia3468]

seu site esta funcionando normalmente, isso só funciona se o site estiver no ar já

[@The_Showza]

Video muito top mano! Me tira uma dúvida, se eu fizer alterações no site vai refletir direto no aplicativo sem ter que fazer mais alterações?

[@estudantepontodev]

Sim, o aplicativo é o site, mas eu recomendo que faça novos build subindo o numero da versão pois a Google Play Store só vai constar que você fez uma atualizando quando subir um novo apk e s então fizer isso você não vai rankear tanto seu app, mas não precisa fazer isso sempre tambem.

[@1996rogerio]

Boa noite amigo, consigo fazer isso em um site na Shopify ?

[@estudantepontodev]

Consegue sim

[@germanoalves727]

Parabens pelo video! Fui tentar submeter um site em reactjs e não apareceu nenhum screenshots. Pq?

[@estudantepontodev]

Obrigado, as vezes pode ser um problema de lentidão no carregamento do Javascript no site, como alternativa você pode tirar prints do site normalmente pelo celular mesmo e colocar diretamente no manifest.json

[@curicash]

Gostaria de contratar os serviços. Qual seria a media de valores para transformar meu site nesses app web e app?

[@estudantepontodev]

Oi Curi Cash, tudo bem? Nós somos uma escola de programação, mas indicamos uma consultoria chamada PlanetsWEB, você inclusive pode encontrá-la pelo site www.planetsweb.com.br e pelo email [e-mail], por lá eles conseguem passar o seu orçamento =)

[@gustavorocha9079]

Como faz pra tirar a barra de cima do app

[@rs-almeida7823]

e se for um projeto django

[@messijurere189]

Olá amigo. Vc sabe dizer se tem algum custo para transformar em PWA?

[@estudantepontodev]

não é de graça, mostro com mais detalhes no meu curso, vale a pena conferir

[@MonjaDriver]

Muito top esse conteúdo! Parabéns! Uma dúvida! Esse processo serve para qualquer site, inclusive php com bancos de dados mysql? Desde já obrigado!

[@estudantepontodev]

Sim esse processo server para qualquer site

[@AdamoBS]

@@estudantepontodev Humm. Então é como se ele encapsulasse um navegador web com o link para o seu site é isso? Meu site tem usuário e senha, nesse caso vai funcionar também, se entendi corretamente.

[@hiqueaqui]

@@AdamoBS e isso ai mesmo

[@mikaelmendes340]

Eu criei um sistema simples que não tem back-end apenas para fazer cálculos. Gostaria de saber se é possível usar pwa nele e se pode ser em um arquivo que esteja salvo no dispositivo mesmo em vez de estar hospedado? Se precisar hospedar, posso hospedar na função do Github? Já que não tem back-end

[@estudantepontodev]

Precisa estar publicado na WEB hospedado, não importa onde esteja hospedado apenas precisa ter uma URL acessível de qualquer lugar e dispositivo. E para funcionar a PWA apenas o Front-End já serve pois ela usa justamente o front.

[@samuelxsilva]

Tambem funciona para site criado em WordPress?

[@estudantepontodev]

Funciona sim, inclusive existe alguns plugins que ha fazem a parte do PWA

[@clipsets2]

Eu consigo rodar ads da admob dentro desse esquema ai?

[@estudantepontodev]

Acredito que ADS Web sim, o Admob acho que não pois foi feito para APPs Andoid feitos em Java mesmo.

[@algumacoisaanimacao7903]

Irmão, pra mim o popup do celular não aparece, sabe o motivo? (Estou fazendo pelo wordpress plugin SuperPWA)

[@eduardopalma5056]

Qual pop-up não aparece? De instalação ou notificação?

[@diegoguimaraes9235]

obrigado Castanhari

[@estudantepontodev]

De nada, Diego! 😄

[@woodswolf7717]

cara adorei o conteúdo mas eu sou iniciante na programação como que abro essa pasta pra jogar meu arquivo manifest tem algum vídeo que me ajude nisso vlw

[@estudantepontodev]

Recomendo então que você de uma conferida no nosso site ou aqui no canal do KZbin, temos cursos sobre VsCode e HTML & CSS tudo de nível iniciante que podem te ajudar melhor sobre o básico de programação, depois volte a assistir esse vídeo que com toda certeza irá conseguir acompanhar melhor.

[@woodswolf7717]

@@estudantepontodev vlw de vdd

[@GondonJoiasLimeira]

Obrigado!!

[@estudantepontodev]

Disponha!

[@michelfilipypaiva5030]

da pra fazer isso com site construido com elementor?

[@estudantepontodev]

Da, sim, mas você vai precisar de um plugin de PWA para o Wordpress, entra na comunidade da Estudante.dev que consigo te explicar melhor.

[@eduardo-miranda]

muito bom o video, no entanto pra mim aparece um no código onde aparece "importScripts", saberia me dizer por que?

[@estudantepontodev]

Obrigado, não sei exatamente Eduardo mais caso esteja tendo problema e não conseguindo avançar com o assunto considere virar um aluno meu de aulas particulares que por lá eu irei conseguir te ajudar mais de perto com os problemas: curto.dev/rubens-flinco-aulas-particular

[@danielandrade5142]

muito bom, alguém pode me tirar uma duvida, fiz igual ele explicou mais meu PWA tem link de site externo e quando clica nele aparece a barra de navegador dentro da PWA

[@estudantepontodev]

isso é normal Daniel a barra do navegador só não vai aparecer se o site realmente for seu e se ele tiver hospedado o arquivo .json que menciono no vídeo

[@rodriggobarra]

Uma dúvida, o meu site tem alguns links de menu que quando clicam neles, abre outro site, com outra url (eles juntos fazem parte da minha plataforma). Neste caso no pwa, quando a pessoa clicar neste menu que vai pra outra url, este "novo site" abre normal no mesmo aplicativo ou dá problema. Só o site principal que abre normal. Vlw

[@estudantepontodev]

O comportamento normal é ele abrir sim porem se o domínio for diferente irá aparecer a barra do navegador pois ele entende que não pertence ao mesmo app

[@gregonocode]

Em WordPress não dar de fazer ?

[@estudantepontodev]

Da pra fazer sim, geralmente no WordPress você vai precisar de um plugin de PWA e depois que tiver o plugin vai conseguir gerar o TWA

[@marcioalexsandro4316]

Porque o meu apareceu essa mensagem? Missing Name Your manifest description is missing.

[@estudantepontodev]

Você precisa preencher o campo "description" o campo de descrição da PWA no manifest.json

[@VivaVidaCanal]

Tô procurando alguém pra fazer isso na minha página, se tiver interesse responde aí

[@estudantepontodev]

A empresa PlanetsWEB faz esse tipo de serviço, recomendamos ela segue email: [e-mail]

[@personalpic]

saudações, mas se o site for PHP?

[@estudantepontodev]

da pra fazer tambem, o importe é ter HTML e JS

[@jonathanchristian12]

Fala irmao blz ? , gerei o Apk pelo buider e ficou bonitinho sem a barra do navegador em cima , mas na hora que subi pro play store , esta mostrando a barra , se baixo o apk para teste fica ok , mas se baixo pelo play store , dá ruim , sabe resolver ?

[@estudantepontodev]

Boa tarde, Jonanthan é provavel que o seu assetlinks.json esteja apontando o sha256_cert_fingerprints direto no que foram gerados do apk mais não os que foram gerados pela PlayStore você pode testar o seu isso usando essa ferramenta curto.dev/4RTCJnNV Como é um assunto complexo não consigo abordar todo ele por aqui mais se não conseguir avançar considere se torna um aluno meu de aulas particulares onde consigo te ajudar ao vivo: curto.dev/rubens-flinco-aulas-particular

[@gemeospodcastclipadas]

Como assim projeto? eu preciso ter o projeto do site?

[@estudantepontodev]

Você precisa ja ter o site pronto, e acesso ao código dele isso é o projeto. Se não sabe muito bem como começar criando um Projeto, da uma olhada no Curso Decolando na PWA com React que lá você aprende a criar um projeto suber legal com React e transformar depois ele em PWA.

[@vinicio724]

Oq é twa e qual diferença com pwa?

[@estudantepontodev]

TWA é o que faz gerar o .apk o arquivo que é do aplicativo android e a PWA é o conceito de ter um site que permite ser adicionado como atalho parecendo ser um app. E para o TWA funcionar o seu site já precisa ter PWA então um não substitui o outros.

[@vinicio724]

@@estudantepontodev ata vlw

[@RodrigoAlmeida-ii5ht]

11:52 po esse botão não habilita nem a pau!!! alguém ta com esse problema?

[@estudantepontodev]

Entra na nossa comunidade no Discord que eu consigo te ajudar melhor me explica direitinho o que está acontecendo, é só acessar nosso site e ir na aba de Comunidade para entrar.

[@welling666]

Alguém já tentou usar na página feita pelo app script?

[@cezarfernando400]

não funcionou pra mim

[@EDUCADORUPGRADE]

Então o Google Sites não serve 😢

[@estudantepontodev]

Infelizmente não :/ mas da pra fazer com WordPress

[@Flora-ng8gt]

PWA BUILDER

[@Flora-ng8gt]

Aulão.❤

[@estudantepontodev]

@@Flora-ng8gt Obrigado 😁

[@fudidoemalpago4425]

Muito bom. Obrigado.

[@leadersatgps]

FUNCOINA COM APP DELIVERIE

[@estudantepontodev]

sim, funciona para qualquer site

[@leadersatgps]

Pra cidadão não brasileiro Visa /PayPal é aceite pra modo do pagamento? Porém eu já tentei sem sucesso!