Add to homescreen banner on Android

Announcements
62

Google is pushing this further: Deeply Integrated Progressive Web Apps (WebAPKs) are Live for Chrome on Android

On Chrome Dev (behind a flag) when you add your Discourse board to the Home Screen, Android will:

  • Create an APK on the fly for your site and install it on your phone

Screenshot_20170123-152808.png1440×2560 136 KB

  • Create a intent so everytime you click on a link to your forum on any app, email or website it will prompt to open on your new app

Screenshot_20170123-151816.png1440×2560 205 KB

  • Since it’s an app, it will be avaliable on your app launcher, instead of only the home screen (more Android-like)

Screenshot_20170123-151916.png1440×2560 405 KB

  • Use a bigger logo

Screenshot_20170123-151855.png1440×2560 67.7 KB

11 Likes
64

Google official blog post:

And tech article:

A cool thing for Discourse site owners:

We’ve heard from developers like Alibaba that users re-engage 4 times more often with their site added to Home screen. We’ve also seen that tuning the heuristics for add to Home screen to prompt sooner yields to 48% more installs.

Remember, Discourse already support this all by default, just do what’s asked on this topic and you will be ready when Chrome 57 goes live.

6 Likes
65

We lost this feature for a while, but it’s now back.

Google increased the requirements and we needed:

  • Offline page with a service worker. @pmusaraj took care of this, great work!

  • A bigger icon. Now you MUST provide a 512x512 png on the Site Setting mobile_logo_url for it to work.

Also, the new and Improved “Add to Home Screen” (A2HS) is live on current chrome, so the Discourse Android experience is :ok_hand: :100:.

12 Likes
66

I was sort of wondering about that. :slight_smile: Are you back too?

It’d be great, then, if the description of the mobile_logo_url included that caveat.

3 Likes
67

It does! See FIX: Update mobile logo resolution ¡ discourse/discourse@32b3847 ¡ GitHub

3 Likes
68

@Falco and @jomaxro - not sure I understand this requirement.

Does this mean you can’t have a rectangular logo on mobile (for example, if you want to include your logo AND site name–like on meta?) I realize the site setting states:

Should be a square shape

but I have always used a rectangle so I could include logo+site name.

2 Likes
69

@Falco can likely explain this better (and we might be changing some setting names too), but here’s my understanding.

mobile_logo_url is used by your mobile devices to display the app if you add it to your homescreen, and on the splash screen when the “app” is loaded. Once the app is loaded, you’ll see the normal logo url for your site, and the logo small url when you scroll down it a topic.

Edit: OK, i was completely wrong (thanks everyone). Looks like copy changed again. We added a new site setting for Android.:
https://github.com/discourse/discourse/blob/master/config/locales/server.en.yml#L1014

2 Likes
70

I don’t think so. The mobile logo URL is used as the standard header on mobile devices. If left blank, then it defaults to the regular logo.

2 Likes
71

The new setting description for mobile_logo_url states:

The fixed position logo image used at the top left of your mobile site and as your logo/splash image on Android. Recommended size is 512px by 512px.

Seems like those settings would need to be split to support rectangle (logo+name) on mobile.

EDIT: Thanks. I see the newer setting for large_icon_url

3 Likes