Making it easier to install Discourse as a PWA

Open it and select “Uninstall Discourse Meta” in the menu.
First step: Actually install the PWA. I have a feeling an “open” icon may not be related to this at all.

How long is actually your menu ? It’s one of the lines, around the middle. Not in any sub-section, it’s directly in the main menu (at least it is on Chome on Ubuntu). Sorry, it’s a little difficult for me to provide a screenshot currently.

Mac users :joy:

1 Like

I think you’re describing something that’s totally different from what I see on Chrome on my Mac.

Is there a way to add a button to discourse to install it as a PWA? I’m fairly confident there’s a way to do it by adding html and javascript code on the front-end; checking to see if anyone has done it before.

Here’s Chrome on my mac, the menu is top right on the PWA:

I found https://web.dev/customize-install/, perhaps you could build a Theme Component?

There are several very useful PWA Topics on Meta. Might be more info there …

1 Like

Ah–the key is that the app has to be open already in PWA-mode to see that option (option is not there if open with normal url-mode). On my own forum, I seem to have lost entirely the button to install as a PWA (used to be there…)

I understand that building a button for the user to simply be able to install the app as PWA would probably require a new theme. My question is whether folks have tried that before. I don’t see a topic on meta about that specifically, though I may be missing it.

3 Likes

Perhaps @falco might have thoughts on this, but as I see it, this is mostly up to the browser developers.

We do try very hard to tick all the boxes to be a good PWA citizen in Discourse, and stay abreast of all the latest PWA standards because we believe deeply in the PWA concept.

8 Likes

What is a “install setting” ?

Discourse does this out of the box. If a user meets both Chrome criteria and is TL1+.

This is tweaked to only occur on mobile, as it would be a bit annoying on Desktop. At least until Chrome launches tabbed mode for PWAs in Desktop.

5 Likes

Aha, I thought you guys had done some magic on this already :slightly_smiling_face:

Is this the setting that says: “Displays DiscourseHub app banner on iOS devices to regular users (trust level 1 and up)”?

And (while I understand why you don’t have it set out of the box to work on desktop)–is there a way to have this appear on desktop too? Maybe its some code required in a plugin.

I just meant to be able to install it, and then later uninstall it. What I missed was made clear from earlier in the discussion–that there is an option for this, but you only see it if you have opened the app in PWA mode.

No. DiscourseHub is our app listed in the Google Play and Apple App Store.

And that is completely under the browser control, so there is nothing we can do about how uninstall works.

3 Likes

I can confirm PWA is working great on my Chromebook at least! I have PWA set up for both Meta and our internal Discourse :muscle:

3 Likes

You have to launch the PWA from either Launchpad or by double-clicking the icon in ~/Applications/Chrome Apps and the uninstall option will appear on the menu.

If it launches in a normal Chrome window instead of as a PWA, just delete the icon in the Chrome Apps folder. The only difference between these methods is the former will offer to cleanup the site data in Chrome and the latter won’t. :slight_smile:

Got it. Thanks for that detail.

Is there a setting in the dashboard that controls this then? I’m not finding it.

Is there a way to have the “install” prompt appear on discourse for desktop like it does for mobile?


p.s. It’s awesome that Discourse supports PWAs. PWAs are a gift to developers, move the open web forward, and all sorts of other good things.

1 Like

I also cannot figure out how to re-install the PWA, and wish there was an option in menus or settings that would accomplish the same thing as this prompt:

image

How do I get to that again? Right now, on my Android/Chrome I cannot find any way to install the app. All I can do is use Chrome to add to Home Page. Is that the same thing?

Somehow it doesn’t feel like the same thing because that slaps a Chrome icon on top of my site icon. However I do get notifications I think.

On current Chrome Beta Android, I get this on Meta: (“Install app”)

On current Chrome Stable Desktop, I get this on Meta:

image

@riking thank you. But for me, in Chrome I only have the install to home page option. And I would love to get that dialog/prompt again, but don’t know how.

UPDATE: you are right, even after I uninstall meta, in the Chrome menu I have the option to “Install App”.

Why on my discourse site: community.morphmarket.com is that not the case? We use SSO but I can’t think of anything else special about it. OR is it some special “state” that my Pixel 3 is now in?

As I mentioned, it kind of seems like the app IS installed because it’s full screen - yet achieved through “Add to Homescreen” not “Install App”.

1 Like

Because you are using a JPG for your site logo. Go to site settings and upload a PNG in manifest icon.

3 Likes

@Falco, wow would not have guessed that one. I converted the image to PNG and updated that single icon, but have not seen an effect yet related to the PWA. Is there some cache that I need to clear on the site or my phone?

I converted your logo to PNG and uploaded to my test site running latest and it works just fine. On your site I still see a JPG in the webmanifest.

DId you tweak default values for png to jpg quality site setting?

5 Likes

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.
image

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?

3 Likes

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!

3 Likes

I think I should get a badge for stumbling onto two Discourse bugs in one week. :slight_smile:

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?

1 Like