I have Disable cache tick removed and still request is made on each video loop iteration(Only on chrome).
What Initiator: Other mean in chrome inspector network section? First time the video is loaded from the host, but after that all requests are loaded from Other.
Each iteration video size is the same, not (from cache). Is that mean the browser download it every time?
Can it be avoided somehow without saving the video in localStorage(I saw it in similar question), because this solution will not work in private browser mode and localStorage have size limit?
UPDATE
With Disable cache checked
Without Disable cache checked
UPDATE
Bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=680063
The meaning of this is that another process than Chrome initiated the request:
Some other process or action initiated the request, such as the user
navigating to a page via a link, or by entering a URL in the address
bar.
In the case of Chrome, video is decoded using ffmpeg which likely is this other process. The process is likely reopening the file from the cache which is why the request is initiated, or, the cache only holds the latter part (or max content length in sum) of the file in case the file is large and has to re-stream parts of the content over again - though, you state that when cache is disabled this doesn't happen.
localStorage has a very limited size and is not very suitable for storing video data (it can only hold strings so video must be encoded as mime-64 which increases the size 33% + each char takes up two bytes due to unicode).
A better alternative would be to use IndexedDB - this can hold much larger data as well as store the data in binary format (Blob). But it comes with an initial limit as with localStorage but contrary to the latter method you can request a larger size which the user need to confirm. I haven't tested, but I would assume you will run into the same limitations with private mode as with any other storage mechanism.
Yesterday I had the same issue. I found that Chrome's tab crashes after a couple of minutes. It looks it happens only when Disable cache is checked, but if this still bugs you, you can store the video into the local storage. More code in this answer.
Related
In one of the online documents that talks about appcache for HTML5, it indicates that the cached files get updated once an offline user reconnects. I checked the original HTML5 appcache definition by W3, and I am not able to find anything that supports this statement.
Does anyone know if this is to be true?
Thanks in advance
MDN says the following, although if you scroll up on that page it says it's being deprecated.
If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.
The browser then checks to see if the cache manifest has been updated on the server.
If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.
And logic tells me that it would also depend on the app you're using, server you're trying to connect to and any special settings it might have, how long your browser keeps it's history, what it keeps, and if you saved the page to view offline - whether or not you have all the code/images saved in the right location(s).
Example:
Imagine you saved a page to view offline, and that page has a JS event handler that ran a while loop that did an ajax request every n seconds to do something, like make a number on a page change as long as you were online... As long as the loop is running, you suddenly connect to the internet, and it makes the request to the proper url with the right arguments, then it should go through, even though the url in your browser might say something like file:///C:/Users/you/Desktop/....
I've done this before, even though my url was like the one above. One time I was using braintree's drop-in javascript to a website, and using it's api on my backend. Trying to load the page when offline = Nothing. Online = Updated the spot on the page just fine when I had the required arguments, and it was pointing to the right url. If I got offline again, I could refresh the page, see the same images loaded in the <div>, but I couldn't send any data with it.
I encountered a problem under Chrome. I need to load a big MP4 file with video element. After call function "play" , the video's API told me that it is buffered, and I find the buffered file under Media Cache folder. However, when I set the video back to the start or any other position that already been played before, browser still send request to the server and the cache indeed be deleted under Media Cache folder. Any one can tell me why this happen, and how to prevent it?
I've got an odd question. Say I have two HTML pages index1.html and index2.html. In both the pages is some jpg image called "Hello". When I use the browser to point to say www.testing.com/index1.html the browser will load index1.html and the image Hello.
Now my question is when I go click on some link in index1.html that takes me to index2.html, will the browser look to go to back to the server to get image Hello or will it use the Hello image used in index1.html?
It depends on the caching headers the server sends out alongside the image.
There are several ways in which caching can be done.
When a resource is served with an expiry date in the future, the browser will use its cached copy until that date is reached (or the cache is emptied or a refresh forced.
Another way is for the server to listen to the If-modified-since request header. The server can then check whether the resource has been modified since that date. If it hasn't, it will return a 304 not modified status; otherwise, the updated resource.
The Apache Caching guide is a (lengthy) introduction to the subject.
To see in your browser what caching rules apply, open its developer tools and look for the "Net" tab. It's a list of all the requests that were made in connection with the current page. It'll tell you whether a resource was loaded from the server, or a cached copy used.
For example, this result on a Stack Overflow image from Chrome's developer tools:
suggests the image was cached. When I click that row, I can switch to the "header" view, where I can see the exact caching instructions the server sends:
It means that as long as the browser has a cached copy of the image, it will keep on using that without ever checking with the server until December 17, 2014.
Different browsers handle this differently. It can also depend on user settings. Users can set the browser to cache nothing if they so desire.
When setting the prefer-online setting I expect the browser to request the page at every refresh of the browser, but it is not the case.
Here is my manifest :
CACHE MANIFEST
SETTINGS:
prefer-online
NETWORK:
*
Yet when I refresh the browser it only requests the manifest to the server. It only requests the page when I update the manifest ...
And there is no headers (expires or max-age) set on the page.
(tested on chrome & firefox)
NB: When updating the manifest, the browser re downloads the assets, but still displays the old version ... It is only on the next load that the browser uses the new assets. Why ?
I don't see what the AppCache manifest is for, since you want to bypass the cache and just use the network. Keep in mind that the regular caching might still apply, regardless of the AppCache manifest, so check the Expires, Last-Modified and similar headers.
As for your question:
NB: When updating the manifest, the browser re downloads the assets, but still displays the old version ... It is only on the next load that the browser uses the new assets. Why ?
This is because the user agent will immediately use the latest cached version of your assets, then start checking the linked resources listed in the manifest for updates. When the user agent detects that the manifest has changed, and thus it has to check for updates, it will fire a checking event.
When the update checking process has finished (and it might take a long time, if you have lots of resources) it will fire an updateready event. Only the resources fetched after this event will be the fresh new ones (that's why it's usually adviceable to use window.applicationCache.swapCache() to tell the browser to swap the old cache for the new for the next page load, or simply reload the page and be done with it).
You will find more detailed explanations about these topics here: http://www.html5rocks.com/en/tutorials/appcache/beginner/
HTML 5 offline logic is encapsulated in window.applicationCache object. However it looks like it's not possible to programmatically clear cache data, for example, when user logs off from the system. Is there any other way to clear HTML 5 application cache, except for generating empty manifest file?
Have observed this on Chrome not sure if that's the standard way, if server responds with 404 on manifest file request, cache gets cleared from browser after raising obsolete event.
Setting aside the specifics of the HTML5 appcache, clearing a browser's cache programmatically has never been possible (beyond certain ActiveX controls for that browser) so I suspect you may come up empty on this one. Perhaps you should focus on the cache control meta tag and test further with your empty manifest idea?
I think the best way to do this is to change the link to the manifest file. In this case I would append the user's session ID to the manifest file. Every user should have session regardless of logged in status and the session ID should probably changed when logging in/out (maybe).
I also found this answer: Removing HTML5 Appcache Manifest, Permanently