Add2Home (Apple springboard) your Joomla site
- 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
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.