Progressive Web Apps
Uma Progressive Web App (PWA, "Aplicação Web Progressiva") é uma aplicação criada com tecnologias web, mas que oferece uma experiência de usuário como a de uma específica de plataforma.
Assim como um site, uma PWA pode ser executada em várias plataformas e dispositivos a partir de uma única base de código. Da mesma forma que uma aplicação específica de plataforma, pode ser instalada no dispositivo, integrando-se a ele e a outras aplicações instaladas, além de operar offline e em segundo plano.
Guias
Estes guias fornecem explicações conceituais de diferentes aspectos das PWAs. Eles têm o objetivo de te ajudar a entender que tipos de coisas são possíveis com as elas e te fornecer orientações o suficiente para te mostrar como alcançá-las.
- O que é uma progressive web app?
-
Uma introdução às PWAs, comparando-as com sites tradicionais e aplicações específicas de plataforma e descrevendo seus principais recursos.
- Tornando PWAs instaláveis
-
Um dos aspectos que definem uma PWA é que ela pode ser instalada no dispositivo e em seguida aparecer para os usuários como uma aplicação específica da plataforma, um recurso permanente do dispositivo que pode ser iniciado diretamente do sistema operacional, como qualquer outro aplicativo. Neste guia, exploraremos o significado de "instalável", o que uma PWA precisa fornecer para ser instalável e como você pode personalizar a experiência de instalação.
- Instalação e desinstalação de aplicações web
-
Este guia aborda como os usuários podem instalar e desinstalar PWAs em seus dispositivos.
- Operando offline e em segundo plano
-
Neste guia, apresentaremos um conjunto de tecnologias que permite que uma PWA forneça uma boa experiência ao usuário mesmo quando o dispositivo tem uma conexão com a internet intermitente e realize operações em segundo plano, mesmo quando a aplicação principal não estiver em execução.
- Armazenando em cache
-
Uma visão geral das APIs que permitem que uma PWA armazene recursos em cache localmente e algumas estratégias comuns usadas por PWAs para implementar funcionalidades offline.
- Melhores práticas para PWAs
-
As PWAs devem se adaptar a diferentes navegadores e dispositivos, ser acessíveis, ter bom desempenho e se integrar bem ao sistema operacional. Este guia fornece uma lista de melhores práticas para te ajudar a garantir que sua PWA seja tão boa quanto for possível.
Como fazer
Estes guias fornecem instruções práticas e detalhadas sobre como implementar recursos específicos de PWA.
- Crie uma aplicação independente
-
Descreve como especificar que uma PWA deve ser aberta em sua própria janela dedicada quando for iniciada, em vez de em uma aba do navegador.
- Defina os ícones da sua aplicação
-
Descreve como definir que seu próprio conjunto de ícones deve ser usado quando a PWA estiver instalada em um dispositivo.
- Personalize as cores da sua aplicação
-
Descreve como definir cores de fundo e de tema para uma PWA.
- Exiba badges (ícone de notificação)
-
Descreve como exibir um badge (ícone de notificação) no ícone da PWA, por exemplo, para informar o usuário que há novas mensagens.
- Exiba ações comuns da aplicação em atalhos
-
Descreve como exibir ações comuns para uma PWA que pode ser iniciada a partir do menu de atalhos de aplicativos do sistema operacional.
- Compartilhe dados entre aplicações
-
Descreve como as PWAs podem compartilhar dados entre si usando o mecanismo de compartilhamento das aplicações do sistema operacional.
- Acionar a instalação a partir da sua PWA
-
Descreve como desenvolvedores podem fornecer sua própria interface para convidar os usuários a instalar sua PWA.
- Associe arquivos à sua PWA
-
Descreve como você pode criar uma associação entre tipos de arquivo e sua PWA, de modo que, quando o usuário clicar no arquivo, sua PWA seja iniciada para abri-lo.
Tutoriais
Nestes tutoriais, você criará uma PWA do zero. Os tutoriais percorrem as etapas de criação de uma aplicação, do início ao fim, explicando como os diferentes recursos dela são implementados.
- Criando sua primeira PWA
-
Este tutorial para iniciantes apresenta a criação de uma PWA para o monitoramento de ciclos menstruais. As lições incluem um passo-a-passo dos HTML, CSS e JavaScript necessários para se criar um site totalmente funcional, com a configuração de um ambiente de testes e explicações completas que vão te orientar na transformação dele em uma PWA, incluindo o desenvolvimento e a revisão de um manifesto, a adição de um service worker e o uso desse para se excluir caches antigos.
- Mergulhe fundo nas PWAs
-
Este tutorial de nível intermediário aborda a criação de uma PWA que lista informações sobre jogos submetidos para a categoria A-Frame na competição js13kGames 2017. Este tutorial inclui todos os conceitos básicos para a criação de uma PWA com recursos adicionais, abrangendo notificações - inclusive as do tipo push - e técnicas de melhoria de desempenho desempenho de aplicação.
Referências
Documentação de referência para as tecnologias web que você vai usar para criar uma PWA.
Web app manifest
- Web app manifest
-
Desenvolvedores podem usar os "membros" do web app manifest ["manifesto da aplicação web", tradução própria] para descrever uma PWA, personalizar sua aparência e integrá-la mais profundamente ao sistema operacional.
APIs de Service Worker
Comunicação com a aplicação
As APIs a seguir podem ser usadas por um service worker para se comunicar com sua PWA cliente associada:
Client.postMessage()
-
Permite que um service worker envie uma mensagem para sua PWA cliente.
- Broadcast Channel API
-
Permite que um service worker e sua PWA cliente estabeleçam um canal de comunicação bidirecional básico.
Operação offline
As seguintes APIs podem ser usadas por um service worker para fazer sua aplicação funcionar offline:
Cache
-
Um mecanismo de armazenamento em cache para respostas HTTP usado para manter assets que podem ser reutilizados quando a aplicação está offline.
Clients
-
Uma interface usada para fornecer acesso aos documentos que são controlados pelo service worker.
FetchEvent
-
Um evento enviado no service worker com cada requisição HTTP feita pela PWA cliente. O evento pode ser usado para se enviar a requisição ao servidor normalmente e salvar-se a resposta para uso futuro, ou para se interceptá-la e respondê-la imediatamente com uma resposta armazenada em cache anteriormente.
Operação em segundo plano
As APIs a seguir podem ser usadas por um service worker para se executar tarefas em segundo plano, mesmo quando a aplicação não estiver em execução:
- API Background Synchronization
-
Uma forma de se adiar a execução de tarefas em um service worker para que ocorram somente quando houver uma conexão com a internet estável.
- API Web Periodic Background Synchronization
-
Uma maneira de registrar-se tarefas a serem executadas em um service worker em intervalos periódicos com conexão de rede.
- API Background Fetch
-
Um método para um service worker gerenciar downloads que podem levar um tempo significativo, como arquivos de vídeo ou áudio.
Outras APIs web
- IndexedDB
-
Uma API de armazenamento no lado do cliente para quantidades significativas de dados estruturados, incluindo arquivos.
- API Badging
-
Um método para se colocar um badge (ícone de notificação) no ícone da aplicação, fornecendo-se uma notificação de pouca distração.
- API Notifications
-
Uma maneira de se enviar notificações que são exibidas a nível de sistema operacional.
-
Um mecanismo para compartilhamento de texto, links, arquivos e outros conteúdos com outras aplicações selecionadas pelo usuário em seu dispositivo.
- API Window Controls Overlay
-
Uma API para PWAs instaladas em sistemas operacionais de desktop que permite ocultar-se a barra de título da janela padrão, possibilitando que a aplicação fique em tela cheia, porém exibindo-se os botões de sistema (minimizar, maximizar, fechar) e os específicos do navegador.
Veja também
- Progressive Web Apps em web.dev
- Aprenda sobre PWA(inglês) em web.dev
- Progressive Web Apps em learn.microsoft.com (2023)