HTML5“收藏夹”离线缓存

Question

I'm currently building an application with which you can create playlists of song lyrics and cache them for use offline. You can also cache your favorites (JSON array).

Now, because the favorites are cached - the add favorite button doesn't work in the client side. Yes, it does save the favorite on the server side, but there are no changes in the client side.

What would you suggest me to do in order to fix this issue? Is re:downloading the cache on every single add favorite click the only thing I can do, or perhaps there's another way how I could resolve this?

Please note that I do know how to update the cache . I'm just wondering if there's a better way how to fix this problem.

Thanks!

Answer 1

Ill assume you need to update your HTML5 application cache through Javascript, in that case this guide should explain everything you need to know: http://www.html5rocks.com/en/tutorials/appcache/beginner/

What you could do is use a listener to monitor the updateready event on page load. Snippet from the above guide:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

As you updated your question stating that you know how to update your cache, ill also update my answer. Html5 appcache is designed to download everything, and there is no "fix" for your problem - this is how it is designed. Now if you are looking for alternative solutions you might want to ask a new question.