I'm working on a small project which requires HTML5 appcaching. For this small project I need a simple .gif image and the page itself to be cached. Saving the cache works fine, both browsers also show the cached version.
But when i'm releasing a new manifest file, with other .gif images on the server, FireFox and Chrome won't show the newest version of the site. This happens even when i'm clearing the browser cache. when i'm trying to do the same thing: save page in cache -> edit page -> update manifest file version -> refresh page, swap cache, in Internet Explorer, it's works perfectly and always shows the newest version of my webpage
Here is my manifest file:
CACHE MANIFEST
# 2012-02-21 v1.1.50
Index.html
pic.gif
NETWORK:
*
And here is my method for swapping in the new appcache on the updateready event:
appCache.addEventListener('updateready', function(event) {
$.mobile.loading("hide");
console.log("Update ready.");
if (confirm('Een nieuwe versie van deze pagina is beschikbaar, wilt u deze weergeven?')) {
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
Can someone please tell me what i'm doing wrong, or even what the browser is doing wrong? And help me both Chrome and Firefox showing the newest cache version aswell?
Thanks in advance!
Edit: bump! Stil haven't found a solution yet, please can someone help?
Edit 2: bump, again! Still no clue about this.
Another BUMP
Related
As in the topic.
I created a 32x32 favicon.ico file and put it into a project folder.
This icon shows nicely on a browser's tab but when I drag this tab to bookmarks icon changes to a terminal icon.
I run page locally with flask development sever and Firefox.
I tried different locations and formats with the same effect.
I suspect some Firefox's settings needs to be changed because Chromium and PaleMoon are fine.
Any ideas where else to look?
This is just an annoyance but any help will be appreciated. Thanks.
Favicons in firefox are loaded dynamically that is each time you open a tab, this has been a bug about it until recently this study was released this showed that favicons are capable of tracking browsing activity as favicons are saved by other browsers to local disk, then firefox made it a feature ;).
Later supercookie was released and showed the proof of concept working.
But to answer your question firefox loads then each time when connecting to the server which was a bug, which now is a feature to have the favicon retrieved opening eachtime.
I updated a reactjs site and put up a static site instead.
The react site was created with create-react-app and was compiled and served with ngnix, as is the static site.
I can see the new site with Safari and Firefox and Chrome on my phone. The issue is that Chrome on my laptop still shows the old React site.
If I open incognito mode it shows the new site. I have:
Cleared all cache/cookies/etc in chrome
Opened developer tabs and made sure "Disable Cache" is checked
Done the "Emtpy Cache and Hard Reload" thing with the dev tools open
Why is it still caching? How can I make chrome forget this domain?
OK, based on Carlos Alves Jorge's link above:
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
I ran that in the javascript console and it worked!
Thank you!
Edited to clarify the underlying question.
I am trying to debug a simple HTML5 webpage containing one image and one video. Everything displays fine. The video plays correctly. But, when I try to refresh the page, everything is downloaded except the video file. I am using the Firefox developer tools but I can't understand what is going on.
On the network tab I see the .html file being downloaded, then the image.jpg file. But I never see the video.mp4 file downloaded. The video plays OK, but it is not the current version on the server. It seems to be a previous version that has been cached.
I'm mystified why this should be. The cache is disabled in developer tools. I'm refreshing the page with Ctrl+F5. It's as if the video is being served from some secret local cache that I don't know about. I'm using Firefox 47.0.1. The same thing also happens when I test with Firebug.
Edit. I have now tried Developer Tools in Chrome and it's exactly the same. The very first time I access the page, I can see video.mp4 being downloaded. On subsequent reloads, I see the .html and .jpg files normally, but not the video.mp4 file. It must be cached somewhere because it plays. I disabled the cache in Chrome Dev Tools. I cleared the cache explicitly and tried an incognito window. Apart from the very first time, I never see any indication of the video file being downloaded.
I must be missing something obvious. Can anyone else reproduce this?
Here is my HTML.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Test page.</p>
<img src="media/image.jpg">
<video src="media/video.mp4" controls="">
Display this if the browser can't play video.
</video>
</body>
Information moved from comments on an answer to the question:
1:
Thanks #nakji. Clearing the cache and private browsing made no difference at all. But closing the browser did. I reopened the browser after clearing the cache. On my very first access to the page I could see two GETs for video.mp4 with responses 206 (Partial Content). But after that it was back to the original problem. I will download Chrome and try that
2:
#ManoDestro. I tried everything possible to force a fresh download of video.mp4. But it's not happening. I reloaded the page with Ctrl+F5. I turned off caching in Dev Tools settings. I cleared the cache manually. I tried a private browsing window. I can't think of anything else. It's like the video is served from a secret cache that doesn't obey the normal caching rules. I have used multiple tools to confirm that the file is not coming down the wire - FF Dev Tools, Firebug, and now Wireshark. Can someone please test with a similar setup?
After a whole day's Googling I can now answer my own question. It turns out that Firefox has a special "media cache" for HTML5 video and audio content which is completely separate from the regular cache that everyone knows about. It is optimised for the high bandwidth and huge files associated with media content. One of the devs, Robert O'Callahan explains it all here.
The dumb thing is that this media cache doesn't seem to get cleared when you would expect it to. In fact it never seems to get cleared. Ever. The result is that Firefox keeps serving up stale content from the cache when you really want it to fetch the media file again from the server. This was the problem I was trying to debug originally. Firefox kept playing the wrong video after I changed the file on the server. I couldn't get it to download the new version.
All the things you normally do to force a page reload don't work with the media cache. The following have no effect.
The user selects 'Clear recent history' and deletes everything.
The user turns off caching in Developer tools.
The user forces a complete page reload with Ctrl+F5.
The only thing that does work is closing the browser and starting again. I'm still finding my way around this complex area. If anyone knows any more about it, please comment.
I reported this as a bug to Firefox here.
HTML5 appcache is not working in chrome as expected?
For example
http://html5demos.com/offlineapp
when you load the above URL is will save locally,but when you refresh the page again it will not render properly.
MANIFEST file:
http://html5demos.com/html5demo.appcache
will cache the following files :-
images/shade.jpg
images/bin.jpg
/js/h5utils-offline.js
/css/html5demos.css
expect these files every other resources are not rendering when we refresh the page.
expected behavior:
All other resources(which are not in MANIFEST file) should load properly when user comes online.
but in Firefox this is working almost fine.
Why chrome is not working as expected ?
It will be great if there is some perfectly working demo.
html5 appcache is at risk and may be removed:
http://www.w3.org/TR/html5/
http://w3-video.com/Web_Technologies/HTML5/html5_attributes/html/html5_html_manifest_attribute.php
Non-cached resources will not load on a cached page. See Gotcha #5 from this article:
http://alistapart.com/article/application-cache-is-a-douchebag
Using the network wildcard:
NETWORK:
*
...would fix this.
I have a problem with HTML5 appCache on Firefox and IE10.
I have build a minimal test case available on: https://docs.google.com/file/d/0B7CVmRJOMgTNZUxkLWRDNmhtVU0/edit?usp=sharing
Accessing the page at "applicationCache/test.html" the browser will look for the correct manifest and will start to download all the content from the files in its list.
The problem occurs when I put in the list a .php file handling COOKIES; for example I have added a .php file which will call the php function "session_start()".
Chrome and Safari can handle correctly such file during the application cache download.
Firefox and IE10 share the behaviour: they halt and signal a generic error.
During a long search I found out this ticket on bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=722683
Is there anyone who can give me a hint to handle correctly the COOKIES during applicationCache download event, without getting an error ?
Am I doing something wrong or against the standard ?
Thank you for your assistance!
I am not sure but can you make use of the localStorage instead of cookies?