A glimpse of Smart App Banners in the Apple Developer Library.
Apple’s latest iPhone & iPad update, iOS 6, introduced a feature called Smart App Banners. This isn’t a headlining feature. It’s something that only applies to app developers as a means to inform people of their app when visiting their website. What makes it different/important is that it does so in a way that’s helpful, restrained and consistent.
Smart App Banners are great… until you want to do the same for a web-based app. Apple forces you to provide an iTunes Store App ID in order to use their App Banner, and that’s something web apps don’t have. This was a gap waiting to be filled, so I stepped in to take it on.
Introducing Smart *Web* App Banners!
Adding this website to an iPhone’s home screen.
Smart Web App Banner is a jQuery plugin that can be quickly and easily added to any web app to inform visitors of the fact that they can save the web app to their iPhone or iPad’s home screen just like any other app.
I’ve used countless jQuery plugins & dabbled in creating my own before now, but this is the first time I feel confident enough to release this as something that others can use on their own sites. You can see it in action on this site if you’re using an iPhone or iPad with Safari (note: Chrome for iOS can’t add items to the home screen so it isn’t shown), but the example page has it shown at all times with a live theme switcher.
This app banner is freely available for anybody to use seeing that the idea of the original is to provide a consistent look & feel across all websites. This is something we feel everyone should be able to enjoy implementing, customizing and using. A new version (1.1) has already been released since it’s initial reveal (which coincided with the release of iOS 6) adding a new feature that allows you to customize the icon’s label. This, and other features/options, can be found on the official Smart Web App Banner plugin page.
I definitely welcome any feedback you might have & please let me know if you come across any hang-ups… both of which can be done using the support section of the plugin’s page.