52 lines
3.1 KiB
Markdown
52 lines
3.1 KiB
Markdown
|
---
|
||
|
|
title: Progressive Web Apps
|
||
|
|
localeTitle: Aplicativos da Web progressivos
|
||
|
|
---
|
||
|
|
## Aplicativos da Web progressivos
|
||
|
|
|
||
|
|
Aplicativos da Web progressivos ou "PWAs" parecem ser mais do que apenas uma moda passageira, mas uma maneira fundamentalmente diferente de abordar o que um site pode e deve estar em qualquer plataforma da qual você esteja visualizando.
|
||
|
|
|
||
|
|
Os PWAs podem instalar partes deles próprios em dispositivos para visualização off-line, usar trabalhadores de serviços para fornecer conteúdo conforme necessário quando houver uma conexão disponível e, melhor de tudo, padronizar determinadas funcionalidades entre dispositivos móveis e de mesa.
|
||
|
|
|
||
|
|
### Características
|
||
|
|
|
||
|
|
Recursos específicos dos PWAs incluem:
|
||
|
|
|
||
|
|
* **Responsivo**
|
||
|
|
* cabe qualquer fator de forma
|
||
|
|
* **Recursos off-line**
|
||
|
|
* progressivamente aprimorada com os Trabalhadores de Serviço para permitir que eles trabalhem off-line
|
||
|
|
* **Nativo App Sinta**
|
||
|
|
* adota um modelo de aplicativo Shell & Content para criar navegação e interações de aplicativos
|
||
|
|
* **Fresco**
|
||
|
|
* sempre atualizado graças aos trabalhadores de serviços
|
||
|
|
* **Seguro**
|
||
|
|
* servida via TLS (um requisito de Trabalhador de Serviço) para evitar bisbilhotar
|
||
|
|
* **Detectável**
|
||
|
|
* identificável como "aplicativos" graças ao escopo de registro do W3C Manifests e Service Worker, permitindo que os mecanismos de pesquisa os encontrem
|
||
|
|
* **Noivando**
|
||
|
|
* pode acessar as UIs de reengajamento do sistema operacional por meio de notificações push
|
||
|
|
* **Instalação fácil**
|
||
|
|
* pode ser adicionado à tela inicial por meio de prompts fornecidos pelo navegador, permitindo que os usuários "mantenham" os aplicativos mais úteis sem o incômodo de uma loja de aplicativos
|
||
|
|
* **Linkable**
|
||
|
|
* ou seja, eles são zero-fricção, zero-instalar e fácil de compartilhar
|
||
|
|
* o poder social dos assuntos de URLs
|
||
|
|
|
||
|
|
> Esses aplicativos não são empacotados e implantados em lojas, são apenas sites que usaram todas as vitaminas certas. 1
|
||
|
|
|
||
|
|
### Aprimoramento Progressivo
|
||
|
|
|
||
|
|
Aprimoramento progressivo significa que todos podem acessar o conteúdo básico e a funcionalidade de uma página em qualquer navegador, e aqueles sem determinados recursos do navegador podem receber uma experiência reduzida, mas ainda assim funcional. [\- Farol](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced-b5ad7cf7a447) 2
|
||
|
|
|
||
|
|
Uma ótima analogia de [Aaron Gustafson](http://alistapart.com/article/understandingprogressiveenhancement) é que o aprimoramento progressivo (PE) é como um amendoim M & M.
|
||
|
|
|
||
|
|
> "O amendoim é o seu conteúdo, o revestimento de chocolate é a sua camada de apresentação e seu JavaScript é a casca de doce duro."
|
||
|
|
|
||
|
|
Isso implica que, dependendo do navegador, a experiência pode mudar.
|
||
|
|
|
||
|
|
### Demonstração
|
||
|
|
|
||
|
|
### Referências
|
||
|
|
|
||
|
|
1. [Russell, Alex. "Aplicativos da Web progressivos: escapando de guias sem perder a alma" "Notado com pouca frequência" Publicado em: 15 de junho de 2015.](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/)
|
||
|
|
2. [Aplicativos da Web progressivos - Google Developers](https://developers.google.com/web/progressive-web-apps/)
|