# Progressive web app

Progressive Web App (PWA) é um termo usado para denotar um conjunto de processos de desenvolvimento de software. Ao contrário dos tradicionais aplicativos, um Progressive Web App pode ser visto como uma evolução híbrida entre as páginas da web regulares (ou sites) e um aplicativo móvel. Este novo modelo de aplicação combina recursos oferecidos pelos mais modernos navegadores, com as vantagens de uso de um celular.

## Visão geral

Desde 2005, a Internet foi evoluindo rapidamente: a partir de sites estáticos para páginas web dinâmicas, através de Ajax e responsive web design.

### Web Dinâmica e Responsiva

As tecnologias de desenvolvimento da web mudaram, do HTML estático a documentos dinâmicos PHP, ASP.NET, Ajax e vários outras linguagens e scripts que rodam do lado do servidor e outras baseadas em dispositivos.
Ao final, o RWD (Responsive Web Design) evoluiu devido à mudança das funcionalidades introduzidas no HTML5, CSS3 e JavaScript. Esta poderosa combinação de marcação, folhas de estilo e scripts habilitaram interações personalizadas com elementos de página, renderização de vídeos sem o Adobe Flash Player, jogar jogos - todos estes no dispositivo cliente (não servidor).

### Navegadores de Internet

Estas alterações não teriam afetado a nova forma de navegar na web sem alterações significativas feitas nos navegadores.

### Dispositivos móveis

Em 2007 a Apple lançou o iPhone, pioneiro na popularização dos smartphones com uma tela sensível ao toque, embora outras empresas já tivessem oferecido smartphones semelhantes usando os sistemas operacionais Symbian (Nokia, Motorola, Sony Ericsson, Benq entre outros) e Linux (Motorola e Palm). A ideia de ter um dispositivo prático que permita navegar na Web, bem como uma grande variedade de funções e aplicações nativas ganhou mercado em relativamente pouco tempo.

### Melhores experiências em dispositivos móveis

Uma melhor experiência de usuário é uma das principais razões por trás da popularidade de aplicativos nativos. Estes executam como um pacote de aplicação do sistema considerando que aplicativos web tradicionais são carregados em tempo de execução num navegador. O navegador também atua como uma abstração entre o hardware do sistema e de aplicativos da web. Embalando os recursos e o acesso direto ao hardware, os aplicativos nativos executam mais rapidamente.
Outra categoria de aplicativos chamado "aplicativo híbrido" cai entre as características dos nativos e web apps.
Aplicativos híbridos imitam os aplicativos móveis nativos, sendo assim precisam de uma loja de aplicativos para download, necessitam de instalação e consumem espaço em disco, bem como nas telas iniciais de dispositivos móveis.
Aplicações hibrida parcialmente executado em navegadores de dispositivos móveis, mas de alguma forma eles não manter os princípios partilhados da web, tais como:
* Eles não têm uma URL que não estejam vinculados. Se nada é incapaz de vincular na web, ele nunca se torna parte da web.
* Marcação de estilo e torná-los acessíveis para os seres humanos, bem como motores de busca
* Interface do usuário a riqueza e os recursos do sistema como um adicional de núcleo funcional
* Código aberto, por natureza, tão livre para implementar e usar
Muitos tentaram fechar a brecha entre o móvel e a web experiências, mas descartou a existência de um ou dois aspectos do sistema de valores comuns, descritos acima.

## História

Em 2015, o designer Frances Berriman e o engenheiro do Google Chrome Alex Russell cunharam o termo "Progressive Web Apps" para descrever novas funcionalidades suportadas pelos navegadores modernos, incluindo Work Services Web e App Manifests, que permitem que os usuários atualizem aplicativos web semelhantes aos aplicativos nativos do sistema operacional.

## Características

Segundo o Google Developers, um Progressive Web App é:
* Progressivo - Funciona para qualquer usuário, independentemente do navegador escolhido, pois é criado com aprimoramento progressivo como princípio fundamental.
* Responsivo - Se adequa a qualquer formato: desktop, celular, tablet ou o que for inventado a seguir.
* Independente de conectividade - Aprimorado com service workers para trabalhar off-line ou em redes de baixa qualidade.
* Semelhante a aplicativos - Parece com aplicativos para os usuários, com interações e navegação de estilo de aplicativos, pois é compilado no modelo de shell de aplicativo.
* Atual - Sempre atualizado graças ao processo de atualização do service worker.
* Seguro - Fornecido via HTTPS para evitar invasões e garantir que o conteúdo não seja adulterado.
* Descobrível - Pode ser identificado como "aplicativo" graças aos manifestos W3C e ao escopo de registro do service worker, que permitem que os mecanismos de pesquisa os encontrem.
* Reenvolvente - Facilita o reengajamento com recursos como notificações push.
* Instalável - Permite que os usuários "guardem" os aplicativos mais úteis em suas telas iniciais sem precisar acessar uma loja de aplicativos.
* Linkável - Compartilha facilmente por URL, não requer instalação complexa.
* Exemplo - Aqui você pode conferir o exemplo de uma Progressive Web App bem completa.

## Tecnologias

Progressive Web Apps são uma melhoria da tecnologia web existente. Eles não exigem agregação ou distribuição. A publicação de um PWA é igual a qualquer outro aplicativo da web.
Os critérios técnicos básicos para que um site seja considerado um Aplicativo Progressivo da Web foram descritos por Russell em uma publicação de acompanhamento:
* Originam-se a partir de um Seguro de Origem. Servido por TLS e verde cadeado apresenta (não ativa conteúdo misto).
* Carregar enquanto estiver offline (mesmo se apenas um personalizado de página off-line). Por implicação, isto significa que a Progressiva Web Apps exigem Trabalhadores do Serviço.
* Referência a um Web App Manifesto com, pelo menos, as seguintes propriedades:
** nome
** short_name
** start_url
** display (com um valor de fullscreen, standalone ou em minimal-ui)
* Um ícone de, pelo menos, 512×512 grande em formato PNG. E. g.: "ícones": [ { "src": "/images/icon-512.png", "tamanhos": "512x512", "type": "image/png" } ]

## Manifesto

Trata-se de uma especificação da W3C definida no formato JSON, conhecida como manifesto, que oferece aos desenvolvedores um ponto centralizado para armazenar os metadados relacionados a um aplicativo da web, incluindo:
* O nome do aplicativo web.
* Links para o aplicativo da web ou ícones de objetos de imagem.
* A URL preferencial para iniciar ou abrir a aplicação web.
* O aplicativo da web de configuração de dados para um número de características.
* Declaração para orientação padrão do aplicativo web.
* Permite definir o modo de exibição (tela cheia, padrão e interface mínima).
Ao definir e manipular os metadados no arquivo de manifesto para a web, os desenvolvedores permitem que os agentes do usuário criem experiências perfeitas, semelhantes às de aplicativos nativos, por meio de PWAs.

## Service Workers

Aplicativos móveis nativos oferecem experiências ricas e alto desempenho, pois possuem o conteúdo, os componentes e os recursos necessários já otimizados para o dispositivo do usuário. No entanto, enfrentam limitações devido ao processo de instalação, como ocupação de espaço em disco, ausência de atualizações em tempo real e falta de visibilidade nos mecanismos de busca.
Os aplicativos web tradicionais enfrentam desafios relacionados à confiabilidade da conectividade e às restrições de carregamento. Para superar essas limitações, o Service Worker, projetado no contexto do Web Worker, proporciona experiências de carregamento mais eficientes.
Tecnicamente, o Service Worker atua como um script proxy de rede no navegador, permitindo gerenciar programaticamente as solicitações web/HTTP. Ele opera entre a rede e o dispositivo, auxiliando no fornecimento de conteúdo. Além disso, utiliza mecanismos de cache de forma eficiente, garantindo uma experiência livre de erros, mesmo em modo offline.
Propriedades dos Service Workers:
* Desencadear e manter-se vivo pelo relacionamento com os acontecimentos, não por documentos.
* De natureza genérica.
* Orientado a eventos com tempo limite de script contextos e em execução na origem.
* Natural e com pontos de extremidade para uma ampla gama de serviços de tempo de execução.
* Ter um estado.
* Com um script de URL.
* Contendo registro.
* Atribuída a ID ou UUID.
* Com eventos de ciclo de vida.
* Tem recurso de script mapa.
* Pode pular de espera para as bandeiras.
Benefícios dos Service Workers:
* Capaz de lidar com a notificação de envio facilmente.
* Sincronizar os dados de fundo.
* Capazes de responder às solicitações de recursos originam-se em outro lugar.
* Receber atualizações de forma centralizada.

## Aplicação Shell De Arquitetura

Para carregar rapidamente o layout e o conteúdo do aplicativo, os Service Workers armazenam componentes essenciais para a "Interface de Usuário Básica" de um aplicativo web responsivo (RWD). Essa Interface de Usuário Básica é comumente referida como o "Shell" do aplicativo.
O Shell fornece uma estrutura estática inicial, atuando como um layout ou arquitetura para carregar o conteúdo de forma progressiva e dinâmica. Tecnicamente, ele é um conjunto de códigos armazenado localmente no cache do navegador do dispositivo móvel. Dessa forma, o Shell mantém o Aplicativo Progressivo da Web (PWA) funcional e envolvente para os usuários, mesmo enquanto o conteúdo é carregado em condições variadas de conectividade.
O verdadeiro potencial de uma PWA está em aproveitar a excelência das tecnologias web, saindo do convencional e oferecendo experiências móveis excepcionais.
Navegadores como Google Chrome, Microsoft Edge e Opera oferecem suporte robusto para PWAs, enquanto Mozilla Firefox também oferece suporte, mas com algumas limitações. O Safari tem suporte mais restrito, especialmente em dispositivos iOS, mas ainda permite que PWAs sejam instaladas na tela inicial.