Progressive web app

As referências deste artigo necessitam de formatação. Por favor, utilize fontes apropriadas contendo título, autor e data para que o verbete permaneça verificável. (novembro de 2016)

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.

História

Em 2015, o designer Frances Berriman e o engenheiro do Google Chrome Alex Russell^{[desambiguação necessária]} 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:

1. Desencadear e manter-se vivo pelo relacionamento com os acontecimentos, não por documentos.
2. De natureza genérica.
3. Orientado a eventos com tempo limite de script contextos e em execução na origem.
4. Natural e com pontos de extremidade para uma ampla gama de serviços de tempo de execução.
5. Ter um estado.
6. Com um script de URL.
7. Contendo registro.
8. Atribuída a ID ou UUID.
9. Com eventos de ciclo de vida.
10. Tem recurso de script mapa.
11. 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.

Referências