Facilitando a instalação do Discourse como um PWA

Tenho tido dificuldades para obter a funcionalidade PWA no meu fórum Discourse (estou em um plano hospedado). Acredito que isso seja principalmente um problema do Chrome, e não do próprio Discourse, mas espero que alguém saiba a resposta aqui.

1 Existe alguma maneira de alterar as configurações de instalação no Chrome para o Discourse depois que essas configurações já foram definidas?

Parece que, quando você abre pela primeira vez o aplicativo PWA (Discourse ou outro), o Chrome pergunta se deseja instalá-lo. Se você responder não (intencionalmente ou por acidente), a opção de instalação desaparece. Há alguma forma de recuperá-la?

Da mesma forma, se eu escolher instalar o Discourse como PWA na tela inicial do meu desktop, mas depois remover o ícone, não estou encontrando como “reinstalar” ou de outra forma recuperar o ícone.

2 Existe alguma maneira de adicionar um botão ao seu fórum Discourse para permitir que os usuários o instalem como PWA (tanto no desktop quanto no mobile)? Dessa forma, seus usuários não precisarão passar pelo processo manual de instalação, que a maioria deles não entende.

4 curtidas

Isso pode depender do sistema operacional, mas estou no Linux (Ubuntu) e não poderia ser mais fácil. Tenho um pequeno “+” no lado direito da barra de URL (logo antes do ícone de “favorito”). Clique nele e ele será instalado. Ele muda para um ícone “abrir no Discourse Meta” quando instalado. Se eu desinstalar o PWA, o “+” volta para permitir a instalação novamente.

E se eu entrar no menu do Chrome enquanto navego no meta aqui, tenho de forma semelhante uma linha “Instalar Discourse Meta”, que se torna “Abrir no Discourse Meta” após a instalação, e volta a ser “instalar…” se eu desinstalar.

Então, um ícone na barra de URL + uma linha no menu. Pelo menos, é assim para mim. Não saberia o que pedir mais :wink: Você não precisa depender da mensagem pop-up de forma alguma.

1 curtida

Como você desinstala o PWA? Note que, no meu caso, para o Meta, o Chrome (no Mac) mostra o ícone de “abrir” na barra de endereços, mas não consigo encontrar o ícone real do Meta em lugar nenhum, então não vejo nenhuma maneira de desinstalar.

Onde isso está no “menu do Chrome”?


Acho que a chave é ter um botão no Discourse para instalá-lo nas telas iniciais dos usuários. Meu objetivo são usuários que (como a maioria das pessoas) não sabem o que é um PWA, e quero um botão que eles possam clicar e que diga algo óbvio como “Instalar na tela inicial”.

Note que, AFAIK, em Macs, não há opção de instalação de PWA no Safari.

1 curtida

Abra-o e selecione “Desinstalar Discourse Meta” no menu.
Primeiro passo: Na verdade, instale o PWA. Tenho a sensação de que um ícone de “abrir” pode não ter nada a ver com isso.

Quão longo é realmente o seu menu? É uma das linhas, mais ou menos no meio. Não está em nenhuma subseção, está diretamente no menu principal (pelo menos no Chrome no Ubuntu). Desculpe, é um pouco difícil para mim fornecer uma captura de tela no momento.

Usuários de Mac :joy:

1 curtida

Acho que você está descrevendo algo totalmente diferente do que vejo no Chrome no meu Mac.

Existe alguma maneira de adicionar um botão ao Discourse para instalá-lo como um PWA? Tenho bastante certeza de que é possível fazer isso adicionando código HTML e JavaScript no front-end; estou verificando se alguém já fez isso antes.

Aqui está o Chrome no meu Mac, o menu fica no canto superior direito no PWA:

Encontrei How to provide your own in-app install experience  |  web.dev, talvez você possa criar um Componente de Tema?

Existem vários tópicos muito úteis sobre PWA no Meta. Pode haver mais informações lá…

1 curtida

Ah—o ponto chave é que o aplicativo precisa já estar aberto no modo PWA para ver essa opção (a opção não aparece se aberto no modo de URL normal). No meu próprio fórum, parece que perdi completamente o botão para instalar como PWA (antes estava lá…)

Entendo que criar um botão para o usuário simplesmente poder instalar o aplicativo como PWA provavelmente exigiria um novo tema. Minha pergunta é se alguém já tentou isso antes. Não vejo um tópico no Meta sobre isso especificamente, embora possa estar passando despercebido.

3 curtidas

Talvez @falco tenha alguma opinião sobre isso, mas, na minha visão, isso cabe principalmente aos desenvolvedores dos navegadores.

No Discourse, nos esforçamos muito para atender a todos os requisitos para sermos uma boa PWA e mantemos-nos atualizados com as últimas normas de PWA, pois acreditamos profundamente no conceito de PWA.

8 curtidas

O que são “configurações de instalação”?

O Discourse faz isso nativamente. Se um usuário atender aos dois critérios do Chrome e tiver nível TL1+.

Isso foi ajustado para ocorrer apenas no mobile, pois seria um pouco irritante no desktop. Pelo menos até que o Chrome lance o modo com abas para PWAs no desktop.

6 curtidas

Aha, eu achei que vocês já tivessem feito alguma mágica nisso aqui :slightly_smiling_face:

É essa a configuração que diz: “Exibe o banner do aplicativo DiscourseHub em dispositivos iOS para usuários regulares (nível de confiança 1 ou superior)”?

E (embora eu entenda por que vocês não configuraram para funcionar no Desktop desde o início) — há alguma maneira de fazer isso aparecer no Desktop também? Talvez seja algum código necessário em um plugin.

Eu só quis dizer a capacidade de instalá-lo e, mais tarde, desinstalá-lo. O que eu perdi ficou claro no início da discussão: existe uma opção para isso, mas você só a vê se tiver aberto o aplicativo no modo PWA.

Não. O DiscourseHub é o nosso aplicativo listado na Google Play e na Apple App Store.

E isso está completamente sob o controle do navegador, então não há nada que possamos fazer sobre como a desinstalação funciona.

3 curtidas

Posso confirmar que o PWA está funcionando muito bem no meu Chromebook, pelo menos! Configurei o PWA tanto para o Meta quanto para nosso Discourse interno :flexed_biceps:

3 curtidas

Você precisa iniciar o PWA pelo Launchpad ou clicando duas vezes no ícone em ~/Applications/Chrome Apps, e a opção de desinstalação aparecerá no menu.

Se ele for iniciado em uma janela normal do Chrome em vez de como um PWA, basta excluir o ícone na pasta Chrome Apps. A única diferença entre esses métodos é que o primeiro oferece a opção de limpar os dados do site no Chrome, enquanto o segundo não o faz. :slight_smile:

Entendido. Obrigado por esse detalhe.

Existe alguma configuração no painel de controle que controla isso? Não estou encontrando.

Existe uma maneira de fazer com que o prompt de “instalar” apareça no Discourse para desktop, assim como acontece no mobile?


Obs: É incrível que o Discourse suporte PWAs. PWAs são um presente para os desenvolvedores, avançam a web aberta e trazem todo tipo de outras coisas boas.

1 curtida

Também não consigo descobrir como reinstalar o PWA e gostaria que houvesse uma opção nos menus ou nas configurações que fizesse o mesmo que este aviso:

image

Como faço para acessar isso novamente? Atualmente, no meu Android/Chrome, não consigo encontrar nenhuma maneira de instalar o aplicativo. Tudo o que posso fazer é usar o Chrome para adicionar à Página Inicial. Isso é a mesma coisa?

De alguma forma, não parece ser a mesma coisa, pois isso coloca um ícone do Chrome em cima do ícone do meu site. No entanto, acho que recebo notificações.

No Chrome Beta atual para Android, eu vejo isso no Meta: (“Instalar aplicativo”)

No Chrome Stable atual para Desktop, eu vejo isso no Meta:

@riking Obrigado. Mas, para mim, no Chrome, tenho apenas a opção de instalar na página inicial. E adoraria ver esse diálogo/prompt novamente, mas não sei como fazer.

ATUALIZAÇÃO: você tem razão. Mesmo após desinstalar o Meta, no menu do Chrome tenho a opção “Instalar aplicativo”.

Por que no meu site Discourse: community.morphmarket.com isso não acontece? Usamos SSO, mas não consigo pensar em nada mais especial sobre ele. OU será que é algum “estado” especial em que meu Pixel 3 agora se encontra?

Como mencionei, parece que o aplicativo ESTÁ instalado, pois está em tela cheia — embora isso tenha sido alcançado por meio de “Adicionar à tela inicial” e não “Instalar aplicativo”.

1 curtida

Porque você está usando um JPG para o logotipo do seu site. Vá para as configurações do site e faça o upload de um PNG em manifest icon.

3 curtidas

@Falco, uau, não teria imaginado isso. Convertei a imagem para PNG e atualizei aquele único ícone, mas ainda não observei nenhum efeito relacionado ao PWA. Existe algum cache que precise ser limpo no site ou no meu telefone?

Converti seu logotipo para PNG e o carreguei no meu site de teste rodando a versão mais recente, e funciona perfeitamente. No seu site, ainda vejo um JPG no webmanifest.

Você ajustou os valores padrão da configuração do site qualidade de PNG para JPG?

5 curtidas