Instalação

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

• Ter um ícone na tela de início, na tela inicial, no menu "Iniciar" ou no painel de inicialização.
• Aparecem como resultado quando um usuário pesquisa o app no dispositivo.
• Tenha uma janela separada no sistema operacional.
• É preciso ter suporte para recursos específicos.

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

Critérios de instalação

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

Como requisito mínimo para 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 navegadores. Este artigo detalha os critérios do Google Chrome e inclui links para requisitos para outros navegadores.

Como o teste para confirmar que um PWA atende aos requisitos de instalação pode levar vários segundos, a instalação pode não estar disponível assim que uma resposta de URLs é recebida.

Observação : o processo de desinstalação de PWA é diferente em 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 oferece um menu com a opção de desinstalação. A exclusão do ícone pode não limpar o armazenamento que um PWA está usando.

Instalação no computador

No momento, o Google Chrome e o Microsoft Edge podem instalar o PWA no Linux, Windows, macOS e Chromebooks. Esses navegadores mostram 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, ele pode ver um pop-up como o mostrado abaixo convidando os usuários a instalá-lo como um app.

O menu suspenso do navegador também inclui um item "Instalar ", que pode ser usado pelo usuário:

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

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

PWAs instalados em computadores:

• Tenha um ícone no menu "Iniciar" ou na tela "Iniciar" de PCs Windows, na base ou na área de trabalho em GUIs do Linux, no Launchpad do macOS ou no Acesso rápido aos apps do Chromebook.
• Ter um ícone nos botões e nas docks de apps quando o app estiver ativo, tiver sido usado recentemente ou estiver aberto em segundo plano.
• Aparecer na pesquisa de apps, por exemplo, no Windows ou no Spotlight no macOS.
• Podem definir um número de selo nos ícones para indicar novas notificações. Isso é feito com a APIBadging.
• É possível definir um menu contextual para o ícone com Atalhos de apps.
• Não podem ser instalados duas vezes no 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 de recursos.

Depois de instalar um app no computador, os usuários poderão navegar até 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 seja aberto automaticamente na inicialização.

Instalação no iOS e iPadOS

Não há uma solicitação do navegador para instalar o PWA no iOS e no iPadOS. Nessas plataformas, os PWAs também são conhecidos como apps da Web para a tela inicial. Esses apps precisam ser adicionados manualmente à tela inicial por meio de um menu disponível somente no Safari. Recomendamos que você adicione 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 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 seu PWA quando o usuário o instalar.

É importante entender que a instalação do PWA só estará disponível se o usuário navegar no seu site pelo 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 aplicativo, que pode ser editado 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 no iPadOS, apenas o modo de exibição independente é compatível. Portanto, se você usar o modo de interface mínima, ele voltará para um atalho do navegador. Se você usar a tela cheia, ele voltará para o modo autônomo.

Atenção : em dispositivos Apple, é possível instalar o mesmo PWA várias vezes. Cada instalação terá o próprio armazenamento isolado e será tratada como um app diferente.

PWAs instalados no iOS e iPadOS:

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

O Safari usa uma tecnologia nativa conhecida como Clipes da Web 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 usam o PWA, eles não utilizam uma instância do app Safari (como uma instância do Chrome), usam algo conhecido como Web.app. Por isso, são esperadas pequenas diferenças entre o PWA renderizado no Safari e uma janela do PWA. O Safari e o Web.app usam o mesmo núcleo do WebKit e o mesmo tempo de execução do JavaScript, mas são executados em processos distintos e podem ter implementações diferentes, como armazenamento isolado.

Instalação do Android

No Android, as solicitações de instalação do PWA 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, é possível 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, normalmente na nuvem, em um servidor de cunhagem 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 "cria" (pacotes) e assina um APK para o PWA. Esse processo leva tempo, mas quando o APK estiver pronto, o navegador vai instalar esse app silenciosamente no dispositivo do usuário. Como o APK foi assinado por provedores confiáveis (Play Services ou Samsung), o smartphone o instala sem desativar a segurança, como acontece com qualquer app proveniente da loja. 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
• Aparecer em Configurações, Apps.
• Pode ter vários recursos, como selos, atalhos de apps e capturar links no SO.
• Pode atualizar o ícone e os metadados do app.
• Não pode ser instalado duas vezes.

Você, como desenvolvedor de PWA, não precisa criar ou assinar nenhum pacote quando um WebAPK é usado. Tudo é tratado 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 os usuários do Android, nem sempre é possível criá-los. Quando isso não é possível, os navegadores recorrem à criação de um atalho para o site. Como o Firefox, o Microsoft Edge, o Opera, o Brave e o Samsung Internet (em dispositivos que não são da Samsung) não têm servidores de criação confiáveis, eles criam atalhos. O Google Chrome também fará isso 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 tem um ícone no acesso rápido ou em Configurações, apps;
• Não é possível usar os recursos que exigem instalação.
• Não é possível atualizar os ícones e os metadados do app.
• Podem ser instalados muitas vezes, mesmo usando o mesmo navegador. Quando isso acontecer, todos apontarão para a mesma instância e usarão o mesmo armazenamento.

QuickApps

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

Quando seu PWA é instalado como um QuickApp, os usuários têm uma experiência semelhante à que teriam com atalhos, mas com um ícone marcado com o ícone QuickApps (uma imagem de relâmpago). 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 pelo PWA. O capítulo "Prompt de instalação" aborda padrões para fazer isso e como implementá-los.

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

Catálogos e lojas de aplicativos

Seu PWA também pode ser listado em catálogos e lojas de apps para aumentar o alcance e permitir que os usuários o encontrem no mesmo lugar em que encontram outros apps. A maioria dos catálogos e lojas de apps é 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 em cache os ativos necessários.

Os catálogos e as lojas de apps que aceitam 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 você quiser saber mais sobre como publicar um PWA em catálogos e lojas de apps, confira a CLI BubbleWrap e o PWA Builder.

Aviso : alguns catálogos e lojas de apps têm requisitos técnicos ou comerciais que exigem que o PWA seja aceito para publicação. Confira os requisitos de cada loja antes de começar.

Recursos

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