Add2Home (Apple springboard) your Joomla site
Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2.
- Can Places a floating balloon inviting the user to add your application to the home screen.
- Support custom Startup image
- Custom icon for your site (iphone, ipad and ipod optimized icon are supported)
- Custom viewport option to specify how your site will look like (screen ratio, initial height and size, user resizable)
How it Works
The message appears after 2 seconds (customizable) from page load, and is destroyed after 20 seconds (also customizable). The balloon enters and exits the screen with a quick configurable animation: drop from top, bubble from bottom or fade in/out.
The balloon can be dismissed any time by tapping the small “x” icon.
The script also checks the user locale and shows the message in an appropriate language. So far the following languages are supported:
Catalan Chinese (Traditional and Simplified) Danish Dutch English Finnish French German Greek Hebrew Hungarian Italian Japanese Korean Norwegian Portuguese Russian Spanish Swedish Thai Turkish
Download from http://www.waltercedric.com/downloads/add2home.html
Install like any other plugin using Joomla! installer.
- animationIn: the animation the balloon appears with. Can be: drop, bubble and fade. Default: drop.
- animationOut: the animation the balloon exits with. Can be: drop, bubble and fade. Default: fade.
- startDelay: milliseconds to wait before showing the message. Default: 2000
- lifespan: milliseconds to wait before hiding the message. Default: 20000
- bottomOffset: distance in pixels from the bottom (iPhone) or the top (iPad). Default: 14
- expire: minutes before displaying the message again. If you don’t want to show the message at each and every page load, you can set a timeframe in minutes. The message will # be shown only one time inside that timeframe. Default: 0 (=always show).
- message: Define a custom message to display OR set a fixed locale. If you don’t like the default message we have chosen for you, you can add your own. You can also force a language by passing the respective locale (eg: ‘en_us’ will always display the English message). Default: ” (=script decides).
- touchIcon: if set to true, the script checks for link rel="apple-touch-icon" in the page HEAD and displays the application icon next to the message. Default: false.
- arrow: shows the little arrow pointing the bottom bar “add” icon. For custom designs you may want to disable it (ie: set it to false). Default: true.
Custom Startup images
Specifying a startup image is available in iOS 3.0 and later. On iOS, similar to native applications, you can specify a startup image that is displayed while your website application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used.
You may need to provide 3 startup images
- On iPhone and iPod touch, the image must be 320 x 460 pixels and in portrait orientation.(20 pixels are used to display the top status bar with information about the phone carrier, battery, time, etc.). If you use PNG images with the same proportions Safari should be able to re-scale them.
- On iPad, the image must be 748 x 1024 pixels pixels and in lanscape orientation.(20 pixels are used to display the top status bar with information about the phone carrier, battery, time, etc.). If you use PNG images with the same proportions Safari should be able to re-scale them.
- On iPad, the image must be 768 x 1004 pixels pixels and in portrait orientation.(20 pixels are used to display the top status bar with information about the phone carrier, battery, time, etc.). If you use PNG images with the same proportions Safari should be able to re-scale them.
It is possible to override the default message to invite user to add your site to their home screen. In order to be able to support all your visitor locales, you'll have to edit manually the file /media/plg_system_add2home/add2home.js
This is a very important feature that I highly encourage you to use (ie: set it to true). What it does is to show the message to returning visitors only. The first time a user accesses your site the message is not shown. If the user comes back within a 28 days timeframe, the message is finally presented.
To prevent the balloon from appearing once the app has been added to the home screen
To prevent the balloon from appearing once the app has been added to the home screen, remember to set also apple-mobile-web-app-capable to true.
Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.
For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an Safari on iOS-specific web application, you should set the width to the width of the device.
“email” describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements.
When referring to the dimensions of a device, you should use the constants described in “number” instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.
You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.
For example, to set the viewport width to the width of the device, add this to your HTML file:
<meta name = "viewport" content = "width = device-width">
To set the initial scale to 1.0, add this to your HTML file:
<meta name = "viewport" content = "initial-scale = 1.0">
To set the initial scale and to turn off user scaling, add this to your HTML file:
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
Use the Safari on iOS console to help debug your webpages as described in “Debugging”. The console contains tips to help you c
Speed of webapp mode
When you launch a bookmarked webapp from your home screen rather than launching it from inside Safari, "it runs roughly two to two and a half times slower than it does in the browser." Webapps launched from the home screen suffer from other diminished capabilities as well, including problems storing data offline. Apple want you to not use webapps so you have to buy native apps through the App Store, but right now the only takeaway is this: For now, if you're a big mobile webapp user, you'll want to open your favorite webapps after you've launched Safari—and avoid launching the webapps directly from the App links you've added to your home screen. Opening these web apps on the Safari browser will help bypass any limitations imposed by Apple on these shortcut icons of these websites. It has also been pointed out by LifeHacker that keeping Safari open and then launching these web apps can help load the websites quicker and also help store data offline more efficiently.
- BUG: The Custom Message was not always properly working.
- BUG: Fix 'null' in balloon text when no icon can be found.
- NEW: New setting to let the user close the balloon. Default: true.
- NEW: Ukrainian localization added.
- Better administrator UI,
- Inline description have been improved,
- Online Wiki has been updatedBetter default for “Returning Visitor” now set to TRUE… This is a very important feature that I highly encourage you to use (ie: set it to true). What it does is to show the message to returning visitors only. The first time a user accesses your site the message is not shown. If the user comes back within a 28 days timeframe, the message is finally presented. To prevent the balloon from appearing once the app has been added to the home screen, remember to set also apple-mobile-web-app-capable to true.
- Remove Joomla 1.5 compatibility code,
- PSR1/PSR2 PHP code validation,
- fix an iOS6 positioning issue on iPhone
- added arabic translation
- Prevent js errors due to browser storage setItem / removeItem when browser in privacy mode
- Bug: correctly detects Chrome browser
- Bug: Added support to disable balloon for Chrome iOS browsers
- NEW: Add new setting “webapp-links" Using this will rewrite all your internal Joomla links and make your entire site appear to be working outside of safari as a web application!.
- NEW: Installation branding,
- BUG: new update site in installer
- NEW: Frequently Asked Questions started in wiki
- New version for Joomla 2.5 / 1.5
- New CSS,
- Add support for returningVisitor: show the message to returning visitors only. Set this to true and the message won’t be shown the first time an user visits your site. Default: false,
- Add support for autostart: should the balloon be automatically initiated? Default: true.
- BUG: now touchIcon is properly inserted in message
- Add support for custom iconMessage,
- add support status-bar styling:
Sets the style of the status bar for a web application. This meta tag has no effect unless you first specify full-screen mode as described in “apple-mobile-web-app-capable.” If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.
Frequently Asked Questions
CHANGE THE BALLOON APPEARANCE
Just change the add2home.css
Can now my site as web app take advantage of Notification Pop ups ?
At the moment there isn’t a way to use notifications via webapp, notifications request a special code inside the iphone app.
How do you specify a name for the icon other than the Title of the page?
The app uses the name of the title of the page, but the users can change it like when they add your site to home
The option for Gloss is checked, but the icon doesn't have gloss effect after adding to home.
Check the source code of you site, since there is now way to check the source code n an apple device, you'll have to install in Firefox a small extension that let you switch the user agent
The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser. Select iPad or iPhone, reload your site and check the HTML source code, you must found the following:
<link href="/media/plg_system_add2home/startupIPhone.png" rel="apple-touch-startup-image" /> <link href="/media/plg_system_add2home/icon_ipad.png" rel="apple-touch-icon-precomposed" sizes="72×72" /> <link href="/media/plg_system_add2home/icon_retina.png" rel="apple-touch-icon-precomposed" sizes="114×114" /> <link href="/media/plg_system_add2home/icon_ipod.png" rel="apple-touch-icon-precomposed" />
If -precomposed is absent then it is clearly a bug in the software (can not be, basic feature check your settings).
Best explanation is that some Joomla templates are now coming with their won icon for apple device. The last icon in the HTML that match the device will the one detected and use by the apple device. Check for any further line containing rel="apple-touch-startup-image", and either switch this off in your template if possible or ask your Joomla template company for help.
Check that you are using version 1.6.4 and have activated:
- "apple-mobile-web-app-capable", If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. if set to false, you CAN NOT USE custom startup images and default behavior is to use Safari to display web content.
- "webapp-links" Using this on all your internal links you can make your entire site appear to be working outside of safari.