Adicionar à Tela de Início (iOS, iPadOS)

|||
|-|-|-|
| :discourse2: | Resumo | Adicionar à Tela de Início (iOS, iPadOS) adiciona um pop-up para usuários em dispositivos iOS. Este pop-up pode ser dispensado e não aparecerá se você estiver visualizando um fórum Discourse via PWA.
| :hammer_and_wrench:|Repositório| GitHub - discourse/discourse-apple-add-to-homescreen |
| :open_book:|Novo em Temas do Discourse?| Guia para iniciantes sobre como usar Temas do Discourse

Instalar este componente de tema

Funcionalidades

Este componente adiciona um pop-up para usuários em dispositivos iOS. Este pop-up pode ser dispensado e não aparecerá se você estiver visualizando um fórum Discourse via PWA.

iPhone

iPad

Configurações

Nome Descrição
temporizador do pop-up Quanto tempo o pop-up deve esperar antes de aparecer? (em milissegundos)
Tradução Padrão
pwa_text Instale \u003cb\u003e%{siteTitle}\u003c/b\u003e em seu dispositivo iOS. Toque em compartilhar e depois em \u003cb\u003eAdicionar à Tela de Início.\u003c/b\u003e

Este tema inclui duas configurações, uma para o texto exibido e outra para um temporizador que decide quanto tempo esperar até que o pop-up apareça. Essas configurações vêm com seus padrões definidos.

Este pop-up só aparecerá para usuários iOS em um iPhone ou iPad que não estejam usando PWA para visualizar um fórum Discourse. Ele não aparecerá novamente se um usuário clicar no ícone x.

Editando o texto exibido

Você precisa tomar nota ao editar esta área:

Se você quiser editar este texto e quiser que o siteTitle permaneça aqui, certifique-se de manter %{siteTitle} neste texto onde quer que você o veja.


:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

26 curtidas

Ideia fantástica! Obrigado! O problema sempre foi e continuará sendo a descoberta com este recurso.

8 curtidas

No core para Android, usamos uma verificação de nível de confiança >= 1 para mostrar o pop-up, que funciona como um temporizador, mas é melhor, na minha opinião:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/pwa-install-banner.js#L41-L46

Eu me pergunto se este componente deveria usar o mesmo :thinking:

Além disso, adoraria mesclar os banners de instalação PWA do Android e iOS em um único componente no core!

12 curtidas

Sugiro que o texto padrão mencione notificações push e evite mencionar “dispositivo”.

Talvez algo como:

“Adicione o \u003cb\u003e%{siteTitle}\u003c/b\u003e à sua tela inicial para se inscrever em notificações push! Toque em compartilhar e depois em \u003cb\u003eAdicionar à tela inicial\u003c/b\u003e.”

Seria especialmente útil se a equipe do Discourse fizesse alguns testes A/B sobre isso, para encontrar a linguagem mais provável de fazer os usuários se inscreverem para notificações push.

Aqui estão algumas perguntas que tenho:

  • É melhor dizer “Adicionar” ou “Instalar”?
  • É melhor mencionar notificações push aqui ou adiar a menção delas?
  • Se mencionarmos a instalação, devemos dizer que é um “aplicativo” sendo instalado? Um “web app”?
  • O iPad tem mais espaço. É melhor usar mais palavras?
6 curtidas

No iPad, este banner não é ótimo. O banner aparece na parte inferior da tela, mas o botão de compartilhamento está na parte superior. Vejo que há uma pequena seta para cima :up_arrow:, como se para indicar “ei, o botão está no cabeçalho”, mas duvido que isso seja suficiente. (Vocês fizeram testes de usuário sobre isso? Vocês viram funcionar para usuários de iPad não especialistas?)

Também não ajuda o fato de estarmos pedindo ao usuário para “tocar em compartilhar”, mas o botão não é visivelmente chamado de “compartilhar”. É uma pequena caixa com uma seta.

image

Anos atrás, eu costumava usar \u003chttps://github.com/cubiq/add-to-homescreen\u003e, que desenhava um pop-up como este:

Eu adoraria se o Discourse fizesse algo mais parecido com isso.

Agora, o flyout é meio frágil (e se o botão se mover?), mas acho que também está tudo bem se o botão não estiver exatamente onde o flyout aponta, desde que esteja mais ou menos no lugar certo.

Historicamente, também era perigoso que o botão pudesse parecer diferente de uma versão do iOS para outra. Mas o botão de compartilhamento não mudou de forma desde o iOS 7, e não há razão particular para pensar que mudará no iOS 17, então acho que uma abordagem como essa funcionaria no iPad, com um pequeno flyout apontando para onde o botão de Compartilhar provavelmente está na barra de cabeçalho.

3 curtidas

Este é um bom feedback, Dan.

Eu poderia ver o benefício de mostrar este flyout na parte superior da página quando um iPad está sendo usado.

Para ser bem sincero, o motivo pelo qual não incluímos esse ícone nesta versão do componente é que este ícone só está disponível no Font-Awesome 6, e o Discourse não suporta essa versão ainda.

2 curtidas

É exatamente por isso que defini este texto para ser editável por um administrador. Cada pessoa pode ter uma opinião diferente sobre o que este pop-up deve dizer, então sinta-se à vontade para editar como desejar.

1 curtida

Não acho que eu tenha o poder de testar A/B no meu fórum. Seria algo que vocês poderiam testar A/B?

Ele informa ao usuário por que ele pode querer fazer isso?

1 curtida

Não tenho certeza se entendi sua pergunta. Eu arriscaria dizer que, se eles já estão no fórum, a razão para instalá-lo em seu dispositivo iOS seria autoevidente.

Meu ponto é que os usuários da Apple estão familiarizados apenas com a instalação de aplicativos pela App Store. Pouquíssimos entenderão o que é um PWA. Menos ainda saberão o benefício potencial da instalação.

Colocar notificações do navegador atrás do A2HS é uma ótima jogada da Apple. Resolve completamente os primeiros problemas com notificações no desktop.

Como informamos aos usuários o que eles ganham além de outro ícone na tela inicial?

3 curtidas

Eu discordo completamente (mas espero que educadamente). Eu administro um fórum Discourse e tenho ele e outros adicionados à Tela de Início. Só pensei em fazer isso depois de discussões aqui, e não vi nenhum benefício (as notificações não funcionam), então continuei usando o aplicativo Hub.

2 curtidas

Acho que ambos podemos estar fazendo suposições aqui sem coletar feedback dos administradores que instalaram isso.

Dito isso, o texto é 100% personalizável, então se um administrador sentir a necessidade de esclarecer ainda mais, ele poderá fazê-lo com bastante facilidade.

Meu feedback tem sido especificamente de clientes, após mencionar que o PWA era um passo necessário para habilitar notificações.

Vai variar entre as comunidades, mas na era do ‘peça ao aplicativo para não rastrear’, os usuários não são tão propensos a seguir instruções cegamente sem algum benefício percebido. Dizer a um usuário como instalar o PWA sem explicar por que definitivamente enterra a notícia principal.

Eu tive esse problema com algumas das minhas instâncias auto-hospedadas e modificar a push notification time window mins para 0 resolveu para mim e para a maioria dos meus usuários. Como um efeito colateral, isso também torna o comportamento mais próximo de como as notificações do aplicativo Hub funcionam em termos de tempo.

3 curtidas

Tive que adicionar este plugin manualmente.

Tive um repositório em branco ao clicar com o instalador.

Desculpe por isso, deve estar corrigido agora.

1 curtida

Componente legal! Gosto de como ele é implementado perto dos botões de compartilhamento. Concordo que devemos integrar isso ao core e ao banner do Android.

Tenho um mockup antigo não implementado de um tempo atrás que pode abordar alguns pensamentos mencionados aqui:

A ideia com o texto aqui :point_up: era ter algum tipo de “o que eu ganho com isso” claro — e literalmente mostrar o logotipo do site de uma forma parecida com um aplicativo para deixar um pouco mais claro do que se trata.

Isso foi prototipado para Android, o que facilita as coisas porque você pode incluir um botão que adiciona diretamente o PWA ao seu dispositivo.

Infelizmente, o iOS ainda exige que você passe pela folha de compartilhamento para chegar a essa ação… mas acho que podemos ter um botão que aciona as opções de compartilhamento? (já fazemos isso para clicar no ícone de compartilhamento em posts no iOS…)

4 curtidas

Não no iOS. Você pode abrir uma folha de compartilhamento com navigator.share(), mas ela não tem o botão “Adicionar à tela inicial” nela. Para A2HS, o usuário tem que clicar manualmente no pequeno botão de compartilhamento; daí a necessidade de algo como isso.

1 curtida

Acontece que eu ainda estava em uma versão antiga do iOS (pré-16.4): Live notifications: "Notifications are not supported on this browser. Sorry."