Cache Manager (New in SP04)
This plugin provides a persistent cache of the HTML content that is used by an online app and can detect when an SAP Fiori app has been updated and purge the cache. It is currently intended to be used only with the SAP Fiori client. For additional details on the cache manager plugin see the JavaScript file in a project that includes this plugin at
project_name\plugins\com.sap.mp.cordova.plugins.cachemanager\www\cachemanager.jsor the JS Documentation at Kapsel Cache Manager API Reference.
The aim of caching is to reduce the load time of the application and data usage by reducing the number of files that must be transferred from the web server to the browser or webview. If the contents of the web app have been previously requested and they still exist in either memory or on the file system, they do not need to be transferred again the next time the application is opened. Headers in a request and response are used to indicate which files a browser should cache and for how long. This can be demonstrated using TcpTrace, Chrome and the example used for the Online Application plugin.
- Copy C:\ODataSample\products3.html to products4.html.
- Start the http-server with the below command. Note that the -c3600 indicates that the http-server will send a header to the client to not bother checking with it for 60 minutes after receiving the file by sending a header named cache-control: max-age=3600.
http-server C:\ODataSample -c3600 -p 80 - Start TcpTrace and have it capture the requests on port 85 and redirect them to port 80 which the http-server is using.
- In Chrome, enter the URL to access products4.html such as http://localhost:85/products.html. After the page loads, press the refresh button. Examine the requests in TcpTrace.
The following are some of the entries from TcpTrace from Chrome.
The server will then respond withGET /products4.html HTTP/1.1
Cache-Control: max-age=0
HTTP/1.1 200 OK
etag: "0-1613-Tue Jun 03 2014 09:35:03 GMT-0400 (Eastern Daylight Time)"
last-modified: Tue, 03 Jun 2014 13:35:03 GMT
cache-control: max-age=3600
content-length: 1613
<html> ...
- If the page is reloaded by pressing the browser's reload button, the client this time includes information about the version of the file that it has in its cache such as last-modified date and an If-None-Match which contains the value of the etag which was previously given by the server as unique identifier for the resource.
The server then realizes that the client has the current version of that file by comparing the file date of products.html and responds with 304 Not Modified and does not send the contents of products4.html.GET /products4.html HTTP/1.1
Cache-Control: max-age=0
If-None-Match: "0-1613-Tue Jun 03 2014 09:35:03 GMT-0400 (Eastern Daylight Time)"
If-Modified-Since: Tue, 03 Jun 2014 13:35:03 GMT
HTTP/1.1 304 Not Modified
etag: "0-1613-Tue Jun 03 2014 09:35:03 GMT-0400 (Eastern Daylight Time)"
last-modified: Tue, 03 Jun 2014 13:35:03 GMT
cache-control: max-age=3600
Date: Tue, 03 Jun 2014 13:41:10 GMT
- Update the products4.html file by adding a link to the page.
A technique to update the timestamp of a file on Windows without changing the file is to use the following copy command.<a href="products4.html">products4.html</a>
The following is the output shown in TcpTrace after pressing refresh in Chrome.copy products4.html /B+
The server this time detects that its copy of products.html is newer than the one that the client has and responds withGET /products4.html HTTP/1.1
Cache-Control: max-age=0
If-None-Match: "0-1613-Tue Jun 03 2014 09:35:03 GMT-0400 (Eastern Daylight Time)"
If-Modified-Since: Tue, 03 Jun 2014 13:35:03 GMTHTTP/1.1 200 OK
etag: "0-1673-Tue Jun 03 2014 10:12:16 GMT-0400 (Eastern Daylight Time)"
last-modified: Tue, 03 Jun 2014 14:12:16 GMT
cache-control: max-age=3600
content-length: 1673
<html> ...
- Note, that each time Chrome requests a page by pressing the Reload button, it sends a cache-control: max-age=0 header in the request and forces a round trip to the server so that it can be determined if there is a newer version of the file. If the page is instead requested by clicking on a link like the one just added, Chrome will look in its cache and will see that it has a version of the file that was returned with a cache-control: max-age=3600 (60 minutes) header and will simply use that version of the file if the max-age check passes rather than checking with the web server to see if there is a newer version of the file.
Note, it is possible to disable caching in Chrome by opening DevTools (Cntrl-Shift-I), click on the gears(Settings) and check Disable cache (while DevTools is open). Once set, the Cache-Control value will change from max-age-0 to no-cache.
Note, it is possible to clear Chrome's cache by opening DevTools, click on the Network tab, right-click and choose clear browser cache.
Note, in Chrome, it is possible to force the files to be loaded from the webserver by pressing Shift-F5.
Steve Souder's web site has an article that mentions how to view a desktop browser's cache size as well as some other videos on caching. http://stevesouders.com/cache.php - The same exercise can be done using a Kapsel app with the online plugin.
Create the project.cordova -d create C:\Kapsel_Projects\CacheManagerDemo com.mycompany.cachemanager CacheManagerDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"
cd C:\Kapsel_Projects\CacheManagerDemo
cordova -d platform add android
cordova -d create ~/Documents/Kapsel_Projects/CacheManagerDemo com.mycompany.cachemanager CacheManagerDemo "{\"plugin_search_path\":\"/Users/i826567/SAP/MobileSDK3/KapselSDK/plugins/\"}"
cd ~/Documents/Kapsel_Projects/CacheManagerDemo
cordova -d platform add ios - Add the online plugin.
cordova -d plugin add com.sap.mp.cordova.plugins.online
- Add the below entries just above the name element to C:\Kapsel_Projects\CacheManagerDemo\config.xml.
<preference name="UserAgentPrefix" value="cordova " />
- Also in config.xml, modify the content tag to something like
<content src="http://10.7.171.196:85/products4.html"/> - Copy the files to the platform directory by running
cordova -d prepare - Note that when the app opens a second time on Android either from the background of if it was removed from memory, it will not attempt to communicate with the web server since the server included the header cache-control: max-age=3600 in its response.
On iOS, the app must be exited from memory before it attempts to communicate with the web server. The webview's cache is cleared when this occurs.
Modify C:\ODataSample\products4.html and the following reload button.<button onclick="window.location.reload()">Reload</button> - Use the Android IDE or Xcode to deploy and run the project and again examine the TcpTrace.
Try opening the app and then closing the app and opening it again. Notice that the second time the app is opened; no attempt is made to communicate with the web server.
Try force closing the app and then opening it. Still no attempt is made to communicate with the web server on Android. On iOS, opening the app after removing it from memory clears the cache.
If the Reload button is pressed, then then a check is made with the web server and the web server responds with a 304 Not modified response. On iOS, the webview does not send a last-modified header for the html page so it gets reloaded each time. - Next try adding some images to products4.html. The following images were downloaded to C:\ODataSample\
<img src="wave.jpg"><!-- http://topwalls.net/wp-content/uploads/2012/07/ocean-blue-wave-.jpg --> <img src="waterfall.jpg"><!-- http://topwalls.net/wp-content/uploads/2012/07/vercors-forest-.jpg --> <img src="mountains.jpg"><!-- http://topwalls.net/wp-content/uploads/2012/07/best-hd-nature-desktop-.jpg --> <img src="forest.jpg"><!-- http://topwalls.net/wp-content/uploads/2012/05/mountain-road-autumn-season.jpg --> <img src="sunset.jpg"><!-- http://upload.wikimedia.org/wikipedia/commons/1/19/Fanabe_beach_sunset.jpg --> - Open the app and press the reload button. Press the back button to exit the app and then open it again. Notice that the second time the app is opened, the images were loaded from the cache as indicated by the Bytes Out and the 304 Not Modified response from the server.
Now press the back button, long press on the CacheManagerDemo icon and drag it to the App Info text to show the below screen.
Notice that the data portion of the app is only 2.93 MB whereas the total size of the 5 images is over 6 MB. Press the Force Stop button. Then reopen the app. This time notice from the TcpTrace that some of the images were loaded from the cache and some were not.
Finally press the reload button and notice that all images were loaded from the webview's cache.
By this point, it should be clear that the files that get cached by the webview on the device can be stored persistently or can be stored in memory. Items cached in memory will need to be reloaded the next time the device is restarted or the app is removed from memory.
See also clearCache method for Android WebView.
The following post mentions some interesting statistics on the cache for Chrome including that the max size is 320 MB and that it takes approximately 4 hours of continuous browsing to fill. Chromium Cache Metrics. - The Kapsel Cache Manager plugin provides the webview component that is used to display an HTML app in a Cordova application with a persistent cache and the ability to programmatically clear the cache.
- The Cache Manager plugin also has additional methods setUrl and setSAPUI5LifecycleManagementEnabled to work with a SAPUI5 Cache Buster and Application Cache Buster.
See also Make Fiori Apps Run Faster. - An alternative to using the Cache Manager plugin would be to configure the application using an HTML5 application cache.
- The Kapsel Cache Manager plugin is currently intended to be used only with the SAP Fiori client.
- SAP Managed Tags:
4 Comments
