Skip to Content
Author's profile photo Former Member

Using the HTML 5 cache manifest for SAP mobile apps

When building SAP web applications for the latest mobile devices like the iPhone, consider using the HTML 5 application cache. This feature allows your app to store HTML, CSS, image and Javascript files permanently on the mobile device. You can start the application even when you’re offline and not connected to SAP. Once your connection to SAP is available, you can retrieve new business data from the application server.  If you’re on a slow mobile network, you can continue working even when your connection is dropped.  Data can be retrieved from SAP using AJAX in HTML format and it can reside in your phone’s browser memory for fast navigation.

You can write SAP mobile web apps in ABAP and use Business Server Pages for the HTML content.  To use the HTML 5 application cache, you need to define a file called “cache.manifest” in the root of the BSP application tree via transaction SE80.  The file should have MIME type “text/cache-manifest”.  See the screenshots below for an example from our application.

image

image

The first lines of a sample cache manifest file are listed below.  It’s a simple text file.  To ensure that users have the latest version of your software on their phones, change the release date each time you publish a new version.

image

You can use logon tickets for authentication and set a ticket expiry time of 24 hours using the system parameter “login/ticket_expiration_time”.  This means that users can logon in the morning from their phones and stay connected throughout the day without re-entering passwords.  We find that phone VPN connections sometimes drop out due to slow mobile networks. Logon tickets ensure that the user’s authentication is maintained even when the connection is lost.  The overall experience of web apps with the HTML 5 application cache is similar to a native iPhone application.  You have the convenience of a web app that does not need approval by third parties like the Apple App store.  HTML 5 is supported by the Android, Apple and Blackberry OS 5 mobile browsers.   The screenshots below show our mobile application icon and the main menu.  The menu is accessible even when the phone is offline as all files are stored on the phone.

image

image

Web applications using HTML 5 are a great way to extend your SAP system into the mobile world.  You can build offline mobile applications using SAP data using ABAP and BSP.   

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      HTML5 offers great vantages over apps. The offline usage can also be enhanced with local storage (javascript). For most cases, there really is no need to develop an app: runs on iPhone, Blackberry, Android, Firefox, Chrome. 1 code, all platforms.

      HTML5 applications can also developed using NetWeaver AS Java or the Portal. Personally prefer this over ABAP. Gives access to other APIs, portal system landscape, etc.

      br,
      Tobias

      Author's profile photo Former Member
      Former Member
      Several of my clients have not deployed AS Java in their landscape, so ABAP is the easiest option for them. It seems that ABAP is the lowest common denominator for SAP ERP installations. If your client has portal resources, you can possibly integrate using HTML links directly to the content. Since the user is already in the browser, you can integrate other web applications seamlessly. We use Google Maps and Google Visualization in our mobile application. 

      John

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Of course they do have ABAP installed when using the SAP ERP. IMO the portal offers the vantage to use SSO and to easily integrate other backend systems. Of course, you need a portal in your landscape.

      Do you also use the HTML5 browser local storage (localStorage.setItem) feature to create a "real" local application?

      br, Tobias

      Author's profile photo Former Member
      Former Member
      Tobias,

      We are using SSO with our application so it should support integration with other backend systems. We have developed a custom logon class to support SSO on the mobile web-kit browser.

      We are not using the "localStorage.setItem" option at this stage, altough I can see that it's useful for mobile apps. We are storing SAP master data in the HTML file that is generated on the first download from the server. For example, plants, storage locations and company codes are downloaded in the HTML file to allow validation of input fields. The HTML 5 cache manifest specifies that this data be stored permanently on the mobile device, even when it's offline. We are caching stable data like configuration settings in the HTML file, while dynamic values such as account balances are retrieved from the SAP server on every page view.

      John

      Author's profile photo Former Member
      Former Member
      Spaghetti

      Nice blog

      We have a usage case on my current project. I'll be in touch

      Please change your flag back to Australia

      Vern

      Author's profile photo John Moy
      John Moy
      Hi John,

      Thanks for your blog.  I have been meaning to try this out myself with BSP (I have done it for a static website, but not BSP).  A colleague told me that URL mangling which occurs in BSP might invalidate the cache manifest.  I presume since you have it working this has not presented an issue for you?

      Author's profile photo Former Member
      Former Member
      Hi John,

      We had no issues with URL mangling. The files in the cache manifest are listed with relative paths. Our app is driven by a central HTML file with dynamic data retrieved using AJAX from the server.  The central HTML file and all the supporting Javascript and images can be accessed when the mobile device is offline.  We store SAP master data (e.g. company codes, plants) in the central HTML file so it can be accessed offline.   You can download the whole BSP application from our web-site as a transport and review the source code.

      I enjoyed your recent blog posting on JQuery Mobile.  I see that you're working for Australia Post.  I did some SAP consulting work for them back in 1997.  Do you think you'll deploy JQuery in production or is more of a hobby project at this stage?

      John 

      Author's profile photo John Moy
      John Moy
      Hi John,

      Thanks, you've given me more confidence with trying it out.  In relation to the jQuery Mobile demo, really this was weekend hobby stuff.  Don't forget that jQuery Mobile is in alpha release at the moment.  I am waiting until Jan when version 1.0 is released to see if it is fit to use productively.  Of course there are fallback options such as jQTouch and iUI.  I originally used iUI in my demo but then migrated to jQuery Mobile because I felt that it had more potential to be future proof from the perspective of supporting different devices.  But really it wasn't at all difficult to swap the frameworks.

      Cheers

      John

      Author's profile photo Raj Govender
      Raj Govender

      Hi John,

      Thanks for your blog. We've implemented offline using SAPUI5 and the cache manifest. Everything works apart from the updates, after changing the manifest file the refresh picks up the cached version of the file (noupdate event fired). How do we make the manifest file not cache on the device? We've got the app packaged in a BSP project. It's an old blog but still relevant.

      Raj

      Author's profile photo Dworak Florian
      Dworak Florian

      Hi Raj, have you found a way to have the cache manifest itself not being cached by the browser?

      Cheers, Florian

      Author's profile photo Raj Govender
      Raj Govender

      Hi Florian,

      Yes, I put the file the MIME Repository which stopped it from being cached.

      Raj

      Author's profile photo Dworak Florian
      Dworak Florian

      Hi Raj,

      I guess you did this by directly creating the file in the ABAP workbench. If you want to do this out of Eclipse it does not seem to be that easy, as there is no way to influence the mime type or cache settings.

      We did it in the following way as a workaround:

      1) Cache manifest file needs a name containing ".htm". E.g. manifest.htm.appcache

      Even though it is not a html file, you can then add the cache-control meta tag as part of a comment in your cache manifest. This will satisfy SAP note 1937147, see also class /UI5/CL_UI5_APP_HTTP_HANDLER, method PARSE_META_TAGS which has to result in true for ev_is_no_cache_requested

      2) Add extension "appcache" and type "text/cache-manifest" as a mime type mapping in table SDOKMIME_C.

      Cheers,

      Florian