Support for applicationCache in offline mode

10 posts, 0 answers
  1. Richard
    Richard avatar
    8 posts
    Member since:
    Aug 2007

    Posted 22 Nov 2013 Link to this post

    We're trying to figure out a strategy for handling the offline scenario with our icenium app. We've figured out an approach to determining if we are offline, and for caching our data access calls, but we're puzzling about how to cache calls to regular internet resources (remote views, images, remote stylesheets) for the offline scenario.

    Our app uses remote views (from an internet url) and also some remote resources (profile pictures, badge images, dynamic stylesheets etc.). For the remote views, I think we will probably have to bundle them with the app instead of fetching them from remote (although it would be great not to have to do that), but for profile pictures and badge images we won't be able to do that (as they are dynamic data), but we would like to be able to make them available for the offline scenario. Application Cache (or AppCache) seems to kind of fit the bill here - allowing us to store a local cache of these key resources - so that they are available offline if we have previously fetched a copy. But it's unclear if appCache is supported by icenium (i.e. for remote view and resource requests etc.) and I wasn't able to turn up anything specific to icenium with a google search.

    So my question is this I guess - is appCache supported by icenium, and if so is it fully supported on both iOS and android. If it isn't supported, does anyone have any guidance / ideas for how to best handle this scenario. This really feels like a path that other devs must have already trodden by now so I'm hoping to benefit from others experience if possible.
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 26 Nov 2013 Link to this post

    Hello,

    Whether AppCache is supported depends on the platform of choice, not on Icenium i.e. Icenium is basically the IDE you use to create your app and the cloud services that build this app. The bridge between your device and the javascript you've used is all handled by Cordova.

    I suggest going through the following blog post series of my colleague Jim that has tried to explain that offline support for mobile devices is not a walk in the park. You can also take a look at this post.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Richard
    Richard avatar
    8 posts
    Member since:
    Aug 2007

    Posted 26 Nov 2013 Link to this post

    There is certainly support in WebKit for AppCache, but as I understand it that is supported by functionality in the host (usually a web browser, in this case the wrapper that icenium builds). Are you saying that the WebKit wrapper that icenium builds does support AppCache? I've done some tests (in the simulator and on a test app on the iPad initially) and it certainly doesn't appear to be looking for the manifest I've identified.

    Would you be able to touch base with your devs to see if AppCache is supposed to be supported - if not, then I can stop trying and just log a suggestion somewhere. Thanks.
  4. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 28 Nov 2013 Link to this post

    Hello,

    The "wrapper" that Icenium uses is Cordova and it takes care of enabling javascript in the WebView, enabling AppCache and all other goodies without which you would not be able to run HTML 5/JS/CSS app in a native shell. According to the last post I referenced in previous reply and the Cordova changelog here, Cordova have enabled AppCache since v2.5.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. Richard
    Richard avatar
    8 posts
    Member since:
    Aug 2007

    Posted 19 Feb 2014 in reply to Steve Link to this post

    So here is what I've tried - I have added a reference to my custom appcache manifest file in the html file:

    <!DOCTYPE html>
    <html manifest="manifest.appcache">

    .. and added the manifest.appcache file to my project:

    CACHE MANIFEST
     
    CACHE:
    http://myserver/path/
     
    FALLBACK:
     
    NETWORK:
    *
     
    As advised in https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache I've hooked up to a bunch of the appCache events to monitor what is going on, but none of them fire on iOS (viewing through remote debugger) and the debugger shows no indication that the manifest file was fetched.

    Can you please, please look into this for me as getting the appCache working is a fundamental part of our app strategy and we are blocked right now. A simple sample with a manifest that works should be all we need to get going I think.
  6. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 24 Feb 2014 Link to this post

    Hi Richard,

    Thanks for the reply.
    I did some research, because I am not pretty aware of appCache concept and I found that it is crucial to set the MIME type of the manifest file.

    Would you share with us your application name so we could take a look at it?

    Another thing I am wondering about is if you have tested on Android as well and whether you have issue with iOS only?

    I look forward to hearing from you.

    Regards,
    Zdravko
    Telerik
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
  7. Richard
    Richard avatar
    8 posts
    Member since:
    Aug 2007

    Posted 07 Mar 2014 in reply to Zdravko Link to this post

    Do you have a sample where you have seen this working - if that is something you can share that would be great. Are you saying this should definitely work on iOS?
  8. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 11 Mar 2014 Link to this post

    Hello Richard,

    Unfortunately, we don't have a sample that implements the appCache concept, but according to this table it should be compatible with iOS.
    For more information about the API please refer to this link.
    Thanks.

    Regards,
    Zdravko
    Telerik
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
  9. Mohammad
    Mohammad avatar
    1 posts
    Member since:
    May 2014

    Posted 13 May 2014 in reply to Zdravko Link to this post

    Hi Zdravko,

    you said :

    "I found that it is crucial to set the MIME type of the manifest file."

    The thing is, I already know that.... the problem is, where do we do this with AppBuilder? Been trying to find where to add this mime type for .appcache files, without success...


    Could you please ask you dev for where to put additional mime type in AppBuilder plz?

    Thank you, and have a great day




  10. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 16 May 2014 Link to this post

    Hi Mohammad,

    Thank you for contacting.

    Generally, the HTML 5 Application Cache should work out of the box for Android devices. In other words, you do not need to set the .appcache MIME type for them, anywhere. However, in iOS the things are different and the Application Cache is not supported for hybrid apps. This is so, as currently there is no way to set the MIME type for the manifest files. This is why we recommend trying other caching approaches like using localStorage and load the files from there when in offline mode. This article is a good starting point. You can store your application version in the localStorage as well and load images from localStorage when the version is unchanged and reload and store them when you change the application version. Here is a sample code you can use:
    01.document.addEventListener('deviceready', function () {
    02.           
    03.           // change project version when you want to update the files in the local storage - application cache is working in similar way
    04.           var projectVersion = "0.0.1";
    05.           
    06.           // describe scrtipts to cache
    07.           var scripts = ["http://www.w3schools.com/html/demo_time.js"];
    08.           
    09.           // describe images to cache
    10.           var images = ["http://www.w3schools.com/html/img_logo.gif"];
    11.           
    12.           // scripts - array of script urls, images - array of images - the html should contain img element with the same ID as the url of the stored img. cachedScripts and cachedImages are key-value pairs
    13.           var defaultProjectStructure = {
    14.               "projectVersion": projectVersion,
    15.               "scripts": scripts,
    16.               "cachedScripts": {},
    17.               "images": images,
    18.               "cachedImages": {}
    19.           }
    20.           
    21.           var localDB = JSON.parse(localStorage.getItem("myProject"));
    22.           if(localDB !== null && localDB.projectVersion === projectVersion) {
    23.               
    24.               if(localDB.projectVersion === projectVersion) {
    25.                   loadScripts();
    26.                   loadImages();
    27.               }
    28.               
    29.           } else {
    30.               localStorage.removeItem("myProject");
    31.               
    32.               myProjectObject = JSON.stringify(defaultProjectStructure);
    33.               
    34.               // set values to myProjectObject for scripts and images
    35.               storeImages(defaultProjectStructure.images);
    36.               storeScripts();
    37.               localStorage.setItem("myProject", myProjectObject);
    38.           }
    39.           
    40.           function storeImages(images) {
    41.               for(var i = 0; i < images.length; i++) {
    42.                   storeImage(images[i]);
    43.               }
    44.           }
    45.           
    46.           // example for storeImage
    47.           function storeImage(image) {
    48.               var img = document.getElementById(image),
    49.                   imgCanvas = document.createElement("canvas"),
    50.                   imgContext = imgCanvas.getContext("2d");
    51.            
    52.               // Make sure canvas is as big as the picture
    53.               imgCanvas.width = img.width;
    54.               imgCanvas.height = img.height;
    55.            
    56.               // Draw image into canvas element
    57.               imgContext.drawImage(img, 0, 0, img.width, img.height);
    58.            
    59.               // Get canvas contents as a data URL
    60.               var imgAsDataURL = imgCanvas.toDataURL("image/png");
    61.               
    62.               myProjectObject.cachedImages[image] = imgAsDataURL;
    63.           }
    64.           
    65.           function storeScripts(scripts) {
    66.               //store scripts
    67.           }
    68.           
    69.           function loadScripts(scripts) {
    70.               //load Scripts
    71.           }
    72.           
    73.           function loadImages(images) {
    74.               //loadImages
    75.           }
    76.       }, false);

    I hope the above helps.

    Regards,
    Kaloyan
    Telerik
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
Back to Top