O que são aplicativos de página única e aplicativos da Web progressivos?
Aplicativos de página única (SPAs) e aplicativos Web progressivos (PWAs) estão revolucionando a web. Ambas são novas tecnologias que parecem semelhantes, mas não são. Na verdade, as pessoas costumam usá-los de forma intercambiável.
Vamos nos aprofundar nos principais recursos e na arquitetura de cada um deles para entendê-los melhor.
O que são aplicativos de página única?
SPAs, como parecem, são sites que carregam conteúdo dinamicamente em uma única página. Em essência, toda forma de conteúdo e elemento que você precisa para interagir com trechos em uma página. Isso significa que você não precisa carregar modelos de objeto de documento (DOMs) separados ao navegar nesse site.
Dito isso, o objetivo é manter os usuários na mesma página, carregando tudo o que eles precisam usar e ver de uma só vez. Isso se traduz em uma melhor experiência do usuário.
A interface do usuário, por outro lado, depende de como você projeta e organiza seu SPA. Isso se resume a por que você pode querer dividir a página esticada em navegações. E isso não impede que seja uma única página, já que o conteúdo ainda carrega apenas uma vez.
Portanto, quando você navega em um SPA, você está navegando em conteúdo pré-carregado em um único DOM e não está visitando DOMs diferentes, como pode ter erroneamente acreditado.
Dividir um SPA em seções de conteúdo separadas geralmente envolve dar a cada um deles um URL usando visualizações JavaScript. O conector de link de dados vincula essas seções ao DOM principal e permite que você as acesse de forma assíncrona.
Embora outras tecnologias como Mint e elm-spa estejam surgindo, JavaScript ainda é a linguagem de programação mais comum para a elaboração de SPAs.
JavaScript usa uma função async / await que permite carregar conteúdo dinâmico e estático de maneira assíncrona, sem que uma entrada bloqueie a saída de outra solicitação. Portanto, os SPAs operam em um sistema de entrada-saída (E / S) sem bloqueio.
Dito isso, estruturas de JavaScript como ReactJS, Vue.js, AngularJS, Ember.js e Backbone.js oferecem suporte ao rápido desenvolvimento de SPAs. Para começar, você pode consultar esta visão geral do Vue.js para iniciantes .
Por conferir velocidade, a maioria dos aplicativos corporativos adotou a ideia de transformar seus sites em uma única página. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter e Pinterest são exemplos de SPAs.
O que são aplicativos da Web progressivos?
Um PWA é um aplicativo ou software da web que usa diretrizes de navegador da web padrão e emergentes em sua funcionalidade. Os PWAs, ao contrário dos SPAs, baseiam sua arquitetura em algum conjunto de diretrizes que os tornam escaláveis, adaptáveis ao usuário, super rápidos, instaláveis e semelhantes aos nativos.
Lançado em 2015 pelo Google, o objetivo de um PWA é construir aplicativos que conversem direta e progressivamente com seus usuários. O objetivo é manter os usuários fluindo com o aplicativo, mesmo quando há uma conexão de rede ruim ou inexistente.
Invariavelmente, um PWA oferece tudo que você precisa em um piscar de olhos. Não passa pela característica de carregamento de conteúdo inicial típica de um SPA.
Consequentemente, o usuário interage com o aplicativo como se fosse nativo. Embora uma característica central dos PWAs seja a capacidade de instalação, você ainda pode acessá-los rapidamente por meio de seu navegador da web, sem qualquer instalação. Dito isso, como qualquer outro site, um PWA também deve ter um URL.
Os aplicativos da web progressivos são únicos por terem auxiliares de segundo plano que entregam conteúdo em um piscar de olhos. Portanto, antes mesmo de acessar o aplicativo da web, o conteúdo e os componentes estão prontamente disponíveis para você usar. Isso os torna super rápidos e mais confiáveis.
Aplicativos como Spotify, Slack e Uber, entre outros, são exemplos de PWAs.
Os PWAs geralmente têm uma regra de arquitetura comum. Para que um PWA funcione como deveria, ele deve ter os seguintes atributos:
1. Um trabalhador
Trabalhadores de serviço entregam conteúdo prontamente em PWAs. Eles garantem que seu aplicativo pode carregar dados em cache relacionáveis quando não há conexão de rede. Isso é possível com a ajuda da API Cache, que armazena respostas às suas solicitações offline. Assim, um trabalhador interfere nas navegações e solicitações do usuário.
Usando um objeto de promessa , um trabalhador pode entregar conteúdo já baixado no caso de uma eventual solicitação de um usuário (mesmo quando estiver offline). Um service worker, entretanto, confere uma propriedade sem bloqueio aos PWAs.
2. Um contexto seguro
Um service worker precisa de uma conexão segura (HTTPS) para a confidencialidade do conteúdo entregue. Quando você envia uma solicitação, um trabalhador estabelece uma comunicação segura entre o PWA e o navegador. Um contexto seguro, portanto, evita violações de confidencialidade como um ataque man-in-the-middle (MITM) em PWAs.
3. Um arquivo de manifesto de aplicativo da Web
Um manifesto da web é um arquivo JSON que define as características de um PWA. Ele detalha os pré-requisitos para acessar, descobrir e usar o conteúdo de um PWA. Geralmente inclui o nome do seu aplicativo, seu URL e seus componentes. Em última análise, um arquivo de manifesto contém as informações necessárias para transformar seu aplicativo da web em um aplicativo instalável.
Quais são as semelhanças entre PWAs e SPAs?
Embora a lógica de fundo dos PWAs e SPAs sejam diferentes, eles ainda compartilham apenas algumas coisas em comum. Embora sua velocidade de entrega possa ser significativamente diferente, os sites convencionais ainda ficam para trás em velocidade e acessibilidade.
Ambos visam melhorar a experiência do usuário, fornecendo uma interface responsiva.
Como ambos proporcionam uma experiência de aplicativo, é fácil misturá-los e você mal pode dizer qual é qual ao interagir com eles. Finalmente, nesta observação, ambos precisam de um URL antes que você possa acessá-los.
As principais diferenças entre SPAs e PWAs
PWAs e SPAs podem compartilhar algumas características notáveis em comum, mas são duas coisas diferentes. Aqui estão as principais diferenças de recursos que você deve observar:
Principais recursos de aplicativos de página única
- Eles só podem ser acessados por meio do navegador.
- Embora não seja recomendado, você pode atendê-los em uma rede insegura (HTTP).
- Eles não exigem trabalhadores de serviço.
- Os SPAs não têm um arquivo de manifesto JSON, o que significa que eles podem ser desinstalados.
- Eles devem ter uma única página.
- Não acessível quando não há rede.
Principais recursos dos Progressive Web Apps
- Acessá-los por meio do navegador é uma opção, pois são instaláveis.
- Todos os PWAs precisam de service workers e devem fazer solicitações por meio de uma rede segura (HTTPS).
- As respostas são armazenadas em cache e entregues por meio de um objeto de promessa .
- Eles são acessíveis mesmo na ausência de uma conexão de rede.
- Eles são mais rápidos do que os SPAs.
- Eles sempre têm um arquivo de manifesto, portanto, podem ser baixados, instalados e facilmente acessíveis.
- Um PWA pode não ser um aplicativo de uma única página.
SPAs e PWAs estão influenciando a entrega de sites
Com muitos sites corporativos agora adotando essas novas tecnologias, agora há uma mudança positiva em sua entrega de serviços.
Mais importante ainda, a adoção de PWAs melhora a experiência geral do usuário, o que, consequentemente, reduz as taxas de rejeição e aumenta a receita da maioria dos aplicativos empresariais. Os SPAs, por outro lado, também rejuvenesceram as mídias sociais, tornando mais fácil para as pessoas interagirem na web sem lentidão no carregamento da página.
