Software Archive
Read-only legacy content
17061 Discussions

App Cache

John_N_1
Beginner
812 Views

Hi good pple,

This is what I have done to cache my app, but it's not working:

-Edit the <html> tag on the index.html file to point to the manifest file <html manifest="http://localhost/template-login-view-master/www/php/cache.manifest">

-Create a file named cache.manifest inside the php folder. Add in that file these lines:

    CACHE MANIFEST
   # rev 42
    CACHE:
    clickSlider.png

clickSlider.png is a file the app uses somewhere. It's located in the php folder.

-Create a file named .htaccess inside the php folder with this line :

AddType text/cache-manifest .manifest .

When I stop the server  and refresh the app, it doesn't show anything. Please help.

0 Kudos
10 Replies
Swati_S_Intel1
Employee
812 Views

I believe you need to include index.html also in the cache manifest file. Please follow this article for app cache manifest file.

http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-manifest-file-creating

Swati

0 Kudos
John_N_1
Beginner
812 Views

Hi Swati, caching

I have edited the manifest file and added index.html. Still it's not caching. To help view what's going on , I added these lines on the index.html file :

            $.ui.launch(); // This line helps you (Swati) see where I have added these lines of code
            if (!window.applicationCache) {
            console.log('appcache failed');}
             else {
   var appCache = window.applicationCache;
   switch (appCache.status) {
     case appCache.UNCACHED: // UNCACHED == 0
      console.log('UNCACHED');
      break;
     case appCache.IDLE: // IDLE == 1
      console.log('IDLE');
      break;
     case appCache.CHECKING: // CHECKING == 2
      console.log('CHECKING');
      break;
     case appCache.DOWNLOADING: // DOWNLOADING == 3
      console.log('DOWNLOADING');
      break;
     case appCache.UPDATEREADY:  // UPDATEREADY == 4
      console.log('UPDATEREADY');
      break;
     case appCache.OBSOLETE: // OBSOLETE == 5
      console.log('OBSOLETE');
      break;
     default:
      console.log('UKNOWN CACHE STATUS');
      break;
   };
   console.log(window.applicationCache.status);

On the console log, I see Uncached. Please help me Swati, as I cannot figure out another option to caching. This feature is very crucial to the app dev process. Thanks

 

 

0 Kudos
John_N_1
Beginner
812 Views

The tutorial you are pointing to, and others I have looked at, refer to  web apps and websites where the app files -HTML, JS, CSS are located in a web server, so the browser actually will download these files and save them locally. But hybrid apps are different; these files are located in the app the user downloads and not on the server.
 

0 Kudos
Swati_S_Intel1
Employee
812 Views

That's correct. The hybrid apps are downloaded and reside on the device. It is only in the case of webapps/websites that you need to cache the app/data. For hybrid apps, if you are trying to get data,  typically the data is fetched via ajax call to the server and if you want you can use local storage to save the data for later use.

Swati

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
812 Views

Do you want save little data as cookies?

I am using this (to get):

function funRecuperaOpcoes() {
  try {
        if(typeof(window.localStorage) != 'undefined') {
            if (window.localStorage.getItem(2)) {
                wNomeUsuario = window.localStorage.getItem(2);
                $.query('#camNomeUsuario').val(wNomeUsuario);
            }
            if (window.localStorage.getItem(3) == "s") {
                $.query('#detalhesUploadDownload').attr('Checked','Checked');
            } else {
                $.query('#detalhesUploadDownload').prop('checked', false);
            }             
        } else {
            alert('window.localStorage, not defined');
            }
    }
    catch(err){
        alert('store_local,error,' + err);
    }
    } 

and to save:

function funGravaNomeUsuario() {
    wNomeUsuario = $.query('#camNomeUsuario').val();
    try {
        if(typeof(window.localStorage) != 'undefined') {
            window.localStorage.setItem(2, wNomeUsuario);
            }
        else
            {
            alert('window.localStorage, not defined');
            }
    }
    catch(err){
        alert('store_local,error,' + err);
    }
}

 

0 Kudos
John_N_1
Beginner
812 Views

Thanks Swati & Hamilton for your replies. From the comments above, I can conclude that caching hybrid apps is not possible. Local storage is not sufficient for this purpose, either. Sadly am beginning to realize the difference between native & web apps when am almost getting ready to release my first ever app. This is the only thing that is not working in the entire project. How sad for me...

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
812 Views

Web SQL is not enough for you? I use it with good results.

0 Kudos
John_N_1
Beginner
812 Views

Mr Hamilton,

Am developing an app similar to the facebook app. How do I use Web SQL to save several posts comprising of images, may be videos and text the user has viewed ? Is it really practical ?

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
812 Views

I´m not sure. You maybe need to use this database only for temporary store. When connected, the program transfer the content to server.

0 Kudos
PaulF_IntelCorp
Employee
812 Views

Try using this plugin for your local database storage: https://github.com/brodysoft/Cordova-SQLitePlugin

0 Kudos
Reply