Web-App Mode

Web-App Mode allows you to offer a native app-like experience to your mobile website visitors that includes a customized home screen button, branded startup screens, and a browser experience that’s free of standard browser tools. Web-app mode offers many of the basic advantages of the native app experience without the associated development requirements. It’s the mobile web at its best. It is only supported in iOS. Some Android devices do allow a mobile visitor to save the website to their homescreen, but the button will open the website in the device's default browser.

Settings

• "Enable Web-App Mode" - When Web-App Mode is enabled, your users will be able to add your website as a web application to the home screen of their iOS-based device. When the option is disabled, users will still be able to add your website’s home screen shortcut but your site will open in Safari.

  

  
  

• “Enable Persistence” – When checked WPtouch will remember and load the last visited page or post for a visitor when entering Web-App Mode.
• “URLs to ignore in Web-App Mode” – You may enter permalink URL fragments such as “/about” or “/products/store” for exclusion from web-app mode. Each fragment should be a relative path entered on its own line. These posts and pages will open in the device’s default browser.

Notice Message

• “Show the notice message for iPhone, iPod touch & iPad visitors about my Web-App” – When enabled, WPtouch will display a notice bubble on the first visit prompting users to add your website shortcut to their home screen.
•  “Notice message contents” – You may customize the notice message displayed to your visitors. The contents of the message can be tailored to each visitor by using the “[device]” and “[icon]” tags in your message. These tags are dynamic and used to determine the device and iOS version used by the visitor. Do not remove these from your message.
•  You may customize the frequency with which the notice message will be shown to visitors. Setting it to show “Every time” is useful for testing/development.

  

Startup Screens

WPtouch Pro allows you to customize the screen shown to visitors as your site loads in web-app mode. The correct dimensions to use for each screen image are noted in the admin panel. All images must be in .png format.

Not all startup screen sizes are offered with all themes.

• iPhone startup screen – 320×460 pixels
• Retina iPhone startup screen – 640×920 pixels
• Retina iPhone 5 Display startup screen – 640×1096 pixels
• iPad & iPad Mini Portrait startup screen – 768×1004 pixels
• iPad & iPad Mini Landscape startup screen – 1024×748 pixels
• Retina iPad Portrait startup screen – 1536×2008 pixels
• Retina iPad Landscape startup screen – 2048×1496 pixels

  

Saving Your Website as a Web-App on an iOS Device

Adding your WPtouch Pro-powered website as a web-app to your iOS device can be done very easily. After you have configured your iOS Web-App Mode options, access your website on your device.

The iOS web-app notice bubble will prompt you to tap the arrow icon in your device’s menu. Tap it to open the menu. Find the option to add the site to your home screen. If a custom icon was added to WPtouch Pro, it will be displayed here.

Click “Add to Home Screen“. Your website will be added to your device’s home screen.

You can then enter a custom title (optional) for the home screen icon and click the “Add” button to add the icon to your device’s home screen.

To open your website in web-app mode, tap the icon that was added to the home screen of your device. You will see the startup image, if you have one enabled, and your website will display full-screen without Safari’s browser tools.