Making it easier to install Discourse as a PWA

I’ve been struggling getting PWA functionality with my Discourse forum (I’m on a hosted plan). I think this is mainly an issue with Chrome, not Discourse itself, but I’m hoping someone knows the answers here.

1 Is there a way to change the install settings on Chrome for Discourse once those settings have been set?

It seems like when you first open the PWA app (Discourse or other app), chrome asks if you want to install it. If you (either on purpose or accidentally) say no, the option to install goes away. Is there a way to get it back?

Similarly, if I have chosen to install Discourse as a PWA to my desktop home screen, but then get rid of the icon, I’m not finding how to “re-install” or otherwise get the icon back.

2 Is there a way to add a button to your Discourse forum to allow users to install it as a PWA (on both desktop and mobile)? This way, your users don’t have to go through the manual installation process, which most of them don’t understand.

4 Likes

It may depend on the OS, but I’m on Linux (Ubuntu), and it couldn’t be easier. I have a small “+” on the right side of the URL bar (just before the “favorite” icon). Clic on this, and it installs it. It changes to a “open in Discourse Meta” icon when installed. If I uninstall the PWA, the “+” comes back to allow to install it again.

And if I go into Chrome’s menu while surfing meta here, I have similarly a line “Install Discourse Meta”, which becomes “Open in Discourse Meta” once installed, and becomes again “install…” if I uninstall.

So, one icon in the URL bar + one line in the menu. At least, it’s like that for me. I wouldn’t know what to ask more :wink: You don’t have to rely on the popup message at all.

1 Like

How do you uninstall the PWA? Note that in my case, for Meta, Chrome (on Mac) shows me the “open” icon in the address bar, but I can’t find the actual meta icon anywhere, so there’s not a way I am seeing to uninstall.

Where is this in the “Chrome’s menu”?


I think the key is to have a button on Discourse to install it on user’s home screens. I am aiming at users who (like most people) do not know what a PWA is, and I want a button they can click that says something obvious like “Install on home screen”.

Note that, AFAIK on Macs, there is no PWA install option on Safari.

1 Like

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.

6 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