Add to Mobile Home Screen

This is a test page for the Add to Mobile Home Screen XenForo Addon

This add-on uses a JavaScript widget that opens an overlaying message inviting mobile device viewers to add your website to their home screen.

The JavaScript used by this is called Add To Homescreen (ATH) and was made available via http://cubiq.org/add-to-home-screen under MIT Licence

Information

From http://cubiq.org/add-to-home-screen:

The script opens an always-on-top message inviting the user to add the application to the home screen. 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.

How does it look?

This is the test page, you should see it now.

There is also a live demo here which uses the default icon set via CSS:
http://lab.cubiq.org/addtohome/demos/simple/

Installation

  1. Upload the files to your forum directory from the 'upload' folder.
  2. Import xml file from the 'xml' folder.
  3. Configuration options can be set via the admin panel : Options > Add to Home Screen

Note: This add-on will use the image set in Style Properties: Header and Navigation > Facebook Open Graph Logo for the icon so if you have not set a custom image the default XenForo image will be used.

FAQ

Why is the XenForo icon showing when I add my site to my home screen?

This add-on will use the image set in Style Properties: Header and Navigation > Facebook Open Graph Logo for the icon so if you have not set a custom image the default XenForo image will be used.

I turned on debug mode for testing but I still cannot see the message.

Debug mode will only disable some of the preliminary checks which means the message is shown on desktop browsers and unsupported devices as well.

For testing you will need to enable the 'addToHomescreen.removeSession()' option, refresh the page and then disable the 'addToHomescreen.removeSession()' again. This will clear your current session and the message will display the next refresh.

How can I include the browser icon in my custom message just like the default message?

In the custom message text use %icon

Can I change the style of the message pop-up?

Yes, you can edit the css in the template 'SV_addtoHomeScreenDefault.css'

Published:
Jan 4, 2015
Page Views:
3,825
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.