CedAdd2Home for Joomla! add a message inviting iPhone/iPad users to add the web application to the home screen. It also optimize your site by adding all meta that are recognized by Apple iOS browser: autorize resize, screen ratio, startup picture, web app optimize rendering and much more. This is currently supported on iOS and Mobile Chrome. While other devices have the ability to bookmark any website to the home screen, only iOS and Mobile Chrome have a straightforward way to do it.

CedAdd2Home will look by default like this

For iPod, iPhone, iPad and more...

CedAdd2Home 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)

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

These are the recommended settings:

Always display the message at every visit

Display the message once per day, only if the user visit more than one time the page

Often call also splash screen: the splash screen is a rectangular or full screen image which appears while a software product is loading (OS, CAD, game, etc). Often it contains a progress bar, indicating the loading phases. 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 can provide up to 11 startup images!

If images are not of the corrected size, the image will be scale automatically up or down by CedAdd2Home. It is recommended is to provide the correct size for best result

For all images and icons, the PNG format is recommended. You should avoid using interlaced PNGs. The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue—plus an 8-bit alpha channel. You don’t need to constrain your palette to web-safe colors.

Type Orientation Size
iPhone 320x480
iPhone Retina 640x920
iPhone5 640x1096
iPad portrait 768x1004
iPad landscape 768x1024
iPad Retina portrait 1536x2008
iPad Retina landscape 1496x2048

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips.

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen.

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. For example, if you want to use the entire screen, set the status bar style to translucent black. This setting has no effect unless you first specify full-screen mode as described in apple-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.

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.

The following default are provided in media/plg_system_add2home/addtohomescreen.min.js The plugin automatically choose the locale of the browser,

In order to be able to support new visitor locales, you can contact me to add support for more visitor locales.

It is possible to override the default message to invite user to add your site to their home screen. Some keywords are reserved and act as placeholder for the icon or action. E.g Install this web app on your iPhone: tap %icon and then %action. will produce

This is a very important feature that we 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.

Many smartphone browsers scale Web pages to a wide viewport width, one appropriate for displaying desktop-optimized markup. These browsers allow the user to zoom in and out of scaled Web pages. For example, Opera Mobile uses a default viewport width of 850 pixels, and the iPhone uses a default width of 980 pixels.

The Viewport META tag controls the logical dimensions and scaling of the browser viewport window in many smartphone browsers, including Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers. The presence of the Viewport META tag indicates that the markup document is optimized for mobile devices.

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.

premium version only

Pinned Sites allow your users to keep their favorite websites open, running, and easily accessible. You can set the icon that the user sees when they pin your site by providing a vector image. Use 100% black for all vectors with a transparent background in SVG format. With the release of Mac OS X 10.11, Safari finally got pinned tabs. By default, they’ll use the first letter of your domain if you don’t have such an image. You need a black SVG image, a hover color. I’d recommend Sketch as a vector drawing tool, you can get a free trial for it here

Per the guidelines, the image , with a transparent (or simply: no) background, and all vectors 100% black.

Adjust your artwork as needed for the best presentation in the color you’ve specified. The pinned tab icon will not accept additional colors. You can improve the visibility of your icon by avoiding a light color, such as white, bright yellow, or light gray.

If you get a pinned tab, with a generic icon (with a capital 'E' in the icon) or If you’re running into trouble and it seems as though Safari isn’t picking up your new code, you just might be right. Hitting the Empty Caches menu item in the Develop menu won’t fix it. Instead, delete the contents of the following folder: ~/Library/Safari/Template Icons And re-start Safari. That should fix it.

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

The user session is stored in a localStorage variable called org.cubiq.addtohome by default. localStorage is domain based, so if you have multiple applications on the same domain cedAdd2Home can’t understand which one you actually added to the homescreen. You can have multiple instances of ATH on the same domain by setting a different appID for each installation.

IMPORTANT: once set do not change the appID! If you change the appID all users will see the callout again regardless if they already added the application to the home screen or not. Only exception is for standalone applications. They would keep working correctly anyway.

premium version only

Up to 3 icons can be selected.

The default are the following

description size example
High resolution screen 192x192 pixel
Medium resolution screen 152x152 pixels
Low resolution screen 16x16 pixels

You can create a clear icon for use on the homescreen following the guidance of Android Iconography

Change Android Chrome language To change the display language for Google Accounts, follow these steps: Sign in to My Account. In the "Account preferences" section, select Language & Input Tools. Choose Language To change your language, select edit Edit . Choose your language from the dropdown box and select Ok. Note: If you understand mulitple languages, you can add them to your My Accounts profile by selecting Add another language in your language settings page. Once you've changed your interface language, close the browser window. Then, open your browser and visit the My Account page; it should be displayed in the language you've selected.

premium version only

With Internet Explorer, users can put their favorite Web sites right beside their favorite apps by pinning them to the Windows and Windows Phone Start Screens. Pinning Web sites from IE gives users immediate access to these sites from the Start Screen without having to navigate to them repeatedly. When users pin your site, they have indicated that they are frequent visitors of your site and care about updates from it. With that in mind, Internet Explorer now brings you Live Tiles for Web sites, allowing you to keep your users connected to your Web site outside of the browser. With Live Tiles, you can engage with your users by bringing fresh content such as breaking news, new message alerts or titles of new blog posts right to their Start Screen. Furthermore, you can support multiple tile sizes for your Web site, allowing users to display your site prominently as wide or large tiles. Windows Desktop and Windows Mobile are also supported by CedAdd2Home

All settings for windows 8.1 are available under the tab "Windows 8.1" Make your site sits next to apps on the Windows 8.1 Start Screen. You can select bigger images as they will be automatically resize to the correct size. It is recommended to resize manualy for better results. The title of tiles has to be save.

Param Description Default Value
Use Windows Tiles set to true to let users put their favorite Web sites right beside their favorite apps by pinning them to the Windows and Windows Phone Start Screens. False
Title this is the text that users will see on your Windows 8.1 tile, Note this field can be translated.
Background color this is the background color that users will see on your Windows 8.1 tile. Black
Rss 1..5 Put 1 to 5 URL to your RSS feed here. With Windows 8.1, pinned site tiles can notify a user outside Internet Explorer 11 and pull them right back in! If you have a web feed, you can automatically build notifications into your tile. empty
Frequency The frequency attribute tells Windows 8.1 how often to check back to your website for new notifications. (default if only one notification) Don't cycle. (default if multiple notifications) Cycle notifications for all tile sizes. Only cycle notifications for medium tiles. Only cycle notifications for wide tiles. Only cycle notifications for large tiles. Only cycle notifications for medium or wide tiles. Only cycle notifications for medium or large tiles. Only cycle notifications for wide or large tiles. 1 hour
Image 70x70 pixels Select an image of size 70x70 pixels. Select your own image from the Joomla directory /images. if the size is not correct, CedAdd2Home will resize the image and save in /cache/cedadd2home/. For best results it is recommended to select an image of the correct size. media/plg_system_add2home/tiny.png
Image 150x150 pixels Select an image of size 150x150 pixels. Select your own image from the Joomla directory /images. if the size is not correct, CedAdd2Home will resize the image and save in /cache/cedadd2home/. For best results it is recommended to select an image of the correct size. media/plg_system_add2home/square.png
Image 310x150 pixels Select an image of size 310x150 pixels. Select your own image from the Joomla directory /images. if the size is not correct, CedAdd2Home will resize the image and save in /cache/cedadd2home/. For best results it is recommended to select an image of the correct size. media/plg_system_add2home/wide.jpg
Image 310x310 pixels Select an image of size 310x310 pixels.Select your own image from the Joomla directory /images. if the size is not correct, CedAdd2Home will resize the image and save in /cache/cedadd2home/. For best results it is recommended to select an image of the correct size. media/plg_system_add2home/large.jpg

150x150 pixels

Image 310x150 pixels

Image 310x310 pixels

Bring up the settings menu and click on 'Pin to Start'.

Bring up the address bar, click on the Favorites button (star), click on the Pin. Open Internet Explorer 10/11 from the Metro Start screen and navigate to a website you want to pin. Once the site has loaded, click the Pin to Start button on right side of the bar at the bottom. By default, the title of the current page is entered as the title for the site. Change the title, if desired, and click Pin to Start. A tile for the website is added to the right side of the Metro Start screen. You can drag it to another location on the Start screen, if you want. If you pin several websites to the Start screen, you can group them and label the group to keep your screen organized.

Live Tiles for Web sites are powered by Periodic Notifications, wherein the platform pulls text and images from polling uris hosted on a server at a predefined polling interval, and displays this content on the Web site’s tile. With Windows 8.1, pinned site tiles can notify a user outside Internet Explorer 11 and pull them right back in! If you have a web feed, you can automatically build notifications into your tile. Who said RSS was dead? If you don't have one, skip this step. You can choose to implement custom tile notifications later. The polling uris defined in this example contain the contents of the notification to be displayed and will be polled every half an hour. Therefore in a given 30 minute interval, a user can see up to 5 updates from this site, keeping your user intimately connected with your Web site at all times.

You can use 1 to 5 URL to your RSS feed in CedAdd2Home.

premium version only Your site feels more like a native app in Internet Explorer 9 through pinning. Discover a new way to get more results from your Windows 7 users on the web, reaching nearly 35% in the USA and over 21% worldwide. Pinned Sites may at first appear similar to bookmarks or short-cuts but some of the functionality involved goes to a whole new level—it deserves a closer look. Test it by dragging your site tab to the Windows 7 taskbar when CedAdd2Home premium is installed.

Your site's logo lights-up on the Windows taskbar when it’s high-resolution. When users pin your site, they become your most loyal customers. Give them a one-click experience that brings them back again and again.

Your site is more than a home page. You have great content but users don’t always get to it. Inspire them to go deeper with Jump Lists. They are accessible by right-clicking a Pinned Site’s taskbar icon. Jump Lists allow users to perform actions or visit specific areas of a website or web app without having to first launch a browser window. There are two types:

Here is an example of the Amazon website:

Up to 20 items can be displayed at any one time in a custom category. If you add more than 20 items to a category, the earliest added items are deleted. Although a custom Jump List category can contain up to 20 items, only the last 10 items in the list are visible by default.

How do you catch user attention when they’re not actively browsing your site? Pull them with a timely notification. Use an icon overlay when new content is available or flash the taskbar to show when user action is requested just like an app.

If pinning delivers up to a 200% increase in site engagement, then you want users to discover how to do it. And when you show them on your site, up to 35% do it.

Take your site a step farther towards a native app by allowing your user to control the site from outside the browser. Make it more social or media-friendly.

premium version only Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardized method of promoting apps on the App Store from a website, as shown here:

Smart App Banners vastly improve users’ browsing experience compared to other promotional methods. As banners are implemented in iOS 6, they will provide a consistent look and feel across the web that users will come to recognize. Users will trust that tapping the banner will take them to the App Store and not a third-party advertisement. They will appreciate that banners are presented unobtrusively at the top of a webpage, instead of as a full-screen ad interrupting the web content. And with a large and prominent close button, a banner is easy for users to dismiss. When the user returns to the webpage, the banner won’t reappear. If the app is already installed on a user's device, the banner intelligently changes its action, and tapping the banner will simply open the app. If the user doesn’t have your app on his device, tapping on the banner will take him to the app’s entry in the App Store. When he returns to your website, a progress bar appears in the banner, indicating how much longer the download will take to complete. When the app finishes downloading, the View button changes to an Open button, and tapping the banner will open the app while preserving the user’s context from your website. Smart App Banners automatically determine whether the app is supported on the user’s device. If the device loading the banner does not support your app, or if your app is not available in the user's location, the banner will not display.

Note: You cannot display Smart App Banners inside of a frame. Banners won’t appear in the iOS Simulator.

(starting for version 1.9.5) CedAdd2Home can register mobile applications available on App stores as recommended alternatives to use the current site as a native application for different mobile operating system families. CedAdd2Home can detect the operating system family of the current user accessing the site using a mobile device and redirect to the appropriate mobile application installation page previously registered with the class.

If the family of a device is not detected, the list of the apps for all registered families is displayed.

The HandheldFriendly META tag was originally supported by AvantGo mobile browsers in Palm devices to identify mobile-optimized markup. Today, it is widely interpreted by mobile browsers and spiders as an indicator of mobile markup and a directive to display the web document without scaling. The value of the META tag is “true” for mobile markup and “false” for desktop-optimized HTML.

Just change the add2home.css

At the moment there isn’t a way to use notifications via webapp, notifications request a special code inside the iphone app.

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

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 http://chrispederick.com/work/user-agent-switcher/ 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.

1.7.3

Support is provided only to subscribers. If you already have an active subscription which gives you access to the support. You can request support for it through our site. You will need to log in to our site and go to Support and click on the New Ticket button. If you can't see the button please use the Contact Us page to let us know of the ticket system problem and remember to tell us your username. If you want to report a bug, please use the Contact Us page of our site. You don't need to be a subscriber to report a bug. Please note that unsolicited support requests sent through the Contact Us page will not be addressed. If you believe you are reporting a bug please indicate so in the contact form.

Support cannot be provided over Twitter, Facebook, email, Skype, telephone, the official Joomla! forum or any other method except the Support section on our site. We also cannot take bug reports over any other medium except our Contact Us page and the Support section on our site. Support is not provided to non-subscribers; if you are using the Core version you can request support from other users in Galaxiis forum , the official Joomla! forum or any other Joomla!-related forum in your country/region. We have to impose those restrictions in support to ensure a high level of service and quality. Thank you for your understanding.