PWA é apenas

O conceito de Progressive Web Applications (PWA) existe há muito tempo, desde a primavera de 2018, os aplicativos dessa classe são suportados por todos os principais navegadores, no entanto, a prevalência das tecnologias do PWA, apesar de suas vantagens óbvias, ainda é muito baixa.

Os especialistas do Google (inclusive no Habré) escrevem de maneira muito informativa e competente sobre a PWA, mas suas recomendações são mais úteis para aqueles que já estão familiarizados com o assunto. Este artigo pretende mostrar que os Aplicativos Web Progressivos não são difíceis e os desenvolvedores de qualquer site podem e devem usar essas tecnologias agora.

Filosofia da PWA

Para começar, vale a pena notar que não há uma definição exata do aplicativo PWA. Você não pode dizer claramente se este site é PWA ou não. Essa é uma escala longa em que o segundo aluno Petya, que adicionou um manifesto de aplicativo da web, pode criar um ícone de página inicial na tela inicial do celular; e externamente indistinguível de um site de notícias regular, apenas os usuários podem dizer que é surpreendentemente rápido e conveniente, mas tudo porque em algum lugar dentro dele bate o coração quente de um trabalhador de serviço (trabalhador de serviço).

Relatividade O PWA está no próprio nome - "progressivo". Progressivo comparado com o que e em que medida? Mas essa relatividade, de fato, é muito boa, porque você pode estudar as tecnologias da PWA e aplicá-las em seus projetos atuais gradualmente, sem remodelação e refatoração globais.

Por outro lado, a PWA tem uma ideia, e a ideia é bastante clara e poderosa. E quão lentamente se desenrola, pode muito bem indicar a magnitude das consequências.

Arquitetura PWA

O PWA é um aplicativo da web criado usando determinadas tecnologias para atingir metas especificadas.



Os alvos são decifrados da seguinte maneira:

Confiável - o aplicativo é baixado e exibido imediatamente, independentemente do status e da qualidade da conexão de rede.
Rápido (Rápido) - a troca de dados pela rede é rápida, a interface do usuário é suave e responsiva.
Atratividade (engajamento) - torna a experiência do usuário com o aplicativo confortável e agradável, levando-o a querer experimentá-lo novamente e novamente e novamente ...

Do ponto de vista do Google, é exatamente isso que separa os sites dos aplicativos nativos em termos de aparência.

Em outras palavras, ao desenvolvedor são oferecidas ferramentas (Service Worker, Push Notifications, etc.) e as metas são indicadas (o site / aplicativo deve ser rápido para carregar, trabalhar em uma conexão fraca, não "atrasar", trabalhar offline, se necessário). Até onde o desenvolvedor irá nesse caminho depende apenas dele.

PWA e aplicativos nativos

O fato de o PWA parecer semelhante aos aplicativos nativos é, antes, uma solução cosmética (embora seja importante para o usuário do ponto de vista psicológico). Mas o fato de serem semelhantes internamente (todos os principais recursos do aplicativo podem ser armazenados no cliente, apenas a alteração de conteúdo será transmitida pela rede) é uma grande conquista.

Você pode até chamar de revolução oculta. De fato, o navegador é usado como um tipo de máquina virtual que armazena e executa o aplicativo PWA. Como o Android é uma máquina virtual para aplicativos Android, o navegador se torna uma máquina virtual para o PWA. Assim como um aplicativo nativo acessa seus recursos através de um sistema de arquivos, o PWA também acessa seus recursos - embora via HTTP, mas armazenados localmente.

E, pela primeira vez, tudo isso funciona da mesma maneira nos principais navegadores e nas principais plataformas.


Obviamente, existem diferenças entre o PWA e os aplicativos nativos - principalmente nos direitos de acesso aos recursos do sistema, mas o trabalho nessa direção vai até no campo do HTML5 puro e, para privilégios adicionais do PWA, não será um problema.

Tecnologia

Considere brevemente os principais motores do PWA.

Trabalhador de serviço

O coração do PWA é o Trabalhador de Serviço. Essa é a camada de proxy entre o front-end e o back-end, localizado no navegador. Todas as solicitações do navegador passam por isso. Essa divisão em duas camadas independentes nos permitiu fazer a transição de um site regular para o PWA da maneira mais simples possível.

No armazenamento, o Service Worker tem acesso ao Armazenamento em Cache para recursos da Web e ao IndexDB para dados. Mas, o mais importante, completa liberdade para implementar a lógica de negócios.

Você pode, por exemplo, aceitar uma solicitação de um navegador, verificar o status da rede, coletar dados do armazenamento, executar operações com eles e retornar um determinado resultado ao navegador - que pensará que a resposta veio do servidor. Ou não - como o desenvolvedor quer, ele fará. Duas camadas do navegador (front-end do cliente e Service Worker) permitem que você escreva aplicativos completos.

Ao mesmo tempo, para a maioria dos sites, a funcionalidade de armazenamento em cache do Service Worker será suficiente para se transformar em um PWA.

O PWA não depende de nenhuma estrutura, é javascript puro, embora mesmo os especialistas do Google em Habré, por algum motivo, recomendem o uso de geradores de código de biblioteca. O Service Worker é lindamente escrito à mão, e isso é necessário para entender e controlar a lógica do seu aplicativo.

Do ponto de vista programático, o Service Worker é um arquivo javascript incluído no código html da página. Nele, o desenvolvedor define a lógica para trabalhar com solicitações provenientes do front-end e outras funcionalidades.

Https

O PWA exige que todos os recursos do site sejam transmitidos pelo protocolo HTTPS. Você pode obter um certificado SSL de graça; alguns hosters fazem isso por você. Mas é fundamental que o site não tenha links para recursos não seguros - alguns navegadores simplesmente não exibem o site nesse caso.

O principal problema encontrado nesses casos são as imagens. Muitas vezes, os editores ou comentaristas colocam links para fotos da Internet no material, às vezes chegam automaticamente (no material). É necessário salvar as imagens para você ou para um serviço com acesso via HTTPS.

Shell de aplicação

O shell do aplicativo é apenas um esqueleto de uma interface gráfica, um modelo. Por exemplo, considere um site comum com um cabeçalho, duas colunas e mais. Grosso modo, recortamos o conteúdo da página atual e todas as informações dinâmicas, a estática restante é o shell do aplicativo.

A conclusão é que o shell do aplicativo é armazenado no cliente e carregado quando o aplicativo é iniciado e, em seguida, são carregadas informações dinâmicas a partir da rede. E enquanto está sendo carregado, o shell do aplicativo deve ficar bonito ("carregadores" no chão etc.)

Essa arquitetura do site - download de conteúdo e outras informações dinâmicas por meio de chamadas ajax - pode ser pensada e implementada no site com antecedência, então a transição para o PWA será bastante simples.

Um shell de aplicativo é como um shell de programa nativo. Olhe para o seu PWA como um programa nativo e muito se tornará mais fácil.

Manifesto de aplicativo da Web

Um arquivo JSON que define declarativamente o nome do aplicativo para o navegador, um ícone de como será o PWA (tela cheia, autônomo etc.) e alguns outros parâmetros. Permite que você "instale" o PWA como um aplicativo separado na tela inicial do seu smartphone.

Notificações push

Se você navegar na Internet com o Chrome DevTools, aberto na guia Aplicativo, poderá ver como poucos sites usam a tecnologia PWA. E 90% dos que usam o fazem apenas para obter notificações por push.

Até agora, esta é a tecnologia PWA mais popular e mais abusada - nos últimos meses, o número de sites que você acessa pela primeira vez e procura o botão "Bloquear" com o mouse para obter as últimas notícias aumentou, o sentimento aumentou muitas vezes e o desejo de impor a sua própria Push é como spam.

Mas você também pode oferecer uma assinatura para a segunda ou terceira visita do usuário ao site quando já estiver claro que ele não está aqui por acaso.