Wow, no matter what I do, this file which I’ve converted to PNG shows up as JPEG. At first I thought Preview had done a bad conversion job, but then I used Affinity Photo which should be trustworthy.
I don’t believe I changed that setting since it doesn’t have the ‘reset’ option by it.
When I upload a different image which is a PNG I see the type sticking. There’s something about this file which Discourse really wants to convert. Ideas?
https://github.com/discourse/discourse/commit/70050a8ba365628394fbf7597daf75891328d991
You’ve encountered a known (if obscure!) bug, which was fixed by the above commit. That commit is not yet in a stable release of Discourse, however.
Temporarily setting recompress original jpg quality to 100 should prevent the conversion from happening.
(…and/or you could try dropping the quality of the png you’re exporting to be less than the value of the recompress original jpg quality setting.)
Just make sure you return that setting back to the previous value after your logo has been uploaded!
I think I should get a badge for stumbling onto two Discourse bugs in one week. 
However, that I took both of those steps and yet the file is still being converted to jpeg. I set the setting to 100%, and I saved my image as jpg with 92% and then exported it as PNG (I couldn’t change the quality on the PNG directly?). Any other workaround ideas, or something I might have done wrong?
After switching to the stable branch, I can recreate the (known) problem:
But I can’t recreate the problem with the suggested workaround:
I’m a bit flummoxed, I’m afraid!
It doesn’t appear in Mozilla Firefox either.
Is there a reason as to why that install banner doesn’t appear on iOS devices (especially now that they support PWAs)?
Yeah, it works amazingly on my Pixelbook Go. PWAs are a must-have on Chrome OS.
Because the iOS browser doesn’t have this feature and have no plans on adding it.
What I was suggesting earlier, is why shouldn’t there be a button or link somewhere on the website, for installing the PWA, as explained in this article.
We already have it for years:
Sorry, I’m talking about a less highly visible persistent button/link, perhaps in a menu, for users without the PWA.
The reason I see this as useful is for when we have a user who wants to install the app, we don’t know what state they are in and it takes a lot of energy to do a Q&A. It would be great if there was rock solid 2 step process we could give them: i.e., go to the hamburger menu → Install App. Then we don’t have to worry about their TL or how many visits or if they dismissed a banner or uninstalled in the past or what browser they’re using and how it words the install option.
Probably a lot of the confusion here (including confusion for me) is that there is a different PWA install option depending on the browser:
Android Chrome (ie, default browser): I assume that is where you got the screenshots you posted. So it looks like here, you have an “Install App” in the hamburger menu. Would be great if that was available on all browsers, but sounds like that is not possible right now.
iPhone Safari (default browser): There is no button to install from the hamburger menu. To install, have to go to share icon (square with up arrow), and scroll down to “Add to Home Screen”. I assume from the discussion here that it is not possible to add the button to the hamburger menu. This does save the app to the home screen, though I’m not sure if that alone gives it the PWA functionality, like saving the prior state.
Desktop Chrome: I do not have the install button in the hamburger menu on my Mac Chrome browser. Is it supposed to be there? Could it be added there?
Desktop Safari: I do not have the install button in the hamburger menu on my Mac Safari browser either. Is it supposed to be there? Could it be added there?
Yes what @JQ331 is saying.
Falco’s solution is the Chrome menu. By hamburger menu I mean the discourse one not the browser. Since some people above pointed out that it doesn’t work in Safari or Firefox, this option is browser dependent. Assuming it CAN be installed there, the option just isn’t given, a Discourse menu option seems best. Plus it reminds the user that this option exists, when they may never look into their Chrome menu.
You can’t add install buttons on anything Apple controls, and Apple said multiple times they don’t want to allow developers to create those buttons ever.
It is there for me:
It’s also in the address bar on desktop.
You don’t see it on your website because of the whole JPG logo thing. PWA is a fast moving target, and the criteria changes all the time. I’d suggest using our default release channel if you want maximum PWA compatibility.
I was referring to the Discourse hamburger menu (not the chrome menu). Actually, now I see the android screen shots were also from the chrome menu, not the discourse hamburger menu.
It would be nice to have the button in the discourse hamburger menu–the user would see it more often, and it would be a little clearer in terms of how to instruct users to install as a PWA. Probably not worth a huge developer effort, but would be a helpful touch.
Chromium browsers seem to be the only ones with the install prompt. Mozilla Firefox and Safari are based on different rendering engines.
I have simply added the button by creating a theme component.
Just create new theme component…
add following js code let say in header
<script>
let deferredPrompt; // Allows to show the install prompt
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt fired");
// Prevent Chrome 76 and earlier from automatically showing a prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Show the install button
installButton.hidden = false;
installButton.addEventListener("click", installApp);
});
function installApp() {
// Show the prompt
deferredPrompt.prompt();
installButton.disabled = true;
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("PWA setup accepted");
installButton.hidden = true;
} else {
console.log("PWA setup rejected");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled fired", evt);
});
</script>
And place the following html wherever you require the install button
<button id="install_button" hidden>Install</button>
it is hidden by default and will appear if PWA is not installed.
I have tested it for chrome.
Brilliant! I don’t suppose you’d consider making it a formal theme component? Or better yet, modifying the Hamburger links theme component to include it? Because they is where I would want it!
Can you please upload modified code by which install app button can be shown in hamburger menu???
I can’t seem to get this to work. Admittedly new to all this.
I loaded up the component, added the js to the header, set the component to the default theme.
But then the HTML script – is it possible to have HTML in a post? It doesn’t seem like it. If not, where can I actually usefully put it?
Thanks! Really hoping this could help me.
I guess this will only work on Android?