Faciliter l'installation de Discourse en tant que PWA

[John_Lehmann]

Wow, peu importe ce que je fais, ce fichier que j’ai converti en PNG s’affiche toujours en JPEG. Au début, je pensais que Preview avait fait un mauvais travail de conversion, mais j’ai ensuite utilisé Affinity Photo, qui devrait être fiable.

Je ne pense pas avoir modifié ce paramètre, car il n’y a pas d’option « réinitialiser » à côté.

Lorsque j’upload une autre image qui est un PNG, le type reste collé. Il y a quelque chose dans ce fichier que Discourse semble vraiment vouloir convertir. Des idées ?

[jamie.wilson]

FIX: should_alter_quality should respect png_to_jpg_quality (#12055)

Vous avez rencontré un bug connu (bien qu’obscure !), qui a été corrigé par le commit ci-dessus. Ce commit n’est pas encore inclus dans une version stable de Discourse, cependant.

La temporaire modification de recompress original jpg quality à 100 devrait empêcher la conversion de se produire.

(…et/ou vous pouvez essayer de réduire la qualité du PNG que vous exportez pour qu’elle soit inférieure à la valeur du paramètre recompress original jpg quality.)

Assurez-vous simplement de remettre ce paramètre à sa valeur précédente après le téléchargement de votre logo !

[John_Lehmann]

Je pense que je devrais obtenir un badge pour avoir découvert deux bugs de Discourse en une semaine.

Cependant, j’ai effectué ces deux étapes et le fichier est toujours converti en JPEG. J’ai réglé le paramètre à 100 %, j’ai enregistré mon image en JPG avec 92 % de qualité, puis je l’ai exportée en PNG (je n’ai pas pu modifier la qualité directement sur le PNG ?). Avez-vous d’autres idées de contournement, ou pensez-vous que j’ai pu faire une erreur quelque part ?

[jamie.wilson]

@John_Lehmann

Cependant, j’ai effectué ces deux étapes et le fichier est toujours converti en JPEG.

Après être passé sur la branche stable, je peux reproduire le problème (connu) :

Mais je ne parviens pas à reproduire le problème avec la solution de contournement suggérée :

Je suis un peu perplexe, je crains !

[anon82467725]

@JQ331

Notez que, à ma connaissance sur les Mac, il n’y a pas d’option d’installation PWA dans Safari.

Elle n’apparaît pas non plus dans Mozilla Firefox.

@Falco

Discourse le fait nativement. Si un utilisateur remplit les deux critères de Chrome et est de niveau TL1 ou supérieur.

Y a-t-il une raison pour laquelle la bannière d’installation n’apparaît pas sur les appareils iOS (surtout maintenant qu’ils prennent en charge les PWA) ?

@codinghorror

Je peux confirmer que la PWA fonctionne parfaitement sur mon Chromebook, du moins ! J’ai configuré la PWA pour Meta et notre Discourse interne

Oui, cela fonctionne incroyablement bien sur mon Pixelbook Go. Les PWA sont indispensables sur Chrome OS.

[Falco]

@anon82467725

Y a-t-il une raison pour laquelle cette bannière d’installation n’apparaît pas sur les appareils iOS (surtout maintenant qu’ils prennent en charge les PWA) ?

Parce que le navigateur iOS ne possède pas cette fonctionnalité et n’a pas prévu de l’ajouter.

[John_Lehmann]

Ce que je suggérais plus tôt, c’est pourquoi il n’y aurait pas un bouton ou un lien quelque part sur le site web pour installer la PWA, comme expliqué dans cet article.

[Falco]

Nous l’avons déjà depuis des années :

Encourage members to install WebApp

We already have a PWA install promotion banner built-in. It is triggered after a logged in user hits Trust Level 1, and shows a banner at the top promoting the install. [Screenshot_20200107-173403]

[John_Lehmann]

Désolé, je parle d’un bouton/lien persistant moins visible, peut-être dans un menu, pour les utilisateurs sans PWA.

La raison pour laquelle je trouve cela utile est que, lorsque nous avons un utilisateur qui souhaite installer l’application, nous ne savons pas dans quel état il se trouve et il faut beaucoup d’énergie pour mener une Q&A. Ce serait formidable de pouvoir leur proposer un processus en deux étapes infaillible : par exemple, aller dans le menu hamburger > Installer l’application. Ainsi, nous n’avons pas à nous soucier de leur langue, du nombre de visites, de l’abandon d’une bannière, d’une désinstallation précédente ou du navigateur qu’ils utilisent et de la manière dont il libellera l’option d’installation.

[Falco]

@John_Lehmann

Ce serait formidable si nous pouvions leur proposer un processus en deux étapes infaillible.

C’est littéralement le flux de travail existant

@John_Lehmann

Accéder au menu hamburger

@John_Lehmann

Installer l’application

[JQ331]

@Falco

C’est littéralement le flux de travail existant

Probablement qu’une grande partie de la confusion ici (y compris pour moi) vient du fait qu’il existe une option d’installation PWA différente selon le navigateur :

1. Chrome Android (c’est-à-dire le navigateur par défaut) : Je suppose que c’est là que vous avez récupéré les captures d’écran que vous avez publiées. Il semble donc qu’ici, vous ayez une option « Installer l’application » dans le menu hamburger. Ce serait génial si cela était disponible sur tous les navigateurs, mais il semble que ce ne soit pas possible pour le moment.

2. Safari iPhone (navigateur par défaut) : Il n’y a pas de bouton pour installer depuis le menu hamburger. Pour installer, il faut aller sur l’icône de partage (carré avec une flèche vers le haut) et faire défiler jusqu’à « Ajouter à l’écran d’accueil ». Je suppose, d’après la discussion ici, qu’il n’est pas possible d’ajouter ce bouton au menu hamburger. Cela permet tout de même d’enregistrer l’application sur l’écran d’accueil, bien que je ne sache pas si cela seul lui confère les fonctionnalités PWA, comme la sauvegarde de l’état précédent.

3. Chrome Bureau : Je n’ai pas le bouton d’installation dans le menu hamburger sur mon navigateur Chrome Mac. Est-ce censé être là ? Pourrait-il y être ajouté ?

4. Safari Bureau : Je n’ai pas non plus le bouton d’installation dans le menu hamburger sur mon navigateur Safari Mac. Est-ce censé être là ? Pourrait-il y être ajouté ?

[John_Lehmann]

Oui, ce que dit @JQ331.

La solution de Falco est le menu Chrome. Par menu hamburger, j’entends celui de Discourse, pas celui du navigateur. Puisque certains ont signalé ci-dessus que cela ne fonctionne pas dans Safari ou Firefox, cette option dépend du navigateur. En supposant qu’elle puisse y être installée, l’option n’est tout simplement pas proposée ; une option de menu Discourse semble donc préférable. De plus, cela rappelle à l’utilisateur que cette option existe, alors qu’il pourrait ne jamais consulter le menu de Chrome.

[Falco]

Vous ne pouvez pas ajouter de boutons d’installation sur tout ce qui est contrôlé par Apple, et Apple a déclaré à plusieurs reprises qu’ils ne souhaitent pas permettre aux développeurs de créer ces boutons, jamais.

@JQ331

Chrome sur bureau : Je n’ai pas le bouton d’installation dans le menu hamburger sur mon navigateur Chrome Mac. Est-ce censé être là ? Est-il possible de l’ajouter ?

Il est présent pour moi :

Il se trouve également dans la barre d’adresse sur bureau.

Vous ne le voyez pas sur votre site à cause de toute l’histoire avec le logo JPG. Les PWA sont une cible en évolution rapide, et les critères changent constamment. Je vous suggère d’utiliser notre canal de publication par défaut si vous souhaitez une compatibilité PWA maximale.

[JQ331]

@Falco

Il est là pour moi :

Je faisais référence au menu hamburger de Discourse (et non au menu Chrome). En fait, je vois maintenant que les captures d’écran Android provenaient également du menu Chrome, et non du menu hamburger de Discourse.

Ce serait bien d’avoir le bouton dans le menu hamburger de Discourse — l’utilisateur le verrait plus souvent, et ce serait un peu plus clair en termes d’instructions pour l’installation en tant que PWA. Probablement pas justifié par un gros effort de développement, mais ce serait une touche utile.

[anon82467725]

@John_Lehmann

Étant donné que certaines personnes ont souligné ci-dessus que cela ne fonctionne pas dans Safari ou Firefox, cette option dépend du navigateur.

Les navigateurs Chromium semblent être les seuls à afficher l’invite d’installation. Mozilla Firefox et Safari sont basés sur des moteurs de rendu différents.

[surajmpatel (Suraj Patel)]

J’ai simplement ajouté le bouton en créant un composant de thème.

Il suffit de créer un nouveau composant de thème…

Ajoutez le code JavaScript suivant, par exemple dans l’en-tête :

<script>
    let deferredPrompt; // Permet d'afficher l'invite d'installation
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("beforeinstallprompt déclenché");
  // Empêcher Chrome 76 et versions antérieures d'afficher automatiquement une invite
  e.preventDefault();
  // Stocker l'événement pour pouvoir le déclencher plus tard.
  deferredPrompt = e;
  // Afficher le bouton d'installation
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // Afficher l'invite
  deferredPrompt.prompt();
  installButton.disabled = true;

  // Attendre que l'utilisateur réponde à l'invite
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("Configuration PWA acceptée");
      installButton.hidden = true;
    } else {
      console.log("Configuration PWA rejetée");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("appinstalled déclenché", evt);
});
</script>

Et placez le code HTML suivant à l’endroit où vous souhaitez afficher le bouton d’installation :

<button id="install_button" hidden>Installer</button>

Il est masqué par défaut et n’apparaîtra que si la PWA n’est pas installée.

Je l’ai testé sur Chrome.

[nathank (Nathan Kershaw)]

@surajmpatel

Création d’un composant de thème.

Brillant ! N’auriez-vous pas l’intention de le transformer en composant de thème officiel ? Ou mieux encore, de modifier le composant de thème des liens du menu hamburger pour l’inclure ? C’est là que je souhaiterais le voir !

[john_scalton]

Pourriez-vous s’il vous plaît télécharger le code modifié permettant d’afficher le bouton d’installation de l’application dans le menu hamburger ?

[bengrover]

Je n’arrive pas à faire fonctionner cela. Je suis nouveau dans tout ça, je l’avoue.

J’ai chargé le composant, ajouté le js à l’en-tête, défini le composant sur le thème par défaut.

Mais ensuite le script HTML – est-il possible d’avoir du HTML dans un post ? Il ne semble pas que ce soit le cas. Sinon, où puis-je le mettre utilement ?

Merci ! J’espère vraiment que cela pourra m’aider.

[th21]

Je suppose que cela ne fonctionnera que sur Android ?