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 (
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).