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.
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.
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.
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.
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
John
Do you also use the HTML5 browser local storage (localStorage.setItem) feature to create a "real" local application?
br, 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
Nice blog
We have a usage case on my current project. I'll be in touch
Please change your flag back to Australia
Vern
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?
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
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
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
Hi Raj, have you found a way to have the cache manifest itself not being cached by the browser?
Cheers, Florian
Hi Florian,
Yes, I put the file the MIME Repository which stopped it from being cached.
Raj
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