# Fully support Android Chrome's "Add to Homescreen"

**URL:** https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067
**Category:** Feature
**Created:** [2014年十月13日 05:25 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067 "2014-10-13T05:25:07Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2014年十月13日 05:25 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/1 "2014-10-13T05:25:08Z")

</div>

New in Chrome 39 Beta is an improved [add to homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen) 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](http://docs.webplatform.org/wiki/apis/appcache/ApplicationCache) while at it.

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [2015年三月12日 21:58 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/2 "2015-03-12T21:58:26Z")

</div>

Some Google dev has written about it here:

> **[How to provide your own in-app install experience  |  web.dev](https://web.dev/articles/customize-install)**
>
> Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015年三月12日 22:05 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/3 "2015-03-12T22:05:31Z")

</div>

Interesting, here’s what that looks like:

 ![](https://global.discourse-cdn.com/meta/original/3X/b/c/bc0a58bb22c798b93ef42fa8c2470032be9c370c.png)

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [2015年三月12日 22:19 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/4 "2015-03-12T22:19:49Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2015年八月23日 12:06 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/5 "2015-08-23T12:06:50Z")

</div>

Quick overview of all platforms:

- [Android/Chrome](https://developer.chrome.com/multidevice/android/installtohomescreen)

- [iOS/Safari](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)

- [Firefox](https://developer.mozilla.org/en-US/docs/Web/Manifest)

- [Windows/IE11](https://msdn.microsoft.com/en-us/library/dn455106.aspx)

---

<div class="post-metadata">

### Author: ![zh99998](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zh99998/32/100179_2.png) [@zh99998](https://meta.discourse.org/u/zh99998)
#### Post date: [2016年一月12日 08:11 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/6 "2016-01-12T08:11:55Z")

</div>

Any good news about supporting this now?

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [2016年一月12日 09:09 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/7 "2016-01-12T09:09:43Z")

</div>

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](https://github.com/discourse/discourse/blob/master/app/controllers/manifest_json_controller.rb)

with the right values. PR welcomed 🙂

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [2016年一月12日 12:49 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/8 "2016-01-12T12:49:30Z")

</div>

> [@tgxworld](#):
>
> … still missing quite a number of features that chrome supports.

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](https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android) before the “add to homescreen” will be seen:

- Site must be delivered over HTTPS (hopefully [Let’s Encrypt support](https://meta.discourse.org/t/support-for-lets-encrypt/22308) 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](https://developer.chrome.com/multidevice/android/installtohomescreen)

But there is a mention of AppCache.

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [2016年一月12日 13:39 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/9 "2016-01-12T13:39:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年三月21日 02:23 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/10 "2016-03-21T02:23:50Z")

</div>

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.

[https://github.com/discourse/discourse/pull/4099](https://github.com/discourse/discourse/pull/4099)

I made a small video too:

https://www.youtube.com/embed/O4wf77eLFoo?feature=oembed&wmode=opaque

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [2016年三月21日 04:28 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/11 "2016-03-21T04:28:22Z")

</div>

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. 🙂

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年三月21日 12:28 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/12 "2016-03-21T12:28:38Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [2016年三月21日 13:30 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/13 "2016-03-21T13:30:56Z")

</div>

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. 😄

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年三月21日 13:33 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/14 "2016-03-21T13:33:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [2016年三月21日 13:40 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/15 "2016-03-21T13:40:28Z")

</div>

> secondary  
> The main background color

Ah ic. 😁 sorry for confusing you

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年三月21日 13:43 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/16 "2016-03-21T13:43:10Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年三月22日 03:32 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/17 "2016-03-22T03:32:02Z")

</div>

[https://zippy.gfycat.com/DecimalForcefulDartfrog.mp4](https://zippy.gfycat.com/DecimalForcefulDartfrog.mp4)

We app now 😆

This PR adds App Banner Support for Android 🎆

[https://github.com/discourse/discourse/pull/4103](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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2016年三月22日 03:46 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/18 "2016-03-22T03:46:28Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年三月22日 03:50 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/19 "2016-03-22T03:50:23Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Rob\_Nicholson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rob_nicholson/32/63483_2.png) [@Rob\_Nicholson](https://meta.discourse.org/u/Rob_Nicholson)
#### Post date: [2016年三月23日 14:40 UTC](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067/20 "2016-03-23T14:40:59Z")

</div>

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](http://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](http://www.whatpub.com) rotates happily.

[下一頁](https://meta.discourse.org/t/fully-support-android-chromes-add-to-homescreen/21067.md?page=2)
