We use Appcache of our SubToMe button.
The benefit of loading the code once from the server and then keeping everything in the user browser is exactly what we want and it works grear. By loading in Chrome, you'll see in the dev console that all files are loaded the first time, and if you refresh that no other file is ever loaded.
However, the button is meant to be loaded form other sites like on a blog. The html button has a onclick listener which will just add a script element with an src point to https://www.subtome.com/load.js. For some reason, this file is not loaded via Appcache, even though it is in the manifest and if you get it directly (by putting its url in the browser bar), then it is fetched from AppCache.
Anyone knows how we can force the browsers to use the Appcache version when loaded from a 3rd party site? Or is that not possible with Appcache.
"Over SSL, all resources in the manifest must respect the same-origin policy."
See http://appcachefacts.info
Related
I've implemented this script on my Squarespace website using the wexley template to make images in a gallery act as links (Wexley does not support clickthrough URLs natively).
It works fine, but if I add any thumbnails to the gallery it will not work until the browser cache is cleared.
I am wondering if there is a way to fix this? Perhaps through:
1) setting an expiry on the cache? I am not in developer mode so this would have to go into a header injection
2) Versioning? I tried hosting the javascript as a file elsewhere on my site. This worked (it pulled the script from another location) but still get the same issue, even when I upload a new script file and point to that after updating the page!
You can force the client to download the field again. To accomplish this you need to make the clients browser to think it doesnt have the script in cache. You can do this changing the file name.
Imagine you have this folder structure:
index.html
index.js
If in your index.html you reference the script like src="index.js" you may force clients to download just apendding a query string to the import: src="index.js?0"
Now clients browsers will check if this file is in cache, and since it isnt, they will fetch from the server.
Checking the resource loading on my page I realized that the script was not being cached so it was something else getting cached that was interfering.
Because I am not in dev mode, I implemented a fix that relies on appending the URL with the date of the update, and then setting up 301 redirects.
The URL and redirects (2 total) would have to be updated when any content is added.
If anyone sees issues with this (relating to SEO or some unknown), I would appreciate your feedback.
Is there a way to block a particular line of code from being executed within a third-party website, appearing within an iFrame?
I have an embedded widget which is loading JQuery within the iFrame. I don't need the extra network request, because my site is already loading JQuery.
If I can block only one line of code (in this case, line 77) then I can prevent JQuery from being loaded again.
I imagine this action would take place prior to the iFrame being rendered.
The same-origin policy prevents you from touching any part of an iframe for a third-party website, so there's nothing you can directly do to prevent that request from being sent out. Even if you could, the iframe and your website have no shared state, so the other website will most likely break because it has no way to access your instance of jQuery. Think of what would happen if you loaded the third-party website in a new tab but blocked the request.
There are, however, a few things you can do to ensure the browser uses a cached copy of the library, which doesn't actually send a request anywhere:
If the external library is being loaded from a CDN, there's a good chance some other website has requested that same URL, so that user's browser has a cached copy of it.
Since you yourself use jQuery, you could use the other website's same version of jQuery. That way, a user's browser will have a cached copy of the file already from the CDN and no second request will be made.
Otherwise, if the website is using an old version of jQuery that you cannot yourself use or if it is being self-hosted without a CDN, there's nothing else you can do.
is it possible to reload the content of the viewport without reloading the whole inspector.
I would like to make some changes to a javascript file in the debugger then reload the page to see the temp changes I have made (on load), before I commit to the file and upload. Where I'm working at the moment there is caching I can't get round so I have to wait a minute or two to see what my changes do on load.
I have found the page I want to work with under source and can save changes, but really need to see some actions that are fired on the loading of the page.
Is this possible?
Thanks
you can't do that with chrome debugger tool. each JS resource will reload on page load so you will loose your change.
you can proxy tools like Fiddler which will allow you to load script from your local machine while loading a third party website. You can create a copy on your own machine and then use fiddler to intercept the call for that file and send your local copy instead
I would like to do something similiar to opening the developer tools in chrome and checking disable cache and then reload the page.
I can't modify the urls in any way (eg. appending a timestamp in the query) as this will work once, but next time I reload the page normally, the resources will load from the old url without the timestamp and be the old cached version.
I only need support for chrome and I don't have access to the server.
Basically I need the resource files to be update in the chrome cache, without altering the url.
referring from this topic: Prevent browser caching of jQuery AJAX call result
As you are able to editing the server-side script to setting no cache header, it is hard to handler it perfectly on IE. The only way can do for client side is unfortunately adding timestamp on end of the query string.
In Chrome reloading all page resources regardless cache can be forced by long pressing Refresh button while developer tools is open
I am working on an offline web app using a cache manifest file. I am having trouble refreshing my javascript files. If I change a .js file (which is listed in the manifest file) and I then change the manifest file version no. and save it, then the changed .js file does not get reloaded on the client. What do I have to do to get .js files to refresh?
Thanks
That's because the webserver tells the browser cache static files for a few hours. So the browser doesn't know the manifest file is changed. You can clear all the application data 'or' config the web server the manifest is not cacheable...
Read http://diveintohtml5.info/offline.html for more info
If you want to clear your app cache on chrome use chrome://appcache-internals/
and by hand you have to search in C:\Documents and Settings\YOURUSERNAME\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
I had assumed that you if you use a cache manifest and then refresh the manifest, that the browser would request all of the files again. However, I have found that I needed to explicitly set headers in all of the files in the manifest to tell the browser not to cache the files. I believe that once the manifest tells the browser to request the file again, the browser treats it like any other non-manifest cached file. Maybe this is an error with Chrome, but I feel like I saw this in another WebKit browser.
Regardless, set the headers for the files in the manifest to never be cached and they should reload when you update the manifest. If these files are used outside of a manifest page, you may need to actually cache the files depending on your needs.
Type chrome://appcache-internals in your address bar then click ENTER
A list of cached manifests will appear then just delete the one you want and everything will be refreshed when you load your page again.
Hope this helps :)
I had the same problem until I came across this priceless warning on the
Mozilla Developer site
Important: Do not specify the manifest itself in the cache manifest
file, otherwise it will be nearly impossible to inform the browser a
new manifest is available.
woops. my bad.
However, every time I change something in the code, I need to change something in the manifest, and then reload twice, which is an unrelated issue.
In my case, i has to disable the traditional browser cache using meta tags. See this SO question how to that