---
# System prepended metadata

title: '[2020/04/01] O que é um PWA?'
tags: [Blog, MoFu]

---

# [2020/04/01] O que é um PWA?

![MuitosAplicativos](https://atl-preview.s3.amazonaws.com/blog/yura-fresh-n31x0hhnzOs-unsplash.jpg)

Os Progressive Web Apps (PWAs) já estão entre nós a algum tempo, pode ser que você nem saiba, mas já existem diversas empresas que utilizam essa tecnologia para distribuir suas aplicações. Mas exatamente, o que são os PWAs e para que servem?

Apesar da ideia do PWA já existir há mais de 10 anos, foi só em 2015 que o termo Progressive Web App surgiu, o objetivo era permitir a criação de aplicações que fossem compartilhadas por diversas plataformas, mantendo sempre o mesmo comportamento dessas aplicações independente do lugar onde estão sendo usados.

Esse desafio era muito difícil (e ainda é constante discussão no mundo da computação!) pois cada plataforma define regras bem restritas para que você consiga construir uma aplicação. Mesmo assim todas as plataformas (Windows, Apple, Google) compartilham algo: Todas possuem suporte para navegadores (Chrome, Firefox, Safari).

Portanto, se criamos um site é muito fácil compartilhar ele em qualquer lugar, independente do seu celular ou do seu computador, você consegue abrir um website. O grande problema é que os navegadores são muito limitados, pois foram projetados para funcionar de uma maneira específica (você precisa de conexão com a internet contínua, tem que acessar o site de dentro do navegador, etc).

O PWA surge para unir o melhor dos dois mundos, ou seja, criar uma interface onde um site pode ser disponibilizado dentro da cada plataforma da melhor forma possível. Se você ainda não entendeu, alguns dos apps que você tem instalado no seu celular na verdade podem ser PWAs disfaçados de apps!

## Diferenças entre um PWA e um website

Uma das principais diferenças está no fato que o PWA permite o acesso offline de seu conteúdo, ou seja, uma vez que você tenha feito o download no PWA no seu dispositivo, aquele conteúdo se mantém disponível para você, ao contrário de um site.

![ChromeOfflineGame](https://atl-preview.s3.amazonaws.com/blog/chrome-offline-dino-game.jpg)

Outra grande diferença é no acesso que o PWA tem, um site não consegue ter acesso fora do navegador, ou seja, qualquer documento que você armazena no seu celular fica protegido de sites, já o PWA pode permitir esses acessos. É importante notar que o PWA não é menos seguro que um site, uma vez que todos os dispositivos possuem mecanismos de segurança para impedir acessos não autorizados, ou seja, para um PWA conseguir acesso ao celular, você explicitamente precisará permitir esse acesso.

Você pode estar se perguntando qual a vantagem disso, o acesso aos dispositivos é fundamental para que possamos realizar algumas tarefas como acessar a galeria para armazenar uma foto de perfil, ou habilitar o microfone para gravar um áudio e enviar para seus amigos. Tudo isso fica mais complicado quando utilizamos um site, enquanto que um PWA facilita muito esse processo.

## Diferenças entre um PWA e um app nativo

Mas e qual a diferença entre um PWA e outros apps? Como eu posso pegar meu celular e descobrir quais dos meus apps são nativos e quais são PWAs?

A principal diferença entre eles está na distribuição, apps nativos só podem ser instalados através das lojas licenciadas de cada plataforma (Google Play, App Store), enquanto isso PWAs não podem ser instalados pelas lojas, ou seja, se você entrar na loja de aplicativos do seu celular e não achar um aplicativo que você possui instalado, ele provavelmente é um PWA.

E como eu faço para instalar um PWA? A maneira mais comum é acessando o website dessa aplicação, ao carregar a página um banner deve aparecer informando que você pode instalar aquela aplicação no seu celular. Depois disso o aplicativo fica disponível para acesso igual um app nativo.

Outra diferença importante de levantar é a questão da performance, apps nativos são desenvolvidos pensando na especificidade de cada plataforma, e geralmente possuem uma performance melhor do que PWAs, mas esse problema só é perceptível em alguns casos de uso bem específicos. A grande maioria das aplicações funciona sem que seja possível notar problemas de performance.

## E quem está usando PWAs?

Acho que ficou claro que as diferenças entre PWAs e apps nativo são bem sutis, por esse motivo, no inicio do artigo, eu comentei que você pode estar usando PWAs e nem percebeu, devido a similaridade entre essas tecnologias é muito difícil de abrir um aplicativo e descobrir qual tecnologia foi usada para desenvolver aquela aplicação.

Mas já existem grandes empresas usando essa tecnologia? A adoção do PWA dentro de grandes empresas ainda é algo difícil principalmente pelo fato que muitas empresas já possuem aplicações nativas, e fazer a migração para PWA seria algo muito demorado. Empresas menores e startups que vem crescendo muito nos últimos anos começam a adotar o PWA como uma de suas das principais tecnologias, alguns exemplos são: QuintoAndar, Twitter, Telegram, Atlantica, Tinder, Uber, Trivago e Forbes. Algumas dessas empresas ainda oferecem as duas soluções, sendo possível instalar o app nativo pela loja ou o PWA pelo site da empresa. 

Uma coisa é certa, o PWA veio para ficar. A Google é uma das grandes apoiadores da ideia, sendo responsável por criar diversos de seus produtos como PWAs, além disso a empresa permitiu que apps sejam instalados em desktops a partir do [Chrome](https://support.google.com/chrome/answer/9658361?co=GENIE.Platform%3DDesktop&hl=en). Apesar das limitações que possivivelmente impedem que os PWAs sejam a principal forma de distribuição de aplicativos, essa solução de criar apps a partir de websites deve se tornar cada vez mais comum e mais presente no nosso dia a dia, muitas vezes escondidos e disfarçados de apps nativos.

---

**HASHTAGS**: #tecnologia #web #pwa 

**DESCRIÇÃO**: Já ouviu o termo PWA em algum lugar e não sabe o que ele significa? Este post explica de forma simples e prática o que é um Progressive Web App(PWA) e para que ele é usado.

**QUEM ESCREVEU**: Henrique

###### tags: `Blog` `MoFu`