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.
.

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.

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.

Chrome e Edge no computador com o selo de instalação na barra de URL

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.

Ajuda no produto Google Chrome para sugerir a instalação do PWA.

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

Itens de menu do Chrome e do Edge para a instalação do PWA.

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.
.

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.

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.

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).

Minibarra de informações e caixas de diálogo de instalação no Android.

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.
.

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.

Um PWA instalado com diferentes navegadores no mesmo dispositivo.

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.

QuickApps na tela inicial de uma Huawei ou ZTE.

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.

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:

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).

Recursos