Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts

    accessing application Cache data from online page

    so, I've been playing around with application Cache and it's pretty sweet, but there's one thing I can't get my head around - I don't know if I'm missing something fundamental or if it just can't be done.

    Basically, I want an offline page and an online page to have access to a JSON file, which I want to store in the application cache fro offline use. I started off giving them both access to the manifest:
    Code:
    <html manifest="app.appcache">
    the manifest is pretty simple:
    Code:
    CACHE MANIFEST
    # 28-4-2013 v1.0.0
    
    CACHE:
    data.json
    blank.txt?123
    
    NETWORK:
    *
    
    FALLBACK:
    online.html offline.html
    but doing that meant that the online page got cached automatically, and without an internet connection it still tried to load the page and never went to fallback

    I tried putting online.html in the NETWORK: section, because the docs say that "URIs specified in the NETWORK section are loaded from the server instead of the cache" but it was still trying to load it from the cache

    So I ended removing the reference to the manifest in online.html, making a landing page, then redirecting to online.html which loads fine if there is a connection and if there is no connection falls back to offline.html

    But being that online.html isn't in the manifest any more, it downloads data.json from the server, which seems silly to me, being that it's sitting there in the application cache ready for use.

    So I have two questions, which I guess are the same question:
    Can I point online.html at the manifest with this:
    Code:
    <html manifest="app.appcache">
    but still make sure that it only downloads from the server?

    or, can I not point it at the manifest, but access data.json in the application Cache some other way?

    (or if there's some better way of doing this, what would that look like?)

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    the page linking to the manifest file is inherently cached.

    i don't understand the problem with caching the online page, it still gets updated upon the next visit.

    you need a real file url in the manifest attrib, no shortcuts there.

    you can frame a manifested page and use events to talk to an un-manifest-ed tab, but i think caching the online page is a lot simpler.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    the problem isn't the caching of the online page, it is that if it gets cached then it will want to load when there is no connection, despite the FALLBACK section saying otherwise.

    I don't get this bit:
    you need a real file url in the manifest attrib, no shortcuts there.
    you mean this?
    Code:
    <html manifest="app.appcache">
    because all that works fine (at least in Chrome, FF doesn't want to play, regardless of the url I use).

    I just want the online page to be able to access the data in the cache but for it to fall back to the offline page when there is no connection

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by xelawho View Post
    the problem isn't the caching of the online page, it is that if it gets cached then it will want to load when there is no connection, despite the FALLBACK section saying otherwise.

    Code:
    <html manifest="app.appcache">
    because all that works fine (at least in Chrome, FF doesn't want to play, regardless of the url I use).

    I just want the online page to be able to access the data in the cache but for it to fall back to the offline page when there is no connection
    ok, a few things.

    1. unless "app.appcache" is the name of the manifest file, and you configured your server for the ".appcache" extention, that is not valid, and any persistence you are experiencing is a byproduct of browser-specific quirks.

    2. it sounds like your manifest file is invalid, given that it doesn't work in firefox. If it doesn't work in firefox, it's almost guaranteed to behaving incorrectly in all browsers. i had this with chrome in particular for a long time, it seemed to be working, but totally was blowing-off updates.... it took a visit to chrome://appcache-internals/ to fix it, and a firebug snippet to run in about:config in firefox to repair the memorized damage. not all bugs are even in the manifest code itself, like a listed resource returning a 404 for example. make sure to check it with http://manifest-validator.com/
    i cannot over-recommend doing that, despite my ridicule of html and css validation over the years.

    3. loading a resource when the page is offline is what appcache is designed to do. if you want something different out of it, you are likely swimming against the current. fundamentally, the online and offline pages have to be the same page. perhaps localStorage or indexedDB/webSQL would be a better solution to archiving the data you need.

    4. you might try different urls in the manifest sections; data.json?online, data.json?offline. you will need to handle the dispatching and error handling in your code.


    5. why not just use if(navigator.online){ getNewData(); }, or something like that to pro-actively update if online, rather than relying on the manifest to route your resource?

    in short, i'm still not 100% sure why "loading without a connection" is a problem, but there's a million ways to skin a cat and i'm sure we can figure it out if these bits don't inch you towards the goal.
    Last edited by rnd me; 04-29-2013 at 06:58 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    xelawho (04-30-2013)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    thanks again for sticking with me.

    1. yes, "app.appcache" is the name of the manifest file (apparently .manifest is deprecated?) and I have set up the MIME type on the server for .appcache to be served as text/cache-manifest

    2. Viewing the entries at chrome://appcache-internals/ all the files are there. I saw your earlier note about the manifest validator, and it validates fine. I used a piece of debugging code I found here and there are no problems in Chrome. In FF it breaks the page completely, but gives no errors in the console (although my firebug console has been kind of lazy of late, too).

    I don't know if it's working correctly, or just reading from the normal cache. But like I say, I can disconnect from the net, go to the landing page which redirects wit js to the online page and from there it takes me to the offline page, where the data from data.json is available. Which says to me that the FALLBACK section is working. And the way I understand it is that if one bit of the manifest isn't working, it all fails. The console in Chrome registers all the necessary files as Application Cache Progress Events and all the resources are still there, under the resource tab in application cache.

    3. It is quite likely that I am swimming against the current, as I don't really know the capabilities and limitations of the various options. The online and offline pages are fundamentally different, which I guess is the problem. I was assuming that they could be, because online.html would never get served if there was no connection and would also run from the server if there was one, but it seems the opposite. I guess the NETWORK section is designed for pics, etc and not actual pages. I'm beginning to suspect that localStorage may be the way to go, although this did look promising and if not for this one annoyance seems to work fine.

    4. I don't see how different URLs would help me. I can access the data fine when I'm offline. The problem is that the online page wants to load when it's offline. But surely that's the whole reason why they invented the fallback section?

    5. That's a very good idea. Couldn't see the trees for the woods on that one. All I had to do was invert it, so that the online page loads with access to the cache but starts with an if(!navigator.onLine) redirect to the offline page.

    it seems to be working as it should, although that firefox thing is annoying me. One thing is for sure: this thing is a nightmare to debug!

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    so, it turns out that it is working in firefox - it just gives no indication of the fact, down to firebug saying that there are 0 items in offline cache

    You can see them when you go to about:cache in FF's address bar, but even clicking on the resources there gives you the message that "The cache entry you selected is not available."

    and on the off-chance that anybody is looking for something similar in the future,
    Code:
      window.applicationCache.addEventListener('error', function(e){
      location.href="offline.html"
    }, false);
    is a better way of telling if the user is offline, as firefox will return true to navigator.onLine even if you have disconnected the internet

    thanks for your help, rnd_me

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    i also had the idea of using POST to fetch...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •