Add to Homescreen v3 needs you

It was about time for an Add to Homescreen refresh especially since Chrome is finally the default browser on Android. The script is a complete rewrite full of new features and before going “live” I need your help for beta testing.

V3 comes with lots of new features, but bear in mind that it’s a test edition not yet ready for prime time.

First of all it’s compatible with Android, Chrome for Android to be exact. The latest Google’s OS finally sees Chrome as default browser and between the new features you can spot “Add to homescreen”. It’s a bit buried option in the browser menu, but it’s there and the good news is that mobile Chrome also supports the mobile-web-app-capable meta tag.

The bad news is that it still misses window.navigator.standalone, so there’s no not-hackish way to know if an app has been actually added to the homescreen on Android.

I’ve also added a preliminary compatibility with Windows Phone (disabled for now), I’m waiting for a Nokia phone some when next week, so I’ll probably be adding Microsoft’s phone as well soon.

Another important update is that the script is finally resolution independent. Whatever scale factor you are viewing the page, the call out will be always right-sized and correctly positioned.

The most important new feature regards the ability for the script to detect when the user adds the page to the homescreen.

The only 100% accurate way to know if an app has been added is by checking the window.navigator.standalone variable. Unfortunately that is only available on iOS and if you correctly set the apple-mobile-web-app-capable meta tag.

Add to homescreen was born to support 1-page web applications mostly, not the average website, but the script has been (mis)used basically as an “add a bookmark to this page” and so I decided to add some countermeasures.

Your best bet to avoid bothering your users with unnecessary messages is to show the call out just once! The script lets you set the maximum number of times the call out should be shown, set it to 1 and live happily forever after.

But I understand that’s not enough for you, so I added a detectHomescreen option. It’s opt-in, you have to explicitly activate it and it will try to guess if the user already added the app to the homescreen.

I’m simply adding a hash tag to the page URL (www.example.org#ath), so if the user bookmarks the application with our special token in it, it most likely means that the app has been added (let’s celebrate! and yes there’s also a custom event that is triggered when that happens).

If you are already using location.hash for your businesses, worry not. Add to homescreen can also use query string (www.example.org?ath=) or smart URL (www.example.org/ath/).

Let me stress on this: there’s no native event we can hook to to understand if the user really added (let alone removed) the application to the homescreen. The detect feature is -I’d say- 75 to 85% accurate, meaning you’ll get some false positives (but hardly false negatives).

There’s much more to uncover and I’ll carefully document everything, but now I really need your help beta testing this new version. If you are interested in the script please download the dev-branch and report any problem.

The script uses localStorage, during development you may collect some garbage, to clear up your session you can use addtohomescreen.removeSession() function (have a look at the /debug folder between the demos).

If you are in a hurry you can have a quick look at the online demo (iOS or latest Android).

7 thoughts on “Add to Homescreen v3 needs you”

  1. When using you’re online demo, I don’t get any popup or something,only a blank page. I’ve refreshed many times (with an interval of 3 or 4 seconds).

    Android 4.4, Chrome 34

  2. Same problem on iPhone 5 with iOS 7.1 here… i can´t see any Pop-Up – and when i will make the demo version working for our site it doesn´t come the Pop-Up!

  3. Thanks for the app. I am using 4.2.2 and we are having some issues with the app triggering daily if the people have not added it. It shows once, no matter the option we select, and it never shows again. I have even tried not tracking and I have to dump my cookies to get it to trigger again. This is the same for Android and iPhone. Any advice? Maybe it is a system conflict?

  4. French translate error:
    line 73
    ‘Le menu peut-être accessible en appyant sur le bouton “menu”‘
    must be
    ‘Le menu peut-être accessible en ->appuyant<- sur le bouton "menu"'

  5. Just installed and everything works great so far. Was wondering if you have thought about adding an advanced setting so users can determine the page the home screen icon links to. In my case, I would like the icon to direct to a different page other than my home page.

Comments are closed.