Fully support Android Chrome's "Add to Homescreen"

Contribute Feature

AI-generated summary

Discourse is implementing “Add to Homescreen” support for Android Chrome, allowing users to add a shortcut to their homescreen and launch Discourse in full-screen “app mode”. erlend_sh initiated the discussion, highlighting the feature’s potential to create launch experiences comparable to native applications.

Moter8 shared a link to an article by a Google developer, which includes example code for enabling “App Install Banners”. codinghorror posted an image illustrating the feature.

Falco created a pull request to enhance the feature, making the window standalone and adding the header background color to the Android top bar. tgxworld mentioned that the feature is partially working, but still missing some features supported by Chrome.

DeanMarkTaylor pointed out that Discourse needs to follow specific requirements to fully support “App Install Banners”, including delivering the site over HTTPS, registering a service worker, and having users visit the site twice over two separate days.

Falco later added App Banner Support for Android, which appears on the second visit and can be dismissed by the user. codinghorror expressed concern about nagging users to make every Discourse website a homepage icon.

The discussion concluded with Falco mentioning that he needs to check portrait lock and instantiate the service worker only on Android, and downey asking about changing icons and the option not being available to some users.

1

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
Exploring ServiceWorkers for Discourse
2

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
3

Interesting, here’s what that looks like:

Pasted image463×746 65.1 KB

「いいね！」 3
4

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
5

Quick overview of all platforms:

「いいね！」 5
6

Any good news about supporting this now?

「いいね！」 1
7

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
8

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
9

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

「いいね！」 1
10

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

I made a small video too:

「いいね！」 6
Discourse now works as a PWA in iOS
11

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
12

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.

13

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
14

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

15

secondary
The main background color

Ah ic. :grin: sorry for confusing you

「いいね！」 1
16

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?

17

https://zippy.gfycat.com/DecimalForcefulDartfrog.mp4

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
18

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

19

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
20

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.