Instalação

Depois que o usuário instalar o PWA, ele vai:

• Ter um ícone no acesso rápido, na tela inicial, no menu "Iniciar" ou na plataforma de inicialização.
• Aparecer como resultado quando um usuário pesquisar o app no dispositivo.
• Ter uma janela separada no sistema operacional.
• Têm suporte para capacidades específicas.

.

Observação : embora a instalação seja diferente para cada navegador e sistema operacional, não é necessário criar nenhum tipo de pacote ou executável para que seu PWA seja instalado de um navegador.

Critérios de instalação

Cada navegador tem um critério que marca quando um site ou app da Web é um App Web Progressivo e pode ser instalado para uma experiência independente. Os metadados do PWA são definidos por um arquivo baseado em JSON conhecido como Manifesto do app da Web, que vai ser abordado em detalhes no próximo módulo.

Como requisito mínimo para a instalação, a maioria dos navegadores compatíveis usa o arquivo de manifesto do app da Web e determinadas propriedades, como o nome do app e a configuração da experiência instalada. Uma exceção é o Safari para macOS, que não oferece suporte à instalação.

Os requisitos para permitir a instalação diferem entre os diferentes navegadores. Este artigo detalha os critérios do Google Chrome e inclui links para os requisitos de outros navegadores.

Como o teste para verificar se um PWA atende aos requisitos de instalação pode levar vários segundos, é possível que ele não fique disponível assim que uma resposta de URL for recebida.

Observação : o processo de desinstalação de um PWA é diferente para cada combinação de sistema operacional e navegador. Na maioria das situações, o app pode ser desinstalado da mesma forma que qualquer outro app específico da plataforma. Em outras situações, a janela do PWA mostra um menu com uma opção de desinstalação. Excluir o ícone pode não limpar o armazenamento que um PWA está usando.

Instalação em desktop

No momento, o Google Chrome e o Microsoft Edge oferecem suporte à instalação de PWAs para Linux, Windows, macOS e Chromebooks. Esses navegadores mostrarão um selo de instalação (ícone) na barra de URL (veja a imagem abaixo), informando que o site atual pode ser instalado.

Quando um usuário interage com um site, é possível que ele veja um pop-up como o abaixo, convidando os usuários a instalá-lo como um aplicativo.

O menu suspenso do navegador também inclui um botão "Instalar " que o usuário pode usar:

Observação : navegadores baseados no Chromium no computador permitem que você veja todos os PWAs instalados nesse navegador usando about:apps.

Somente os modos de exibição autônomos e de interface mínima são compatíveis com os sistemas operacionais de computador.

PWAs instalados em computadores:

• Ter um ícone no menu "Iniciar" ou na tela "Iniciar" de PCs Windows, na base ou na área de trabalho em GUIs do Linux, na tela de início do macOS ou no Acesso rápido aos apps do Chromebook.
• Ter um ícone nos switches e nas bases do app quando o app estiver ativo, tiver sido usado recentemente ou estiver aberto em segundo plano.
• Apareça na pesquisa do app, por exemplo, no Windows ou no Spotlight no macOS.
• Pode definir um número de selo nos ícones para indicar novas notificações. Isso é feito com a API de selos.
• É possível definir um menu contextual para o ícone com Atalhos de apps.
• Não é possível instalar duas vezes com o mesmo navegador.

.

Observação : a instalação pode desbloquear outros recursos que não estão disponíveis para PWAs em execução na guia do navegador. Falaremos mais sobre isso no Capítulo sobre capacidades.

Depois de instalar um app no computador, os usuários podem acessar o about:apps, clicar com o botão direito do mouse em um PWA e selecionar "Iniciar app ao fazer login" se quiserem que o app abra automaticamente na inicialização.

Instalação do iOS e iPadOS

Uma solicitação do navegador para instalar o PWA não existe no iOS e no iPadOS. Nessas plataformas, os PWAs também são conhecidos como apps da Web na tela inicial. Esses apps precisam ser adicionados manualmente à tela inicial usando um menu disponível apenas no Safari. É recomendável adicionar a tag apple-touch-icon ao HTML. Para definir o ícone, inclua o caminho dele na seção <head> do HTML, desta forma:

<link rel="apple-touch-icon" href="/icons/ios.png">

O Safari vai usar essas informações para criar o atalho. Se você não fornecer um ícone específico para dispositivos Apple, o ícone na tela inicial será uma captura de tela do PWA quando o usuário o tiver instalado.

É importante entender que a instalação do PWA só vai estar disponível se o usuário navegar pelo site no Safari. Outros navegadores disponíveis na App Store, como Google Chrome, Firefox, Opera ou Microsoft Edge, não podem instalar um PWA na tela inicial.

As etapas para adicionar apps à tela inicial são:

1. Abra o menu Compartilhar, disponível na parte inferior ou superior do navegador.
2. Clique em Adicionar à tela inicial.
3. Confirme o nome do app. o nome é editável pelo usuário.
4. Clique em Adicionar. No iOS e no iPadOS, os favoritos de sites e PWAs têm a mesma aparência na tela inicial.

No iOS e iPadOS, apenas o modo de exibição autônomo é compatível. Portanto, se você usar o modo de interface mínima, ele vai recorrer a um atalho do navegador. Se você usar a tela cheia, ele voltará para o modo independente.

Atenção : em dispositivos Apple, você pode instalar o mesmo PWA várias vezes. cada instalação terá seu próprio armazenamento isolado e será tratada como um aplicativo diferente.

PWAs instalados no iOS e iPadOS:

• Aparecem na tela inicial, na pesquisa do Spotlight, nas sugestões da Siri e na pesquisa na biblioteca de apps.
• não aparecem nas pastas de categorias da Galeria de Apps.
• não oferece suporte a recursos como selos e atalhos de apps;

O Safari usa uma tecnologia nativa conhecida como Web Clips para criar os ícones do PWA no sistema operacional. Eles são apenas arquivos XML no formato de lista de propriedades da Apple, armazenados no sistema de arquivos.

Quando os usuários utilizam o PWA, não estão usando uma instância do app Safari (por exemplo, usam uma instância do Chrome), mas usam algo conhecido como Web.app, então você vai notar pequenas diferenças entre o PWA renderizado no Safari e a janela dele. Tanto o Safari quanto o Web.app usam o mesmo núcleo do WebKit e o mesmo tempo de execução do JavaScript, mas eles são executados em processos diferentes e podem ter implementações distintas, como armazenamento isolado.

Instalação do Android

No Android, as solicitações de instalação de PWAs variam de acordo com o dispositivo e o navegador. Os usuários podem ver:

• Variações no texto do item de menu para instalação, como Instalar ou Adicionar à tela inicial
• Caixas de diálogo de instalação detalhadas.

Na imagem a seguir, você pode ver duas versões diferentes de uma caixa de diálogo de instalação, uma minibarra de informações simples (à esquerda) e uma caixa de diálogo de instalação detalhada (à direita).

Dependendo do dispositivo e do navegador, o PWA será instalado como um WebAPK, um atalho ou um QuickApp.

WebAPKs

Um WebAPK é um pacote Android (APK) criado por um provedor confiável do dispositivo do usuário, geralmente na nuvem, em um servidor de criação do WebAPK. Esse método é usado pelo Google Chrome em dispositivos com os Serviços do Google Mobile (GMS) instalados e pelo navegador de Internet da Samsung, mas somente em dispositivos fabricados pela Samsung, como um smartphone ou tablet Galaxy. Juntos, eles representam a maioria dos usuários do Android.

Quando um usuário instala um PWA do Google Chrome e um WebAPK é usado, o servidor de criação "mints" (pacotes) e assina um APK para o PWA. Esse processo leva tempo, mas quando o APK está pronto, o navegador instala esse app silenciosamente no dispositivo do usuário. Como os provedores confiáveis (Play Services ou Samsung) assinaram o APK, o smartphone o instala sem desativar a segurança, como acontece com qualquer app da Play Store. Não é necessário transferir o app por sideload.

PWAs instalados via WebAPK:

• Ter um ícone no Acesso rápido aos apps e na tela inicial.
• Apareça em "Configurações > Apps".
• Podem ter vários recursos, como selos, atalhos de apps e captura de links no SO.
• Pode atualizar o ícone e os metadados do app.
• Não é possível fazer a instalação duas vezes.

.

Você, como desenvolvedor de PWA, não precisa criar ou assinar nenhum pacote quando um WebAPK é usado. Tudo é processado de forma transparente entre o navegador, o dispositivo e o servidor de criação.

Atalhos

Embora os WebAPKs ofereçam a melhor experiência para usuários do Android, eles nem sempre podem ser criados. Quando não consegue, os navegadores voltam a criar um atalho para o site. Como o Firefox, Microsoft Edge, Opera, Brave e Samsung Internet (em dispositivos que não são da Samsung) não têm servidores de criação confiáveis, eles criarão atalhos. O Google Chrome também funcionará se o serviço de criação não estiver disponível ou se o PWA não atender aos requisitos de instalação.

PWAs instalados com atalhos:

• Ter um ícone com o selo do navegador na tela inicial (veja os exemplos a seguir).
• Não ter um ícone no acesso rápido ou em Configurações, Apps.
• Não é possível usar recursos que exigem instalação.
• Não podem atualizar os ícones e metadados do app.
• pode ser instalado várias vezes, mesmo usando o mesmo navegador; quando isso acontece, todos apontam para a mesma instância e usam o mesmo armazenamento.

QuickApps

Alguns fabricantes, incluindo Huawei e ZTE, oferecem uma plataforma conhecida como QuickApps para criar apps da Web leves semelhantes aos PWAs, mas usando uma pilha de tecnologia diferente. Alguns navegadores nesses dispositivos, como o Huawei, podem instalar PWAs empacotados como QuickApp, mesmo se você não estiver usando a pilha QuickApp.

Quando o PWA é instalado como um QuickApp, os usuários têm uma experiência semelhante à que teriam com atalhos, mas com um ícone com o ícone do QuickApps (uma imagem de um raio). O app também estará disponível para inicialização no QuickApp Center.

Solicitação de instalação

Em navegadores baseados no Chromium em computadores e dispositivos Android, é possível acionar a caixa de diálogo de instalação do navegador no PWA. O capítulo Prompt de instalação (em inglês) aborda os padrões de uso e como implementá-los.

Aviso : se você fornecer instruções ao usuário, lembre-se de que os itens variam de acordo com o idioma.

Lojas e catálogos de apps

Seu PWA também pode ser listado em catálogos de apps e lojas para aumentar o alcance e permitir que os usuários o encontrem no mesmo lugar que encontrarem outros apps. A maioria dos catálogos e lojas de aplicativos é compatível com tecnologias que permitem publicar um pacote que não inclui todo o app da Web (como HTML e recursos). Essas tecnologias permitem criar apenas um inicializador para um mecanismo de renderização da Web autônomo que carregará o aplicativo e permitirá que o service worker armazene os recursos necessários em cache.

Os catálogos de apps e as lojas compatíveis com a publicação de um PWA são:

• Google Play Store para Android e ChromeOS, usando uma Atividade Confiável na Web.
• Apple App Store para iOS, macOS e iPadOS, usando WKWebView e domínios vinculados a apps.
• Microsoft Store para Windows 10 e 11, usando pacotes APPX.
• Samsung Galaxy Store, usando o servidor de criação do Samsung WebAPK.
• Huawei AppGallery, usando um contêiner do QuickApp para seu aplicativo HTML.

Se quiser saber mais sobre como publicar um PWA em catálogos e armazenamentos de apps, confira a CLI BubbleWrap e o PWA Builder (links em inglês).

Aviso : algumas lojas e catálogos de apps têm requisitos técnicos ou comerciais que antecedem a aceitação do PWA para publicação. Verifique os requisitos de cada loja antes de começar.

Recursos

• O que é necessário para conseguir instalar
• WebAPKs no Android
• Padrões para promover a instalação de PWA
• Como usar um PWA no app Android
• Listar seu Progressive Web App no Google Play
• Enviar seu PWA para a Microsoft Store
• Como publicar um PWA na App Store
• WebKit: domínios vinculados a apps