Web-App Mode-ext

Extensions are powerful modules that may be added to WPtouch Pro to enhance the appearance and performance of the mobile and/or desktop themes. The Multi-Ads extension is available as an add-on to your license. To add it to your license, go to http://www.wptouch.com/pricing.

Introduction

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

Activate Web-App mode by going to WPtouch Pro > Settings > Extensions > Web-App Mode. Once activated, you should then see a new tab on the left side of the WPtouch Pro Settings page, Web-App Mode.

General

Enable Persistence

If this option is enabled, when a user opens your Web App they will be returned to the page that they last visited when they used your app previously, instead of the home page.

URLs to ignore in Web-App Mode

Enter a list of permalink fragments, one per line, such as "/about" or "/products/store" to exclude them from opening in Web-App Mode. When a user tries to visit one of these pages, the page will instead be opened in their phone's browser.

Notice Message

Show a web app notice message for new iOS/Android visitors

When enabled, WPtouch will display a notice bubble on the first visit prompting users to add your website shortcut to their home screen.

Message will be shown again for visitors

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 Images

Note: Startup images are only available for iOS devices.

Note: A bug in iOS 9 prevents startup images from displaying. Until Apple fixes this, you will not see startup images for your Web-App in iOS9.

With WPtouch Pro Version 4, startup images are now handled in the Customizer.

When Web-App Mode is enabled, you will see a title on the left side of the customizer for "Web-App Startup Screens (iOS)". Clicking that will allow you to set startup images for your web app.

Startup images should be 1242 by 2148 pixels and the file format should be either PNG or JPG. They will automatically be scaled down for smaller screens.

If you're using a theme that supports tablets, such as Classic Redux, you will also see two additional options for iPad-sized startup images, 1536x2008, and 2048x1496.

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 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 you've set an icon by going to Appearance > Customize > Site Identity, it will be displayed here.

Click "Add to 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.

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

The process for Android is very similar to iOS. After you have configured your Web-App Mode options, access your website on your device.

A web-app bubble will prompt you to tap on the menu icon to open the browser's options.

Tap "Add to 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 your website display full-screen without the browser's toolbar.

Compatibility with MobileStore

Please see this article for information about Web-App Mode's compatibility with the MobileStore theme:

https://support.wptouch.com/article/521-mobilestore-and-web-app-mode