Add to homescreen banner on Android

feedback

(Rafael dos Santos Silva) #1

Continuing the discussion from Fully support Android Chrome's "Add to Homescreen":

If any of you guys visited meta on the last days with an Android Phone (using the default Chrome Browser) you may have seen this:

This is Google App Banner feature, and it’s live on latest Discourse.

Clicking Add to Home Screen will create a shortcut on your phone home screen, using your forum name and icon, that when clicked will show a splash screen like this:

The background color is the same of your board and the backgroud of the Android top bar will match the background of your header background.

After that your forum will open, and without the Chrome location bar, giving it an app feel.

It’s also easier to spot it on Android app switcher, since it has it own entry like an app,

Also, I think it makes the page way more difficult to be garbage collected from ram, but I need to confirm if this is true or just my bias.

This is it. I think this will make your users come back more to your community!

FAQ:

It isn’t showing for me!

  • your site must be https, this will never appear if your site is plain old http

  • you must set a 512x512 png on large_icon_url site setting

  • Google controls when the banner will appear, the today default is: The user has visited your site at least twice, with at least five minutes between visits.


Android "Desktop App Button"
Fully support Android Chrome's "Add to Homescreen"
Native app install banner for Android and iOS
How does the option advertizing for the app looks like?
Discourse as a Progressive Web App
Logo parameters (tab logo and android homscreen logo) conflicts
Criteria to ensure Discourse instance will work as a Chrome webapp on mobile
Native app install banner for Android and iOS
Requirements to run the Android App
Show a loader starting page for slow connections?
Discourse create new topic user experience on mobile
Progressive Web Application (PWA)
Copy/paste in latest Chrome on Android
(Dean Taylor) #2

In order for this to “Add to home screen” banner / button to show both of the following must be true:

  • Your site is served over HTTPS.
  • You can add HTTPS / SSL / TLS support to your own site via Setting Up Let’s Encrypt with Discourse Docker.
  • AND the already mentioned: The user has visited your site at least twice, with at least five minutes between visits.

Google also comments:

If a user dismisses the banner, will it appear again? No. Not unless the user clears their history. We want to make sure users have a good experience. We will likely be changing all the heuristics over time.

Will the criteria for App Banner activation change over time? The criteria for App Banner activation change over time.

We can’t give specifics right now but as we better understand what makes an experience the user will want to install we will want to make sure the criteria are updated and also well understood for developers.


(Dave McClure) #3

I’m liking this, but now I need to be even more creative to find out which topic I’m inon mobile since the address bar was the best workaround for that:


(Alessio Fattorini) #4

I really love this. Just added on my home screen. Looking forward seeing it on my community!

What about notifications?


(Rafael dos Santos Silva) #5

Notifications is the last frontier for a more mobile experience for Discourse now!

But is way harder than the rest, and the implementation of Chrome and Firefox is very different.

@tgxworld already did a lot of the work tough.


(Jeff Wong) #6

Digging it!

One minor question though – which setting controls the image on the splash screen? It’s popping up for meta, but not for my install. I’ve got all the ‘required’ logo URL stuff up, but no images appear. It’s a minor thing, but the icon gives it that lovely polish feeling.


(Rafael dos Santos Silva) #7

apple_touch_icon_url


(Jeff Wong) #8

Lemme clarify - I’m able to see the image icon on the home screen but it’s still not popping up on the splash screen.

I added to home screen before setting the apple_touch_icon_url. After changing the site setting, I removed the shortcut, and re-added it from the Chrome menu. The icon shows up on the home screen properly, but the splash screen only shows the site title, and no icon appears.

Not sure if matters to mention, but all of my logo URLs are specified as relative /Uploads/...

I attempted to clear cache, reload, and re-add the shortcut but no dice.


(Rafael dos Santos Silva) #9

This probably the cause, will test here! Thanks for the report!


(Jeff Wong) #10

Appreciated :slight_smile:

Picture worth a thousand words. Tested with absolute URLs, but no change, and a restart or two in chrome. I’ll keep at it and let you know if I hit a fix here.


(Rafael dos Santos Silva) #11

Is the forum public? Can you share the url?


(Jeff Wong) #12

It’s not public, but I could throw you an invite, if you wouldn’t mind PMing an email


(Skylar Buffington) #13

Of course, it’s easy to add an app to the home screen if the user changes their mind or accidentally removes the shortcut.


Perhaps this could be renamed to something platform agnostic? Or it could have a note added that indicates this image is used for other purposes?


It also has to be Chrome 51 or newer, right? I usually stick with Chrome Beta on mobile for day-to-day use. It could be a few months until the average person sees the banner on their device.


(Charles Walter) #14

@falco is this a plugin or will it be added to all discourse sites?


(Rafael dos Santos Silva) #15

I think it’s avaliable from chrome 42 up. So it’s more than a year of availability, everyone has it.

It’s on core, so everyone gets it. :wink:


(Rafael dos Santos Silva) #16

It’s working for me :laughing:


(Jeff Wong) #17

Thanks for checking in on it, I’ll let you know if I manage to fix my dumb browser. :grin:


(Jeff Atwood) #18

@Falco you may wish to look into this:

I am deploying latest there just in case.


(Alan Tan) #19

Hmm after using the “app” version for a few days… I don’t seem to be able to refresh a page on the “app” version unlike a browser where I can do that.


(Rafael dos Santos Silva) #20

I just scroll down from top like an app :smile:.