Add To Home Screen (iOS, iPadOS)

ClawdiaWolf · June 11, 2023, 8:51am

In hindsight, I probably should have asked if you had checked that.

I tend to forget because I’m a registered developer so I get into the betas pretty early on so I sometimes forget that not everyone updates on release day.

Jonathan5 · June 11, 2023, 8:58am

I agree, as this is the main benefit for privately-hosted sites (compared with the Hub app).

But does the code check that the iOS version is 16.4 or greater? No point mentioning notifications if not (and arguably little point mentioning A2HS at all). I don’t know Ruby but it seems just to check whether you’re on an iPhone or iPad:

github.com

discourse/discourse-apple-add-to-homescreen/blob/94bcee284d97127f60ca07406eb9fc9bc35046ba/javascripts/discourse/components/add-to-homescreen.js#L33


      
          
            discourseLater(() => {
              if (this.isDestroying || this.isDestroyed) {
                return;
              }
          
              this.showPopupTimer = true;
            }, settings.popup_timer);
          }
          
          get shouldRender() {
            const appleMobile = this.capabilities.isIOS || this.capabilities.isIpadOS;
            const isPWA = this.capabilities.isPwa;
            const isHub = this.capabilities.wasLaunchedFromDiscourseHub;
          
            if (
              this.currentUser &&
              this.showPopupTimer &&
              appleMobile &&
              !this.hasHiddenPopup &&
              !isPWA &&

Sorry if I’ve got the wrong end of the stick.

jordan-vidrine · June 12, 2023, 1:42pm

Right end of the stick! This is Javascript though, not Ruby.

Jonathan5 · June 12, 2023, 7:32pm

Right end of the wrong stick!

hoangviet · June 13, 2023, 11:14am

I also want to install Forum on Android like IOS in this topic. How to do on Android?
Thanks everyone

merefield · June 13, 2023, 12:54pm

open Chrome, hit three dots, then “Install App” … hit “Install”.

hoangviet · June 13, 2023, 2:44pm

I mean, on my forum (using discourse platform), I want for android users to install App like this component.

merefield · June 13, 2023, 4:44pm

That is on an android Chrome browser when showing a Discourse forum.

There is also a banner prompt out of the box, e.g.:

github.com

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


      
          this.capabilities.isAndroid &&
          this.get("currentUser.trust_level") > 0 &&
          deferredInstallPromptEvent && // Pass the browser engagement checks
          !window.matchMedia("(display-mode: standalone)").matches && // Not be in the installed PWA already
          !this.capabilities.isAppWebview && // not launched via official app
          !bannerDismissed // Have not a previously dismissed install banner

Renato_Mendes · July 8, 2023, 12:53am

Hey, guys! I just installed this component on my forum, but it has a major bug: both the desktop, mobile and app versions became infinitely scrollable and I couldn’t click on any buttons anymore. My luck was that I hadn’t refreshed the page on my computer, so I could quickly disable it upon noticing what the problem was. I hope this helps you all.

jordan-vidrine · August 21, 2023, 9:58pm

Is this still happening for you? I couldnt repro.

Renato_Mendes · August 22, 2023, 8:17pm

Hey, Jordan! I didn’t try it again – and I don’t intend to.

what · January 17, 2024, 4:16am

The Add to Homescreen prompt appears on the discoursehub app

nathank · January 25, 2024, 5:08pm

I’ve noticed that this appears on Chrome in iOS too - which is unhelpful.

Ideally, it should have a different message for non Safari browsers - i.e.

To install this on your device, open it in Safari

or similar.

dfabulich · January 25, 2024, 7:42pm

iOS Chrome supports “Add to Home Screen” since iOS 16.4.

You do still click a Share button, which looks like a box with an up arrow, but the button appears in the URL bar at the top of the screen in iOS Chrome; the URL bar might be collapsed, so the Share button might not be visible by default.

So, the message doesn’t need to change to say “Open it in Safari,” but it would be nice if it could correctly guess where the Share button is. On iPhone Safari, it appears in the center of the footer, which may be collapsed. On iPad Safari, it appears in the upper-right corner, not collapsed.

On iPhone Chrome, it appears in the upper-right corner, and might be collapsed. On iPad Chrome, it still appears in the upper-right corner, but won’t be collapsed.

dfabulich · January 25, 2024, 7:45pm

I’ve been keeping an eye on how other people guide users to install PWAs on iOS, and a common pattern I’m seeing is to have a clickable banner that opens a new browser tab, pointing to a separate “install the PWA” page that does not scroll.

This ensures that the URL bar won’t be collapsed on that page, making it easier for users to find the Share button and click it.

(Of course, they’ll still have to scroll down to “Add to Home Screen” after opening the Share sheet, which is a pain point, but anything that reduces friction helps…)

nathank · January 26, 2024, 1:03am

I hadn’t appreciated that - was sure I read somewhere that it must be via Safari for PWAs to be installed. That makes the TC pretty spot on then!

An issue that I have come across is that iPhones with significant enterprise control can have web notifications blocked (mine does), which is a real pain.

microhit · April 13, 2024, 7:02pm

Do you want to install ___ forum on this device?

If a user close this popup by mistake, can i expect it to turn it on again?

Firepup650 · April 14, 2024, 4:59am

In my experience, usually just logging out of and back in to a forum triggers it.

microhit · April 18, 2024, 5:59pm

Thanks

Another thing i noticed, when app is installed, the logo doesnt shrink proportionally and looks out of place.

Does anyone know what logo does app utilizes under Branding section ?

Topic		Replies	Views
Feature request: Teach iOS users to A2HS/Push Feature	16	1748	June 1, 2023
Back button in iOS PWA Support	89	14670	April 11, 2019
Making it easier to install Discourse as a PWA Feature	41	3662	August 13, 2022
Inline PDF Previews Theme component official , desktop , pdf-previews	133	11792	November 5, 2024
Where is the prompt to download the mobile app on iPhone? Support mobile , ios-app	7	564	September 12, 2023

Add To Home Screen (iOS, iPadOS)

Related topics