PWA atualmente

[tchaguitos]

Hey, pessoal, como vão?! Espero que estejam todos em paz!

Seguinte, sei que existem tópicos relacionados aos PWAs, mas gostaria de entender de vocês como andam as coisas atualmente, pois apesar de me parecer algo promissor, ainda me parece cedo pra investir em um PWA ao invés de app, por exemplo.

O que vocês pensam a esse respeito? Dependendo das necessidades, vale a pena investir num PWA? Estarei ganhando ou perdendo tempo? (nesse caso, estou considerando que os requisitos "flertam" bem com a ideia de PWA).

Valeu, pessoal! =)

[samuelmattos]

Acredito que se sua aplicação pode rodar em uma página web deveria ir para o PWA. Mas se precisa de algo nativo em smartphone vai para APP nativo. Falo isso pois é tendência, se você analisar o início dos smartphones o primeiro Iphone foi lançado sem loja, a ideia era que as aplicações rodassem do navegador, mas a galera não gostou da ideia, pois o Safari não oferecia o mesmo suporte que os navegadores da época. Atualmente essa situação está aos poucos se invertendo.

[vNNi]

A umas duas semanas terminei meu primeiro app como PWA, uma das coisas que me deixa meio triste ainda é em relação aos iOS, pois os service workers só funcionam à partir da 11.3 se não me engano e, o iOS não lê o manifest, com isso a tela de carregamento não existe, é literalmente uma página branca, fica bem feio, ja no android fica muito bom !
Tem alguns pontos a ressaltar também que o app é stateless, pelo menos iOS, não lembro se android acontece igual, mas a cada vez que tu sai, não precisa fechar, só ir pra home do celular e voltar, o app perdia o estado, era como se tivesse acabado de abrir de novo, tornando algo exaustivo.
Porém existem formas de contar essas coisas ruins e tornar bem próximo de algo nativo,
segue o link: https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native.
Enfim, eu curti muito fazer, principalmente por usar react e ele ja dar um suporte bem legal pra isso, com os service workers e se bem feito e não precisar de algo que ainda não tenha suporte no html5, fica muito bom, da pra passar como app nativo facilmente.

[vhfmag]

Amo PWAs e acho que são o futuro, mas concordo contigo: eles ainda não tem o apelo/adoção de apps nativos e não são tão conhecidos.

Algumas coisas agravam:

• Como disse @vNNi falou, o suporte chegou ao iOS mas é longe do ideal (https://github.com/PWA-POLICE/pwa-bugs)
• A inconsistência na UX de PWAs no Android continua não dando a sensação de App para usuários (ex: Apps de um Android antigo são restaurados num novo, mas não PWAs; e por que 'Adicionar à tela inicial' e não 'Instalar'?)
• E o fato de poucas stores indexarem PWAs também diminui a popularidade (apesar de que TWAs podem mudar isso pra Play Store; veja também: https://medium.com/@firt/is-there-a-cold-war-between-android-and-chrome-because-of-pwas-e50a7471056c).

Sobre ser o futuro: se as funcionalidades de um App forem realizáveis com tecnologias Web estáveis e a Web atender os requisitos de performance, eu acho a plataforma Web tecnicamente superior. Isso por que:

• O modelo de distribuição é mais simples e dá mais poder ao desenvolvedor (é só ter um domínio e disponibilizar o app nele, sem aprovações de terceiros e afins; e atualizar um App é instantâneo 💥)
• O custo pra usar a aplicação pela primeira vez é menor: o usuário não precisa baixar um App de 20MB pela 3g de uma Store ou, no meu caso, deixar pra fazer no wi-fi e nunca mais lembrar; na Web, você pode entregar uma home page de 100kb e ir baixando as demais rotas à medida que o usuário navegar.
• O app tá automaticamente disponível em praticamente qualquer plataforma (computador, celular e tablet de qualquer OS, smart-coisas que tenham tela e até smartwatch, quem sabe)
• O app vai continuar funcionando por décadas (desde que se use tecnologias Web estáveis), enquanto Android e iOS introduzem breaking changes regularmente

Uma das coisas mais empolgantes sobre PWAs é que eles tão chegando no desktop também, e com APIs novas como a Writable Files API, apps desktop como VSCode ou Spotify podem ser portados pra Web 🎉. E, estando na Web, o usuário ganha mais controle, podendo escolher o seu navegador e customizar sua experiência com extensões.

[ninetails]

Posso estar sendo overengineerista mas pra mim, para não ter muitos problemas, creio que um PWA deve ser realmente uma aplicação web progressiva. Funcionar como página normal em navegadores sem suporte a Service Workers e dependendo até SSR para indexação e appshell. Pensar em PWA como uma camada a mais de funcionalidade, relevando o custo:

• se eu adicionar SSR: vale a pena gastar mais para ter indexação para buscas orgânicas?
• se eu adicionar PWA: o projeto necessita de push notifications ou outra feature suportada? Cache controlado? Navegação offline? Desktop Progressive Web Apps? Publicar na Play Store usando TWA?

[nurycaroline]

Amo <3,
E acredito ser o futuro, chato que ainda temos que aguardar algumas features no ios, mas há maneiras de contornar. Onde trabalho hoje, estamos apostando forte em PWA.
Em minha opinião app nativo só em caso de jogos, ou algo que a web ainda não atende What web can do.

[araldicami-zz]

Amo PWA. 💖
Acredito ser o futuro, pois remete diversas facilidades.
Onde trabalho, estamos apostando fortemente.

[sbvorpagel]

O maior problema de PWA é o termo PWA, 0% comercial...

[brunofreitaspa]

Boa noite

Coloque a url nos seguintes codigos, confome

workbox.routing.registerRoute("url: 
  ({event}) => event.request.destination === 'document',
  new workbox.strategies.NetworkFirst({
    cacheName: HTML_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
      }),
    ],
  })
);

workbox.routing.registerRoute("url: 

  ({event}) => event.request.destination === 'script',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: JS_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute("url: 

  ({event}) => event.request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: STYLE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

workbox.routing.registerRoute(
  ({event}) => event.request.destination === 'image',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: IMAGE_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);
workbox.routing.registerRoute("url: 

  ({event}) => event.request.destination === 'font',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: FONT_CACHE,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 15,
      }),
    ],
  })
);

[brunofreitaspa]

importScripts('https://storage.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

const HTML_CACHE = "html";
const JS_CACHE = "javascript";
const STYLE_CACHE = "stylesheets";
const IMAGE_CACHE = "images";
const FONT_CACHE = "fonts";

const Benzolimp = "cd ceep-pwa-0.1";

self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});

workbox.routing.registerRoute() url:"https://www.benzolimp.com.br/"(
({event}) => event.request.destination === 'document',
new workbox.strategies.NetworkFirst({
cacheName: HTML_CACHE,
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 10,
}),
],
})
);

workbox.routing.registerRoute() url:"https://www.benzolimp.com.br/"(
({event}) => event.request.destination === 'script',
new workbox.strategies.StaleWhileRevalidate({
cacheName: JS_CACHE,
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 15,
}),
],
})
);

workbox.routing.registerRoute() url:"https://www.benzolimp.com.br/"(
({event}) => event.request.destination === 'style',
new workbox.strategies.StaleWhileRevalidate({
cacheName: STYLE_CACHE,
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 15,
}),
],
})
);

workbox.routing.registerRoute() url:"https://www.benzolimp.com.br/"(
({event}) => event.request.destination === 'image',
new workbox.strategies.StaleWhileRevalidate({
cacheName: IMAGE_CACHE,
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 15,
}),
],
})
);

workbox.routing.registerRoute() url:"https://www.benzolimp.com.br/"(
({event}) => event.request.destination === 'font',
new worktbox.strategies.StaleWhileRevelidate({
cacheName: FONT_CACHE,
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 15,
}),
],
})
);

[brunofreitaspa]

Esse foi codigo pwa apple store

[felquis]

@brunofreitaspa use a marcação de código para compartilhar código no github mano fica mais fácil de ler

```js
// código aqui
```

👍 só uma dica, é nóis

[brunofreitaspa]

mande o codigo fonte [email protected]