Fully support Android Chrome's "Add to Homescreen"

New in Chrome 39 Beta is an improved add to homescreen experience.

Since Chrome M31, you can set up your web app to have an application shortcut icon added to a device’s homescreen, and have the app launch in full-screen “app mode” using Chrome for Android’s “Add to homescreen” menu item.

New in Chrome M39, you can define the metadata associated with your web application in a JSON-based manifest. The manifest provides a way to wrap metadata about a web application into a single file. Using this metadata in conjunction with Add to Homescreen, you can create launch experiences more comparable to native applications.

Would be very cool to see this fully supported. Could do some interesting things with AppCache while at it.

12 Likes

Some Google dev has written about it here:

Apparently this is now called “App Install Banners”.

The post includes some example code as how to enable this.
This feature is now available in the Chrome 42 beta which will be stable in ~1 month.

2 Likes

Interesting, here’s what that looks like:

3 Likes

Actually someone should create a new thread about these App Banners. (I’ll do it tomorrow if no one else does til then)

I just tried adding to homescreen and it worked fine. Shows the discourse logo and “Discourse Meta”.

So what this topic is about exists and works.

2 Likes

Quick overview of all platforms:

5 Likes

Any good news about supporting this now?

1 Like

It is partially working now though we’re still missing quite a number of features that chrome supports.

For anyone interested, you just have to update the JSON
https://github.com/discourse/discourse/blob/master/app/controllers/manifest_json_controller.rb

with the right values. PR welcomed :slightly_smiling:

4 Likes

Perhaps better worded as “still missing couple of features that chrome requires.”

Whilst the manifest.json and the meta tag are part of what is required there is still a matter of following before the “add to homescreen” will be seen:

  • Site must be delivered over HTTPS (hopefully Let’s Encrypt support will get this one for everybody).
  • Must have a service worker registered on your site (I didn’t spot one in Discourse’s code).
  • The user has visited your site twice over two separate days during the course of two weeks.

(this list might change in the future).

EDIT:

Although I don’t see the service worker requirement on this page:
https://developer.chrome.com/multidevice/android/installtohomescreen

But there is a mention of AppCache.

2 Likes

If seems like “app install banners” is more complicated. Definitely more than just add stuff to the manifest file.

1 Like

By using @tgxworld work, I just added more entries to get a better app feeling.

This PR makes the window standalone (no address bar), adds the header background color to the Android top bar and uses the Discourse background color on the splash screen background so the transition is smoother.

I made a small video too:

6 Likes

I think background_color and theme_color should be moved under colors customization.

Does background_color sets it to grey as per your video? That is making stuff very difficult to read. :slight_smile:

3 Likes

It uses Discourse color customization already, the secondary color for background and header background for theme color.

I used those colors on the video just to show it matches customizations automatically.

Sorry what I meant is that the color customisation should only target either the theme_color or the background_color. I think we’ll want to avoid a case where setting a secondary color ends up affecting the background color as well. For the theme_color, I think it is safe to default to the header color. :smile:

1 Like

I’m not following sorry :sadpanda:

Now it is:

  • Header color on discourse = theme color (Android top bar background)

  • Background color on discourse = background color on splash screen

secondary
The main background color

Ah ic. :grin: sorry for confusing you

1 Like

Discourse just need app banners and browser push notifications to be app level now.

Is the team happy with a dummy service worker just to get app banner rolling?

We app now :laughing:

This PR adds App Banner Support for Android :fireworks:

https://github.com/discourse/discourse/pull/4103

I just got in and made the minimum necessary for the feature, so please see if it is up to Discourse standards.

6 Likes

Wait so we will be nagging every Android user to make every Discourse website a homepage icon??

According to Google it does:

  • Appear on the second visit:
    The user has visited your site at least twice, with at least five minutes between visits.

  • If the user dismiss the banner it never comes back:
    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.

The implementation can get better, we can defer the banner till we feel like.

Also, we can log Dismiss and Accept to make some stats.

8 Likes

Looks like you’re working on this one which is great because this is linked with my earlier post about trying to get as much screen real estate as possible when in landscape mode. I remembered that I’d used this feature to add a home page icon for www.whatpub.com and after doing that, the Google toolbar is missing, i.e. it’s full screen and looks much more like a native app. However when I’ve just tried this with Discourse, it’s stuck in portrait mode - rotate to landscape doesn’t work. Rotate does work with home page shortcuts as www.whatpub.com rotates happily.