HTML5, how exactly does appcache work?

Question

so ive got a file-server thats listening on my IP.

I created a test.html, test.js and a manifest.appcache. My appcache says :

CACHE MANIFEST
CACHE:
test.html
test.js

NETWORK :
*

Meanwhile, my test.html :

<html manifest="manifest.appcache">

If i access on the test.html, everything is working, however if i want to change something in my html file and reload the page, nothing changed(the old html file is cached).

If i change something on my appcache file, for example just edit a space behind the variables and reload my page, it accepts all changes from my html file and is not ignoring the changes anymore.

Why is that? How can i make it listen to my html file everytime i reload the page?

Maverick · Accepted Answer · 2017-11-23 10:44:48Z

2

This is how the cache works. If you want to refresh the cache as you already said you need to change your manifest file.

You must modify the manifest file itself to inform the browser to refresh cached files.

But you can use JS to check if the cache is changed.

You can get the cache object like this: window.applicationCache

window.addEventListener('load', function(e) {
  // Add an event listener to the cache
  window.applicationCache
        .addEventListener('updateready', function(e) {
    // Check if ready to update (The update ready status is 4)
    if (
         window.applicationCache.status ==
         window.applicationCache.UPDATEREADY) {
        // Get new app chache
        // window.location.reload();
        window.applicationCache.swapCache()
    }
  }, false);
}, false);

Check the official docs here: https://html.spec.whatwg.org/#applicationcache

Please note this feature is deprecated an you shouldn't use it

From MDN:

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

What should I do?

You should be using the new Service Worker API, it is a direct replacement for the Application cache. Service workers have all the features off App Cache and even more.

For Service Worker API check these:

edited Nov 23, 2017 at 10:44

answered Nov 23, 2017 at 10:35

Maverick

8962 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

samecat Over a year ago

I kinda know that its the functionality of a cache, to save the loaded data. But i had to add the manifest to allow my application : Access-Control-Allow-Origin . Can i bind it to a service worker?

Maverick Over a year ago

@samecat Take a look at this: developers.google.com/web/updates/2016/09/foreign-fetch I don't know if this is what you are trying to achieve.

Collectives™ on Stack Overflow

HTML5, how exactly does appcache work?

1 Answer 1

What should I do?

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

What should I do?

2 Comments

Your Answer

Sign up or log in

Post as a guest