Transformando seu site WordPress em uma PWA

[@lucasvalanif]

O KZbin me indicou um vídeo seu, e logo passei a te seguir. Parabéns pelos conteúdos muitoooo bons

[@FellyphCintra]

Valeu cara, tento postar vídeo toda semana.

[@valleconexoes]

comenta os demais sim pfv. Excelente conteúdo. Obrigado!

[@FellyphCintra]

Conheci o criador do super PWA, estou tentando trazer ele aqui no canal.

[@valleconexoes]

@@FellyphCintra excelente!

[@gmundiagenciadigital2573]

Sobre o cache gravado pelo PWA, é póssível para o usuário acessar os códigos-fonte do cache?

[@FellyphCintra]

Como uma aplicação web é possível inspecionar o código html que é enviado para o usuário

[@tvpersonalizada]

Amigo, parabéns pelo conteúdo.. é o seguinte... estou criando meu site wordpress com área de membro e quero transformar ele em app e publicar nas lojas da playstore e apple, vc teria uma aula ensinando um passo a passo didático do zero a conclusão de tudo? (Estou assitindo em abril de 2024).

[@FellyphCintra]

Olá, infelizmente não tenho uma aula dedicada, mas sobre a publicação em lojas de aplicativo tem esse guia web.dev/articles/pwas-in-app-stores

[@will.oliveira]

Olá, pode me ajudar gostaria de saber se é possível criar um webapp exclusivo para cada página (páginas específicas do site)

[@FellyphCintra]

saiu um vídeo do chrome a um tempo falando de PWA multi origin, não sei se isso ajuda: kzbin.info/www/bejne/kIvXf3RnfL9ssLM

[@pdro-0liveira]

Obrigado pelo conteúdo, Fellyph, fiz o passo a passo, mas o plugin não criou um manifesto automaticamente, como proceder?

[@FellyphCintra]

Você olhou na ferramenta de inspeção do chrome ? E limpou o cache do seu site ?

[@celioazevedo1865]

No seu curso de PWA é possível aplicar no site do Wordpress sem plugin?

[@FellyphCintra]

Eu fiz muito a aplicação de PWA de forma manual, mas a playlist em particular utiliza um plugin que faz alterações minimas no seu projeto, agilizando o trabalho. Além disso na documentação tem uma série de hooks que vc pode modificar as estratégias.

[@thaigonaguiar7653]

Muito bom o conteúdo. Nem sabia q existia essas possibilidades.

[@FellyphCintra]

Alguns desses plugins já estão disponíveis desde 2018, mas estão mais completos

[@evoluwill42]

bem explicado vlw

[@FellyphCintra]

Muito obrigado pela audiência !

[@carlosvladimir2662]

Boa noite, seu conteúdo é bom. O problema é que a pegada não é própria para quem é novato ou iniciante. Muitos termos técnicos. Mas valeu

[@FellyphCintra]

Olá Carlos, fico feliz com o feedback. Tenho uma playlist com conteúdo para iniciantes. Mas quando retornar a postar conteúdo tenho algumas aulas para iniciantes.

[@messijurere189]

Feliph, ele permite localizar o usuário pelo GPS mesmo que o mesmo tenha saído do app? Tipo o do Uber,

[@FellyphCintra]

Teve uma proposta para rodar o GPS em background com o service worker, mas isso não foi aprovado por questões de segurança github.com/w3c/ServiceWorker/issues/745 . Nesse caso o GPS só irá rodar quando a aplicação estiver aberta.

[@messijurere189]

@@FellyphCintra Vlw, familia. Sucessos!

[@jardineironet]

Fellyph, excelente conteúdo! Minha dúvida é a seguinte... muitos usuários do meu blog pedem que eu disponibilizar o conteúdo offline. Eu quebrei a cabeça muito tempo para transformar o conteúdo em pdf, e não achei uma boa solução. O PWA poderia ser uma solução? Eu poderia disponibilizar via api de cache somente uma categoria do site? Ou um custom post type? O PWA suporta custom fields?

[@FellyphCintra]

Olá Jardineiro, questão de disponibilizar conteúdo offline com PWA, os conteúdo vai ficar disponível no cache do usuário pelas páginas que o usuário navegou anteriormente, ou que você definiu em seu código. Ter seu conteúdo em PDF ou em PWA são duas estratégias diferentes vai depender do que seus usuários precisam, eles querem um catálogo para acessar localmente ou eles querem instalar uma PWA e ter um acesso direto a sua aplicação? Se a resposta for a segunda opção, você poderia definir para quando o usuário visitassem a home do seu site, eles iriam armazenar a página de categorias do seu site. PWA roda no front de sua aplicação, ou seja ele não se preocupa se é uma custom fields ou custom post type. Ele irá armazenar os rotas que foram passadas para o seu Service Worker.

[@paulo_sergio0o]

O meu fala que eu não tenho o apontamento do icon mascarável no manisfest é o unico erro. Como resolvo, ja tente pelo admin em personalizar, mais não deu certo.

[@FellyphCintra]

Olá Paulo, tem um ticket aberto no github para esse item até o momento a solução é adicionar um filtro no functions.php para corrigir esse problema: github.com/GoogleChromeLabs/pwa-wp/issues/304

[@lucasamorim7576]

Muito bom conteúdo, parabens! Uma dúvida. Qual o critério para aparece a mensagem para instalar a PWA? Existe a possibilidade de exibir a mensagem para instalar a PWA sempre que eu quiser?

[@FellyphCintra]

Olá Lucas, no caso de uma página html normal os quesitos básicos: HTTPS, web app manifest e service worker. No caso do plugin de PWA vc precisa HTTPS e configurar as informações necessárias no WP e Service Worker o plugin vai tomar conta. Sobre controlar a mensagem de instalação com JavaScript é possível eu posso verificar como customizar essa mensagem com o plugin de PWA.

[@elifasvieira20]

Quando atualizamos o ícone do APP no plugin, ele não é atualizado nos celulares que já instalaram... existe alguma forma de fazer esta atualização?

[@FellyphCintra]

Deve ter um tempo para atualização do ícone pode sistema operacional. A versão do service worker Tb ajuda a forçar a atualização. Eu posso tb verificar com o time do plugin como o plugin trata essa situação.

[@elifasvieira20]

@@FellyphCintra obrigado, traz pra a gente se descobrir. Ganhou um seguidor

[@FellyphCintra]

Weston falou que o plugin confere o service worker a cada 24h aí vai depender do browser atualizar o ícone, ele falou pra evitar cache é bom subir o ícone com um nome diferente

[@ricardormarcos]

Vc disse que teria acesso a recursos nativos com o PWA, poderia explicar como conseguir isso ?

[@FellyphCintra]

Olá Ricardo, quando eu falo de acesso a recursos nativos eu estou me referindo a câmera, geolocalização, acesso ao sistema de arquivos e lista de contatos. Esses items hoje temos uma série de APIs que permitem aplicações web acessar esses recursos onde antes isso só era possível com aplicações nativas, por exemplo, objective C ou SWIFT. Tenho uma playlist que mostra como programar em Javascript para ter acesso a essas APIs. Nesse vídeo particularmente eu mostro como transformar uma aplicação WordPress em uma PWA, mas nesse caso geralmente aplicações WordPress usam recursos específicos, acesso offline, background Sync e Push Notification.

[@MaykFilho]

qual a câmera vc grava seus vídeos?

[@FellyphCintra]

Lumix g7 com uma lente de 25mm

[@OPortaldeTolkien]

o ruim do PWA é que ele nao gera um apk...

[@FellyphCintra]

Sim tem algumas opções de gerar uma apk ou TWA de uma PWA: kzbin.info/www/bejne/h3vPk4CcjJidhsU e fireship.io/lessons/pwa-to-play-store/

[@OPortaldeTolkien]

@@FellyphCintra serio? eu ate gosto de pwa, mas com essa limitação ficara ruim de fazer...mas vou dar uma olhada nesse video...valeu

[@OPortaldeTolkien]

@@FellyphCintra eu deu uma olhada la no video, esta em ingles...nao da pra entender muita coisa...criar o pwa é facil...mas nao consegui entender plenamente o que ele fez no video pra tranformar um pwa em apk..tem uma explicação melhor ou outro video?

[@FellyphCintra]

Tem esse vídeo português kzbin.info/www/bejne/gIuoZ5Kkebusf9E

[@OPortaldeTolkien]

@@FellyphCintra valeu man

[@personalpic]

só achei ruim que não tem como editar o plugin

[@FellyphCintra]

Você consegue editar com o uso de hooks(programando) tem a lista de hooks na documentação.