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.

API Web Share

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