I have an app which downloads 1000 small images and writes them to indexedDb (using localForage). Upon the completion of the download, and the 1000 indexedDb setItems, I look in the devtools and the database is empty. I see the message "Data may be stale". Clicking "Refresh database" makes no difference. If I load a copy of the app in a second window, it sees an empty database. After a minute or so of reloading the 2nd window, the data appears.
Can anybody explain what I'm seeing, and if there any optimisations I can apply to have the data available more quickly?
It means that the indexedDb has detected an data that is not in syn with your present project. Also, be sure to include a break statement if your using a switch statement
Check out this link for more info
Data may be stale
Related
I have been trying in vain to update my website. I use the following information for a connection:
server
name + password
port
SFTP
When I save the file, I get a message that the file was uploaded successfully.
However, the website does not update.
In addition, the file on the server does not seem to correspond to the file displayed on the e.g. homepage.
I am happy about every answer.
Thank you in advance.
Maybe the files are cached so even though you change the files, server might be responding you with cached results. To check if that's the case, open your developer console, then go to Network tab and then refresh your page. When the data is loaded, check if it says "cached" on "Status" column. If so, try force refreshing your page by pressing CTRL+F5.
I opened my website in Chrome last night, then closed that tab, but didn't close browser. Today I failed to open my site in a new tab because jQuery(not use CDN) hits a syntax error: unexpected end of input.
My site always hits this error no matter how many times I refresh. But the error didn't happen again after hard refresh.
This problem happens many times in recent months.
I checked Chrome devtool, it says my jquery.min.js is loaded from memory cache. And it is not a whole file, only contains part of jquery library. That's why I got syntax error.
I did some research from google:
The lifetime of memory cache is attach to the lifetime of render process, which roughly corresponds to a tab.
So if I create a new tab to visit my site, stands to reason, jQuery should not be loaded from memory cache.
I expect browser do not load my files from memory again if I visit site in new tab.
Is there anything I can do to locate the problem source and fix it?
EDIT (2019-05-13):
Today hit this error again, but fortunately, I found new point seems helpful to this problem.
This is that request:
See status code is 206 Partial Content (from memory cache).
And I have no idea why my request header contains 'Range' field.
You can't detect newtab in browser and load your jquery.min.js,But you can avoid loading from cache by adding timestamp into suffix of your lib like follows.
http://yoursite.com/lib/js/jquery.min.js?1557301884
You can achieve this in two ways
Case:1 If you are using server side page rendering means(PHP,JSP) just print the timestamp
Case:2 If Client side means some javascript stuff you have to do
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 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.
i am looking for a solution for an auto-complete dropdown box which needs to load entries from a huge json (json file is also being updated / generated every second.)
I tried "typeahead.js" but by default it caches the json file in browser and was not able to display new entries added to json file.
is there a solution for an auto-complete text box which can load entries from the server as fast as possible ?
please suggest.
thanks
In your case, you can take advantage of Bloodhound, the typeahead.js suggestion engine. It provides two options. Prefetch and Remote.
In Prefetch, data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.
In Remote, it will fetch data from remote source when ever you need it. But remember, in order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited.
I think you should user Remote option in your situation.
Reference : Link
There are two ways which are mentioned in the documentation for typeahead.js
You can make the TTL value = 1 for prefetch ( this did;t work for me )
https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md
Or you can use clearPrefetchCache on click page load or click of a button .
category.clearPrefetchCache();