Difference between revisions of "OX6:OX Mobile Web Interface"

(Requirements)
(Configuration)
Line 119: Line 119:
 
** Add the line "<code>AddType text/cache-manifest .manifest</code>" to the file, save and restart apache
 
** Add the line "<code>AddType text/cache-manifest .manifest</code>" to the file, save and restart apache
 
** For configuration via <code>.htaccess</code> file just add a .htaccess file to the install directory. This should include the line  "<code>AddType text/cache-manifest .manifest'</code>". '''Note''': Either the global configuration or the .htaccess file should be used. (.htaccess files will only work if your Apache settings contain <code>AllowOverride</code>. For further information on mime types, please refer to your webservers user manual)
 
** For configuration via <code>.htaccess</code> file just add a .htaccess file to the install directory. This should include the line  "<code>AddType text/cache-manifest .manifest'</code>". '''Note''': Either the global configuration or the .htaccess file should be used. (.htaccess files will only work if your Apache settings contain <code>AllowOverride</code>. For further information on mime types, please refer to your webservers user manual)
 +
 +
* To direct to the correct host another site in apache is needed. Create a file named "mobile" in /etc/apache2/sites-available (and enable it by linking to it from sites-enabled, of course):
 +
 +
<VirtualHost *:80>
 +
   ServerAdmin webmaster@localhost
 +
   ServerName mobile.YOUR_DOMAINAME.TLD
 +
   ServerAlias m.YOUR_DOMAINAME.TLD
 +
   DocumentRoot /var/www/ox6-mobile-v2
 +
   <Directory />
 +
       Options FollowSymLinks
 +
       AllowOverride None
 +
   </Directory>
 +
   <Directory /var/www/ox6-mobile-v2>
 +
       Options Indexes FollowSymLinks MultiViews
 +
       AllowOverride None
 +
       Order allow,deny
 +
       allow from all
 +
   </Directory>
 +
   ErrorLog /var/log/apache2/error.log
 +
   # Possible values include: debug, info, notice, warn, error, crit,
 +
   # alert, emerg.
 +
   LogLevel warn
 +
   CustomLog /var/log/apache2/access.log combined
 +
</VirtualHost>
  
 
* For more details and README see the systems documentation directory (/usr/share/doc).
 
* For more details and README see the systems documentation directory (/usr/share/doc).

Revision as of 15:35, 3 January 2012

Information and Installation of Open-Xchange Mobile Web App

Description

The Open-Xchange Mobile Web App provides you access to your data from the Open-Xchange Server 6 via your smartphone. The Open-Xchange Mobile Web App offers online and offline access to appointments, contacts and mails on the road using your smartphone's browser. Optimized for low bandwiths the Open-Xchange Mobile Web App offers instant and fast over the air access to your data, which are at the same time safely stored on Open-Xchange Server. The following modules are supported:

  • E-Mail
  • Calendar
  • Contacts

Moreover the app offers seamless integration to use your phones basic functions like phone calls. You can easily start calls from your Open-Xchange contacts on your smartphone or directly send E-Mails.

Features and Functions

Mail Module

  • Access to all Open-Xchange private mail folders
  • Creation of new e-mails
  • Answer, forward and delete e-mails
  • Mail attachments (Attachment handling/support is defined by mobile device)

Contact Module

  • Access to all Open-Xchange contact folders and contacts with details
  • Creation of e-mails directly from contact module
  • Start calls directly from contact module

Calendar Module

  • Access to all Open-Xchange calendar folders and appointments with details
  • Accept/Decline appointments
  • View participants, resources and notes each appointment

Persistence of the Mobile Web App

  • Offline capability
  • All contacts are available offline
  • All appointments are available offline
  • All mail header are available offline
  • All mails which are opened once are available offline

Configuration

  • Number of e-mails retrieved (25,50,75,100)
  • Number of days which will be checked for appointments (5,10,20,30)
  • Animation for iOS devices (on/off)
  • Subscription of contact folders
  • Subscription of mail folders
  • Autologin

Themeability, branding and i18n

  • i18n for DE, EN, ES, FR, NL and PL, other languages can be added.
  • Branding options: App name and app icon
  • Themeability by CSS

Supported devices

The OX Mobile Web App runs on devices with a Webkit-based browser. These are mainly devices running iOS, Android and newest generation of BlackBerrys. For devices running Symbian we recommend using Opera Mobile Browser.

Device Support    
Apple iPhone yes (iPhone running iOS 2.0, 2.1, 3.0, 4.0, 4.2.1, 4.3) Official Supported by OX: 2G, 3G, 3GS, 4 and iPod-Touch 3.1.3
Android yes Official Supported by OX: Google Nexus One (Android 2.3.3), HTC Desire (Sense Android 2.1)
Nokia/Symbian S60 5th Edition yes Opera Mobile is recommended to guarantee a proper user experience. Symbian's default browser is simply too slow. (Tested on Opera Mobile 11.10.14xx)
Windows Mobile 6.5 running Internet Explorer no, not planed
Windows Phone 7 not yet, scheduled for version 1.2

Technical overview

  • Based on HTML5, CSS, Javascript (Frameworks jQuery and jQTouch)
  • Optimized for Webkit browsers like Mobile Safari and Chrome. Will also work with restrictions on Firefox and Opera Mobile
  • Complete offline capability

Offline Mode details

The OX Mobile Web App uses HTML5 to provide an offline mode for the user. To do this, there are two different kinds of storage mechanisms.

  • The whole application will be cached using the "HTML5 application cache". This will be done on the first visit/start of the app. After this initial download, all graphics, language files, js-files and everything else which is needed to run the app is stored locally on your phone in a storage managed by the browser.
  • The data from the OX server will be stored using the HTML5 storage mechanism which will be supportet by the users device. These can be a HTML5 local storage, session storage or an SQLite database. For the user there's no difference between these different storage modes.

Note: In case your device has no storage support (like the Nokia N97), a log message will inform you about this. The log can be found under the settings page, hitting the button in the upper right corner showing the exclamation mark symbol.

Requirements

  • Open-Xchange Server >= v.6.20 rev 21

Install on OX AppSuite

Debian GNU/Linux 8.0

Add the following entry to /etc/apt/sources.list.d/open-xchange.list if not already present:

deb https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/DebianJessie/ /
# if you have a valid maintenance subscription, please uncomment the 
# following and add the ldb account data to the url so that the most recent
# packages get installed
# deb https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/DebianJessie/ /

and run

$ apt-get update
$ apt-get install open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

Debian GNU/Linux 9.0

Add the following entry to /etc/apt/sources.list.d/open-xchange.list if not already present:

deb https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/DebianStretch/ /
# if you have a valid maintenance subscription, please uncomment the 
# following and add the ldb account data to the url so that the most recent
# packages get installed
# deb https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/DebianStretch/ /

and run

$ apt-get update
$ apt-get install open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

SUSE Linux Enterprise Server 12

Add the package repository using zypper if not already present:

$ zypper ar https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/SLE_12 mobilewebapp

If you have a valid maintenance subscription, please run the following command and add the ldb account data to the url so that the most recent packages get installed:

$ zypper ar https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/SLES11 ox-updates

and run

$ zypper ref
$ zypper in open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

RedHat Enterprise Linux 6

Start a console and create a software repository file if not already present:

$ vim /etc/yum.repos.d/mobilewebapp.repo

[mobilewebapp]
name=Open-Xchange
baseurl=https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/RHEL6/
gpgkey=https://software.open-xchange.com/oxbuildkey.pub
enabled=1
gpgcheck=1
metadata_expire=0m
# if you have a valid maintenance subscription, please uncomment the 
# following and add the ldb account data to the url so that the most recent
# packages get installed
# [ox-updates]
# name=Open-Xchange Updates
# baseurl=https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/RHEL6/
# gpgkey=https://software.open-xchange.com/oxbuildkey.pub
# enabled=1
# gpgcheck=1
# metadata_expire=0m

and run

$ yum update
$ yum install open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

RedHat Enterprise Linux 7

Start a console and create a software repository file if not already present:

$ vim /etc/yum.repos.d/mobilewebapp.repo

[mobilewebapp]
name=Open-Xchange
baseurl=https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/RHEL7/
gpgkey=https://software.open-xchange.com/oxbuildkey.pub
enabled=1
gpgcheck=1
metadata_expire=0m
# if you have a valid maintenance subscription, please uncomment the 
# following and add the ldb account data to the url so that the most recent
# packages get installed
# [ox-updates]
# name=Open-Xchange Updates
# baseurl=https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/RHEL7/
# gpgkey=https://software.open-xchange.com/oxbuildkey.pub
# enabled=1
# gpgcheck=1
# metadata_expire=0m

and run

$ yum update
$ yum install open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

CentOS 6

Start a console and create a software repository file if not already present:

$ vim /etc/yum.repos.d/mobilewebapp.repo

[mobilewebapp]
name=Open-Xchange
baseurl=https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/RHEL6/
gpgkey=https://software.open-xchange.com/oxbuildkey.pub
enabled=1
gpgcheck=1
metadata_expire=0m
# if you have a valid maintenance subscription, please uncomment the 
# following and add the ldb account data to the url so that the most recent
# packages get installed
# [ox-updates]
# name=Open-Xchange Updates
# baseurl=https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/RHEL6/
# gpgkey=https://software.open-xchange.com/oxbuildkey.pub
# enabled=1
# gpgcheck=1
# metadata_expire=0m

and run

$ yum update
$ yum install open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

CentOS 7

Start a console and create a software repository file if not already present:

$ vim /etc/yum.repos.d/mobilewebapp.repo

[mobilewebapp]
name=Open-Xchange
baseurl=https://software.open-xchange.com/OX6/OXtender-stable/MobileApp/RHEL7/
gpgkey=https://software.open-xchange.com/oxbuildkey.pub
enabled=1
gpgcheck=1
metadata_expire=0m
# if you have a valid maintenance subscription, please uncomment the 
# following and add the ldb account data to the url so that the most recent
# packages get installed
# [ox-updates]
# name=Open-Xchange Updates
# baseurl=https://[CUSTOMERID:PASSWORD]@software.open-xchange.com/OX6/OXtender-stable/MobileApp/updates/RHEL7/
# gpgkey=https://software.open-xchange.com/oxbuildkey.pub
# enabled=1
# gpgcheck=1
# metadata_expire=0m

and run

$ yum update
$ yum install open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default open-xchange-gui-mobile-v2

Installing Updates

Debian

$ apt-get update
$ apt-get dist-upgrade

If you want to see, what apt-get is going to do without actually doing it, you can run:

$ apt-get dist-upgrade -s

SUSE Linux Enterprise Server

$ zypper dup

You might need to run

$ zypper ref

to update the repository metadata before running zypper up.

RedHat Enterprise Linux

$ yum update

Configuration

Installation on the Apache or another webserver:

  • After installation locate the installed files in your webroot directory, i.e. /var/www/ox6-mobile-v2/ on Debian
  • Edit the file "ox-access.conf" in directory ox6-mobile-v2
  • Change localhost to the address the mobile app will be reachable followed by "/ajax", i.e. "https://m.example.com/ajax". Note: We strongly recommend the usage of https, otherwise data will be transmitted unencrypted via client and server
  • The Mobile App acts like a second UI next to the normal web frontend.
  • run the command (adopt webserver path on SLES/RHEL).
$ /opt/open-xchange/sbin/update-cache.manifest /var/www/ox6-mobile-v2/cache.manifest.in /var/www/ox6-mobile-v2/cache.manifest /var/www/ox6-mobile-v2/ox-access.conf
  • You also need to add a new mimetype to your webserver configuration to make sure the caching (offline mode) works.
    • On Apache servers you can add the mimetype either global or via ".htaccess" file.
    • For global configuration edit the file mime.conf under /etc/apache2/mods-enabled/
    • Add the line "AddType text/cache-manifest .manifest" to the file, save and restart apache
    • For configuration via .htaccess file just add a .htaccess file to the install directory. This should include the line "AddType text/cache-manifest .manifest'". Note: Either the global configuration or the .htaccess file should be used. (.htaccess files will only work if your Apache settings contain AllowOverride. For further information on mime types, please refer to your webservers user manual)
  • To direct to the correct host another site in apache is needed. Create a file named "mobile" in /etc/apache2/sites-available (and enable it by linking to it from sites-enabled, of course):
<VirtualHost *:80>
   ServerAdmin webmaster@localhost
   ServerName mobile.YOUR_DOMAINAME.TLD
   ServerAlias m.YOUR_DOMAINAME.TLD
   DocumentRoot /var/www/ox6-mobile-v2
   <Directory />
       Options FollowSymLinks
       AllowOverride None
   </Directory>
   <Directory /var/www/ox6-mobile-v2>
       Options Indexes FollowSymLinks MultiViews
       AllowOverride None
       Order allow,deny
       allow from all
   </Directory>
   ErrorLog /var/log/apache2/error.log
   # Possible values include: debug, info, notice, warn, error, crit,
   # alert, emerg.
   LogLevel warn
   CustomLog /var/log/apache2/access.log combined
</VirtualHost>
  • For more details and README see the systems documentation directory (/usr/share/doc).

Running the OX Mobile Web App on your smartphone

After installation of the App on your webserver, a client can easily access the app via his phone's browser. We recommend to add a new subdomain to your web address to make access for clients easy. A short subdomain like https://m.example.com which points to your installation will save users from entering a long URL on their devices.

Like mentioned before, the OX Mobile Web App is a pure web application. Due to this fact there is no installation or download needed to use this app on a smartphone. Just add a bookmark in your browser to access the app again later.

Especially on iOS devices there's a seamless integration within the native apps installed via the AppStore®. Just add a new bookmark to the OX Mobile Web App and choose "Add to homescreen". After this, the OX Mobile Web App will place a new app icon on the homescreen.

Common mistakes

Most problems can be solved by clearing the browser cache and reload the app. Try this before you request a bug or change the server settings.

Problem: After login a page is shown showing "Connection problem. Received response code 0".

Resolution: Your ox-access.conf is not configured correctlly. You must enter the full web app server address followed by the /ajax path. Server address means the full url a user will type in his browser to access the app. I.e. "https://m.example.com/". If everything on the backend is configured correctly, try to reload the app.

Problem: Using the browser's back button brings me back to the login page. After this the app does not work correctly.

Resolution: Only use the navigation of the app. On each subpage a back button is located at the upper left corner which brings you back to the previous page.

Using the offline mode

During the first run, the app is stored localy on your smartphone. These caching mechanism makes a later access to the app very fast and gives you the possibility to run the app even if there's no internet connection available.

The OX Mobile Web App detects on startup whether there's an internet connection available or not. If not, the App will start in offline mode. In this case a plane icon is shown in the upper left corner of the main menu. In offline mode you can access all your subscribed contacts and all of your appointments. Also all your mail headlines are available. Furthermore each email which was opened earlier is available in offline mode.

Note: The Mobile Web App will detect the state of your internet connection live. Open the log under the settings page for informations

Known Issues

Client

  • The OX Mobile Web App uses a custom, built-in navigation and history. To navigate back you will have to use the "back" buttons located on the top-left of the page. Do not use browser's back button. This causes the app to jump to the login screen and you will have to reload the app.
  • If you want to use the App in airplane mode or no network connection is availabe, the android browser will show up a message like "page could not be loaded due to missing network connection". Just ignore this alert and press "OK". The app will work in offline mode even android shows up this message.
  • If you clean the browser cache on your device or reset it to defaults, all local stored data will be flushed.

Server

  • The OX backend uses a security mechanism called "IP check". This feature is enabled by default for a OX Server. This feature will have an impact on the usage of the OX Mobile App, especially the option "Stay logged in". This feature will only work if your IP address does not change between the restarts of the app. If you are changing your network connection often when you travel around (different GSM spots, WIFI connections), your phone will get new IP addresses to access the internet. This will cause the OX backend to refuse your auto-login attempt (which is performed on every start of the App) because your IP address has changed.

To avoid this you can either turn off the IP check feature on the OX backend or set up a second server with weaker security settings only for mobile clients.

Deployment as native app

The OX Mobile Web App can also be deployed as a native smartphone app. This option is available for Android Systems and later for iOS, too. As Android allows installation of apps from every location you can place an *.apk file on a webserver or in your own Android App-Store. The OX Mobile Web App will act like any other app on the device and offers the same functionality as the web hosted variant.

Deploying a native iOS App can only be done via the Apple AppStore®. To do so you need to submit your special branded version of the app to Apple. Only Apple decides if the app will be listed in the AppStore or not.

For more information on native app deployment please contact us directly.

Branding options

Application name

The OX Mobile Web App comes with the standard name set "OX Mobile Web App". This title is saved in a png file under "/lib/jqtouch/themes/default/external/i18n_img/brand_[locale].png". To brand the app with your custom title just replace the files for each language to your needs. The i18n tool will show the graphic for each language. To configure the page title (in html title tag) please use the customisation plugin located at custom/custom.js

  • open the file custom.js in folder "custom" located at your install dir
  • open the file custom.js.sample located in the same folder
  • use the sample file as template for your customisations. Change the values of APP_TITLE and ABOUT_PAGE_TEXT to your needs.
  • copy and overwrite your custom.js.sample to the file custom.js

Theming

The OX Mobile Web App is themed via CSS and HTML. To create your own theme you will have to create new graphics and edit the css files in the theme path. To do so follow the steps below:

  1. Locate the theme path under "path to your webroot/ox6-mobile-v2/lib/jqtouch/themes"
  2. The default theme is named "default". To create your own theme make a copy of this folder and backup the original one
  3. The folder contains a css file which holds all editable values for the app. To change values edit the original file or create a new one which overwrites some of the old styles. Use Firebug or the Chrome/Safari developer tools to locate css classes and styles you want to edit. Then create a new css file and place it next to mox.min.css. Edit this file to your needs and add a new "style" tag to the index.html just AFTER the mox.min.css style tag. This will ensure that your styles overwrite the original ones.
  4. The folders "img" and "external" hold all graphics which are used in the app. To change them, just edit and save them under the same name. Don't change filenames or the theme will be broken. Also keep all file dimensions and file types (*.png, *.jpg). Changing files dimensions will corrupt the theme and layout will be broken.
  5. Always remember: Your are designing for mobile. This means: Keep fonts clear and easy to read. Keep file sizes small due to small bandwiths. Keep buttons big enought the user can touch them easily.

Reporting Bugs

Open-Xchange is interested in learning about bugs, specifically in your runtime environment. If you experience any misbehaviors, please report bugs via our public bugzilla: Open-Xchange Bugzilla
Product: OX Mobile Web App

The OX Mobile Web App logs all errors to a logfile which can be found under settings -> log.

Please note

There may be some issues with checkboxes on Android devices. Sometimes checkboxes and listboxes do not respond to tap actions. If so, please rotate your phone to landscape mode and back. Then, the checkboxes should response again

Please read the SDB article to inform you about the reasons and solution.