Criando um PWA com React Native & Expo Web | Code/Drops #34

Подписаться 370 тыс.

Просмотров 81 тыс.

50% 1

PWA's são aplicações que podem ser instaladas no dispositivo do usuário simulando uma aplicação nativa apesar de por trás manter-se funcionando dentro de um browser. Apesar de estar no browser, podemos ter acesso a storage offline, push notifications, ícone, splash screen, etc...
Nesse vídeo mostro uma técnica de criar seu PWA a partir do aplicativo mobile escrito com React Native, ou seja, conseguimos produzir um aplicativo para iOS, Android e PWA ao mesmo tempo.
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 210

@leviarcanjo6309 4 года назад

O mais legal foi a cara do Diego quando a camera abriu de primeira kkkk

@rocketseat 4 года назад

Hahahahah 💜💜💜

@valterdebrito3990 4 года назад

É verdade. Voltei o vídeo 2x atrás para ver de novo.

@naothomachida9746 4 года назад

Eu ri litros nesse video com as caras kkkk

@naothomachida9746 4 года назад

Muito bom, ótimo conteúdo kkk

@braddoidao8818 4 года назад

PWA pra mim é a solução pra aplicações em que o público alvo vai ter preguiça e/ou desistir por algum outro motivo, pois ta sendo obrigado a baixar um app. Eu mesmo já desisti de alguns serviços pq quando eu encontrava ele no google, ele queria me jogar na play store kkkk PWA é um escape muito bom.

@rocketseat 4 года назад

Faaala, Brad! Valeeu por compartilhar sua opinião com a gente! 💜💜💜

@fellipecechinel4551 4 года назад

Por isso é legal a possibilidade de pensar ter recursos pra usuário de vários tipos. Eu já sou o contrário. Deixo de usar serviços por não ter app na play store kkkkk Não sou muito adepto do pwa pra uso pessoal

@braddoidao8818 4 года назад

@@jesusdEcristo aí está outro ponto. Talvez teu usuário não tenha espaço no telefone. Tu n pode obrigar ele a instalar algo. Tem que ter outras opções.

@atilalevy8793 4 года назад

25:51 igualzinho a figurinha do pernalonga kkkkk conteúdo top como sempre! Rocketseat nunca decepciona! edit: errei o frame do vídeo rsrs

@rocketseat 4 года назад

Hahahaha💜💜 Valeu, Atila! 💜

@adielcardoso8854 4 года назад

É disso que o Brasil gostaaaaa, I Love You RocketSeeat

@rocketseat 4 года назад

We love you too 💜💜 Valeeu, Adiel!

@LeonardoRuas 4 года назад

Excelente explicação e demonstração de pwa. Primeira vez que eu vejo alguém explicar esse assunto com segurança e sem encher um monte de linguiça.

@rocketseat 4 года назад

💜💜 Valeeeu pelo feedback, Leonardo! 💜

@ageurodriguesdeoliveira8953 4 месяца назад

Cara isso vai me ajudar muito depois de 3 anos :) hahah

@Maxnovais777 Год назад

gostei muitoooo desse cara❤😂😂😂 ele não deixa agente cansar a aula dele e faz agente rir 😅

@marciozebedeu783 4 года назад

passei pra dizer que estou a fazer uma maratona nos videos todos do canal. Um forte abraço!

@vulgoglzinn8509 2 года назад

I been through loads of video's about soft . but you are the best thanks for your video's.

@diego5g 4 года назад

Tava ansioso por essa logo nova desde que vi ela no dribbble do Cleiton Avi. Tá bonita demais, seh loko

@rocketseat 4 года назад

Ele é top né? 💜💜

@diego5g 4 года назад

@@rocketseat Demais, tô pirando na identidade visual nova que vcs tão construindo

@EduardoPinaCampinas 4 года назад

sensacional o video Diego!!!!! cada vez mais voce e a rocket crescendo e elevando o conhecimento de quem esta comecando com o desenvolvimento em react..... parabens a equipe!!!!!!

@rocketseat 4 года назад

Valeeu pelo feedback, Eduardo! 💜💜💜💜

@LucasGenari 4 года назад

Like antes de ver o vídeo pq né... 🤣🚀🚀🚀

@rafaeldiogodasilva2024 4 года назад

Otimo exemplo sobre pwa, vai muito alem dos blablabla que se vê por ai. Show muito fã de seus trabalhos.

@rocketseat 4 года назад

Valeeu pelo feedback, Rafael! 💜💜

@romualdo_ah 4 года назад

Minha cabeça explodiu... super massa!!

@losfagalas 4 года назад

Sensacional

@rodrigomoreas 4 года назад

Essa facilidade do diego é assustadora demais Oo.... Parabéns mesmo, vc é top diegao!!!

@rocketseat 4 года назад

Ele é muito top né? 💜💜💜

@sergioaraujo2748 4 года назад

Ótimo vídeo, depois que vi como pwa é construído vi que se a comunidade desse um pouquinho mais de atenção ele cresceria

@rocketseat 4 года назад

Faala, Sergio! 💜💜 Valeu por compartilhar sua opinião com a gente!

@AnibalGutierrezYoSoy Год назад

Men! que excelente video! Saludos desde Argentina!

@moisesdematosgil7860 4 года назад

Esse Diego é um monstro sagrado do JS.

@Ferrugemn1 4 года назад

Incrível

@king_dela719 2 года назад

Absolute G

@Js501sJ 4 года назад

eu fiz isso outro dia. Só que se você quiser transformar uma aplicação em um site MESMO tem que usar linking no react navigation pra fazer as rotas como o reactJS usando react-router-dom(tipo /main,/home,etc). Dai vc pode usar o back do navegador e não fica só na mesma url. Mt bom vídeo Abração.

@rocketseat 4 года назад

Valeeu por compartilhar sua experiência e essa dica com a gente, Thiago! 💜

@fabiopasti2473 4 года назад

Caramba, pensei hoje mesmo em pedir um conteúdo sobre pwa!!! Amanhã vou ver o vídeo com mais calma!!! Parabéns Rocket

@rocketseat 4 года назад

A gente é tão bom que atende o pedido antes mesmo de ele ter sido feito. 😍😍💜

@FelipeFontana 4 года назад

desculpa o palavrão, mas PQP, nem assisti o vídeo, só vi a entrada ficou animal!!!

@rocketseat 4 года назад

O editor arrasa, né? Fala sério! 💜💜💜

@FelipeFontana 4 года назад

Rocketseat demais demais mesmo!!!

@Oculterous 4 года назад

Adorei que vc falow de PWA no canal!

@rocketseat 4 года назад

Valeeu! 💜💜💜

@WiuverRibeiro 4 года назад

Diego digitando é uma coisa linda de se ver kkkk

@iagofreire9768 4 года назад

Ficou top a demonstração da funcionalidade.

@valerianolasco162 2 года назад

Really appreciate the video .I would like further demonstration on how to use actual tutorial in soft to make soft .

@heudersena 4 года назад

Já tava com saudades, em ver mais um vídeo da #Rocketseat

@TheKroow 4 года назад

Nem vi ainda mas sei q o conteúdo é top!! Bora estudar 🚀🚀🚀

@rocketseat 4 года назад

Valeeu pelo elogio, Diego! 💜💜

@danifreitas1662 2 года назад

know where to start a new soft and I didn't know how to switch from soft to . You are the best THANK YOU FOR NOT

@jonathanmenezes9504 4 года назад

Topzera abordar esse assunto tão interessante! Parabéns.

@lucasaugusto1131 4 года назад

Meu Deus Rocketseat 💜 Fantástico !!!

@rocketseat 4 года назад

Valeeu, Lucas! 💜💜💜

@matheussunderhus 4 года назад

Só conteúdo AAA. Vlw Diego, vlw Rocketseat!

@rocketseat 4 года назад

Valeeeu, Matheus! 💜💜💜

@danielvinicius4906 3 года назад

Top!

@morou3543 4 года назад

Um drops antes de dormir é good!

@rocketseat 4 года назад

antes de dormir, pra assistir enquanto come o almoço, na pausinha pro café... Code/Drops é bom à qualquer hora! 💜💜💜💜

@natands.8183 4 года назад

Estive esperando por esse momento 😍😍😍

@rocketseat 4 года назад

agora é só aproveitar então!!! 😍😍😍💜💜

@moacirmota340 4 года назад

Que abertura top mano!!! Parabéns pela vinheta de abertura!!! To vendo o dia q o nome vai ser RocketseatTV de tanta qualidade nos videos. 🚀

@rocketseat 4 года назад

Hahahha valeeeu pelo feedback, Moacir! 💜

@rodolfogama5164 6 месяцев назад

É possível converter um Web app feito com React.js para React Native?

@filipedossantos2179 4 года назад

Da hora. Valeu, guri! Ficou muito bom.

@danilovieira4442 4 года назад

A abertura ficou sensacional! Sobre a aula, implementei aqui e ainda fiz um botão de toggle entre as câmeras traseira e frontal no iOS e Android hahaha Ahh Diego, a tua tentativa de colar o link não funcionou porque você tinha que dar o long press com o mouse dentro do emulador ao invés de dar o Ctrl + C.

@rocketseat 4 года назад

Valeeeu, Danilo! Nosso querido Space Squader 💜💜

@8dmidias685 2 года назад

informative video good sir, Gracias

@alexalannunes 4 года назад

Show de bola. Muito massa. @Rocketseat . Só senti falta de tipo quando precisar fazer modificações no pwa e subir pra prod. Será q o cache vai ser re-armazenado . Substituir o antigo . Fora isso Parabéns. Sempre show

@MsDannis 4 года назад

Show de bola!!!

@jordandossantosoliveira9560 4 года назад

Conteúdo muito top, iniciei uma aplicação com React Native e possivelmente vou usar a questão de offline First. Acabei escolhendo o Realmdb por ter mais familiaridade. Mas os próximos vou de cabeça no Watermelon

@kakashisuzuki8068 2 года назад

Fico pensando na pessoa/equipe que pensou: - 'Hm ovo pega essa linguagem (JS) vou criar o front web'; Outro(s): - 'Se pode no front pode da no back.'; Outros(s): - Se pode no front e back, vai da pro mobile e ja vai pro android e ios.'; Outro(s): - Da pra usar no front, no back e mobile, então ovo criar uma forma de programar mobile e rodar na web' 🧙‍♂️

@mateuscunha7294 4 года назад

galera, fui criar o prejeto e deu o seguinte erro: ERROR: Node.js v13.13.0 is no longer supported. expo-cli supports following Node.js versions: * >=10.13.0 =12.13.0 =14.0.0

@VictorHugoMalheiro 4 года назад

Sua versão do node ta muito recente, baixa uma mais antiga, o próprio Diego fez o downgrade...

@FC.HAALAND Год назад

Olá, gostaria da sua ajuda. Estou criando um novo projeto no react native, entretanto não sei como faço pra deixar meu app com o mesmo tamanho em celulares com tamanho diferentes (ex: 6,0 plg - 6,4, plg - 6.5 plg) Você poderia me explicar o que eu devo fazer ?

@allyssonribeiro5599 4 года назад

Pela primeira vez na vida me peguei rindo em uma vídeo aula kkkkkkkk aula muito massa Diego

@rocketseat 4 года назад

Hhahaha aí sim! 💜

@linezinhu 4 года назад

Uma dúvida, a gente consegue hospedar o pwa na play store ou teria que gerar um apk pra públicar ou teria que copiar e colar o código em um projeto react-native e gerar o apk ?

@fulviocezarcanduccidias Год назад

Então pelo que eu entendi, pode ser utilizar esse em vez de Expo para Web como se fosse uma aplicação Mobile?

@luizhms_ 4 года назад

Eita Giovana

@rocketseat 4 года назад

😂💜

@fabolazao 4 года назад

Essa vinheta tá parecendo abertura do Ben 10 kkkk, muito bom

@rocketseat 4 года назад

😂😂💜

@hallanchristian3499 4 года назад

Top Diego!!!

@alienshikadai 4 года назад

Diego, em África - Angola, estão contratando por causa da Rocketseat.😅😅

@FabianoRamosInfo 4 года назад

De fato a Apple é um pé no saco mesmo. É muita frescurada por parte deles. Acho que o termo pé no saco foi até um elogio

@LuizGustavo-ph2pe 4 года назад

Questão de tempo amigo

@jorgealegretti4796 4 года назад

@@LuizGustavo-ph2pe do jeito que a apple é só vai funcionar PWA criado por mac hehehe

@stamina_gaming 4 года назад

$100 dol ano por dev, pense uahuahu

@roni_castro 4 года назад

Apple sempre cagou para seus desenvolvedores e comunidade, e nunca avança em coisas que podem fazer ela perder seu monopólio, vai se acostumando.

@FabianoRamosInfo 4 года назад

@@roni_castro Já passo raiva com a Apple desde o Ionic 3. São 3 anos de briga sempre quando vou colocar um app na loja. Sem contar o descaso do suporte

@matheuspimentel9666 4 года назад

Vídeo top demais!!!

@rocketseat 4 года назад

Valeeu, Matheus! 💜

@mouravocal 3 года назад

Pra mim vai ser necessário por enquanto, já qua não tenho mac, posso criar meu aplicativo usando expo/bare workflow e testar no Android e criar um PWA dele para quem usa iPhone, observando as funções nativas do aparelho.

@rocketseat 3 года назад

Depois conta pra gente como foi a experiência, Diego! 💜

@LuizGustavo-ph2pe 4 года назад

Falaaa DEV

@billbarsch 4 года назад

para offline first, qual banco de dados usar nesse caso de web + android + ios?

@felipesilva_flk 4 года назад

Nossa mano, que intro foda!!! Parabéns pelo vídeo. Só fiquei com a dúvida de como fazer isso sem ser utilizando o Expo...

@FernandoGarcia-tu3yu 4 года назад

muito bom é facil!, eu utilizo Angular

@josepaulojr7227 4 года назад

Faz tempo que estava aguentando essa dádiva.

@rocketseat 4 года назад

💜

@joaoamadeu3659 4 года назад

Eitaaaa, grande intro😍😍🐱‍🏍🐱‍🏍🐱‍🏍

@rocketseat 4 года назад

💜💜💜💜 F*@a, né? 💜

@FelipedaSilvaRosas 3 года назад

WatermelonDB funciona no Expo com react-native-web?

@ronnyacacio9944 4 года назад

Massaaaa!!! 💜

@rocketseat 4 года назад

Valeeeu, Ronny! 💜

@Jheisonmacielines 4 года назад

O code drops que eu esperava..

@rocketseat 4 года назад

Agora não precisa esperar mais! 💜😍

@joseveras2473 Год назад

Consigo extrair o URL do PWA e abrir como app no android?

@AlissonNunes 4 года назад

Cara, curti bastante o vídeo! Só achei que você acabou falando de muitas coisas, o vídeo ficou bem denso... Mas uma dúvida, como separar o PWA da versão de desktop? Digo em questão de como o usuário acessa e o servidor responde. Por que o usuário vai querer acessar da mesma forma, logo o servidor vai responder igual

@JeanMKowalski 4 года назад

Vídeo direto ao ponto, muito bom. Seria possível colocar isso dentro de um app electron?

@urielguy 4 года назад

Muito bom o vídeo, sempre trazendo um conteúdo excelente. Gostaria de saber quanto ao SEO, é possível utilizar tbm o next js?

@Oculterous 4 года назад

vc faz pwa com o nextjs muito fácil um exemplo: apod.pictu.one quanto a por o nextjs no expo de alguma forma parece que sim, vi algo sobe um dia desses

@r4tok1ller 4 года назад

Uma coisa curiosa é que, se você colocar o Toggle device toolbar depois de acessar o Instagram, não aparece igual o video. Acaba que ausência a opção de colocar status e se torna mais limitado. Agora se, logo de cara você ativar o Toggle device, o Instagram fica fiel ao app.

@LuizFerK 4 года назад

Salve, Diegão. Então, pensando em casos de uso do React Native Web, não seria uma alternativa interessante pensar em usar o PWA em todas as aplicações e hospedar esse PWA separadamente, pra que, quando a aplicação for acessada de um smartphone pelo navegador dele, ele use o PWA e não a aplicação Web em si (que está hospedada em outro local)? #PR

@rocketseat 4 года назад

Faala, Luiz Fernando! Valeeu pela sua pergunta! #PR #Diegorespondeaí

@dolfera1962 4 года назад

bamo bamo !!!

@apholo8308 4 года назад

Como eu poderia manipular as versões da minha aplicação de modo que, quando o usuário acessa se pelo dispositivo móvel na web, a versão que aparece seja a versão PWA, porém na web gostaria que fosse a versão web com React msm. Como seria esse controle?

@rocketseat 4 года назад

Faala, Apholo! Você pode tirar essa dúvida lá na nossa comunidade aberta! 💜 Segue o link: www.rocketseat.com.br/comunidade

@brunolombardi1512 4 года назад

Opa galera da Rocket beleza? Poderiam trazer um vídeo falando mais de PWAs, incluindo como funcionam service Workers, que inclusive já vem uma estrutura pronta para isso no React? O essencial de um PWA é ele funcionar offline, ser instalado no mobile, etc

@rocketseat 4 года назад

Fala Bruno! Valeeu pela sugestão! Vamos tentar trazer mais conteúdos sim, sobre esses temas também 💜

@bananadasilva2820 4 года назад

Caraca eu estou morrendo com esse vídeo kkkkkkk

@rocketseat 4 года назад

Mooorre não! 😂😂💜

@diegoalmeida8790 3 года назад

Pessoal!! Fiquei com uma dúvida! Após criar a PWA feita no React Native e publicar ela a partir da build web no expo, ao publicar ela, quando acessar pelo smartphone android ou iOS, automaticamente a aplicação vai reconhecer o meu SO e funcionar como se fosse a versão dele? Pq estou testando dessa forma antes de publicar e a versão que roda no meu celular continua sendo a versão web, sei disso pq alguns recursos que usei só funcionariam para mobile... não tem suporte para web. Estou testando na rede local pelo ip do computador com yarn web. Se testo pelo qr code funciona de boa.

@uesleisuptitz Год назад

Tbm to com esse problema

@uesleisuptitz Год назад

Você achou uma solução?

@reismatias 4 года назад

Qual é o nome desse site que eles usam para fazer essas listas? Com caixas de marcação, os emojis e tals.

@mateusbaoba 4 года назад

Olá pessoal! Blz? Alguém aí já teve algum problema com as permissões do expo? Quando eu rodo a aplicação no ambiente local do expo, funciona perfeitamente. No entanto, quando faço o build:web e faço o deploy, tenho a excessão: "_ExpoBarCodeScannerModule__WEBPACK_IMPORTED_MODULE_15__.default.requestPermissionsAsync is not a function"... tentei usar o módulo de câmera e tenho o mesmo erro... Se alguém tiver uma luz do que possa ser, fico grato. Até mais.

@uesleisuptitz Год назад

Acho que você deve pedir a permissão para utilizar a câmera

@CostelaFifa 4 года назад

Fala Diego!! Uma pergunta para o PR. Notei que algumas empresas tratam essa questão do PWA identificando o User Agent do dispositivo que faz a requisição e se for um dispositivo mobile, redirecionam para um sub domínio que retorna o conteúdo estático da versão mobile, como no caso do Twitter que você disse (mobile.twitter) e facebook (m.facebook). Porém ao acessar este domínio diretamente de um desktop não redirecionam para a aplicação desktop. O Twitter é responsivo completamente e inspecionando o código parece utilizar a mesma solução, já o facebook não. Como acha que deve ser tratada a responsividade em soluções em que utilizamos RNWeb?

@rocketseat 4 года назад

Valeeu pela sua pergunta, João! 💜 #PR #diegorespondeaí

@lucaslins7406 4 года назад

Preciso de um Mac para publicar na loja da Apple alguem sabe me dizer ?

@joaogracaneto309 4 года назад

Microsoft Edge no Mac? muito interessante, ta mais leve que o chrome?

@augustomarcelo 4 года назад

Alguém faça um meme desse Diego surpreso com a rapidez na instalação dos pacotes..

@lucasluizss 4 года назад

Daria pra instalar pelo chrome do desktop também.

@rocketseat 4 года назад

Valeeu pela dica! 💜

@allan.abq9 4 года назад

Diego usando ao mesmo tempo o programa de gravar tela, VSCode, o browser, dois emuladores mobile: "essa é a hora que meu Mac parece um helicóptero, começa a girar a ventoinha de todos os lugares" Paro pra ouvir e reparo que o meu computador tá girando a ventoinha para rodar o vídeo do RU-vid kkkkkkkk 😅😅😅

@rocketseat 4 года назад

😂😂😂💜

@higormatheusoliveira5914 4 года назад

#PR fala Diego com esta nova versão do expo posso utilizar a web como emulador pro androide o androide Studio vive travando no meu pc i7 8GB emular no celular é mas rápido gostaria de um emulador melhor

@rocketseat 4 года назад

Fala Higor! Valeeu pela sugestão para o #PR! 💜💜

@MateusHenrique-ne5el 4 года назад

13:00 MELHOR REAÇÃO KKKKKKKKKKKKKKKKKKKKKKKK

@nikolassantos5727 4 года назад

13:28 PRAMIM FOI ESSSA KKKK

@rocketseat 4 года назад

😂😂😂💜💜

@emanueldsc 4 года назад

Tudo é muito rápido usando Web. Mas quando a coisa vai pro celular ... Parece que os emuladores são movidos a jegues de potência.

@souzaramon9522 4 года назад

Muito bom Diego! Ja deu um,a olhada na lib react-query? Acho que seria uma boa mostrar no canal!

@rocketseat 4 года назад

Valeeu pela sugestão, Ramon! 💜💜

@LorhanSohaky 4 года назад

Muito bom, só acho que vale um outro vídeo só explicando como configurar o service worker do Expo. Já tentei modificá-lo para Network First, mas falhei miserávelmente 😭

@rocketseat 4 года назад

Valeeu pela sugestão, Lorhan! 💜💜💜

@augustomarcelo 4 года назад

Qual seria o intuito de, tendo um app mobile, eu criar um pwa? Não precisar ocupar espaço instalando o app nativo?

@uesleisuptitz Год назад

É, não precisar publicar na loja de imediato, já que isso as vezes pode demorar no caso da AppleStore