We are developing a third party java script file that is implemented as a widget on many sites (That we do not control the code of).
This script may be updated from time to time (As we modify it/ add abilities/ fix bug ...)
As the browser saves most js files in cache, we need to have some sort of solution to tell the browser to reload the Script. of course a naive solution is to make re-load always, but this solution is not very efficient, and code changes should not accrue often.
Any idea how this can be done?
The solution of changing our script src/url with "?version=1.1.1" cannot be applied here as this widget is third party and we do not have any control on clients website codes.
Thanks.
Since you are the 3rd party and are giving your clients a link to the javascript file they need to include, have them point at your javascript with a url like this:
http://example.com/file.js
Then use a redirect on your server (Url Rewrite/htaccess etc) to point them to the latest version of that file. Lets say you versioned your script by putting it into a folder and your latest version was 1.3. You would setup the redirect from http://example.com/file.js to http://example.com/1.3/file.js. Then every time you release a new version, update your redirect to point to the new folder.
EDIT: More detailed explanation
Related
Browsers cache static files. It's what they're designed to do. 99% of the time, that's a good thing. Until we as developers update that static content.
If a developer updates a javascript file, but a user's browser pulls the cached version of it, then:
Best case, it'll be missing some new functionality until the browser decides to update its cache
Worse case, if you also updated the html page to call a javascript function that didn't exist in the older version of the javascript file that the browser cached, your page breaks
As developers, we know to hit Ctrl+Shift+R, or Ctrl+F5, or open dev console, disable cache on the Network tab, and reload. But users don't know that.
What is the best practice to handle updates to static content?
Is it to make sure that when you add new functions to a .js file, you push out the update to production a few hours/days before you update the html to call that function in <script> tags, allowing browsers to updated their cache over that time?
Is it to not call javascript functions from HTML within <script> tags at all?
Is there a way to somehow force browsers to expire cache on a specific static file when you update it?
Something else?
Obviously disabling all caching on your site is possible, but not a realistic solution.
PS. I'm not using any kind of frontend framework - just raw javascript/jquery. If the situation is different with frontend frameworks, I'd love to heard about that too at a high level
If I understand correctly, you want the JavaScript file to be updated for the user when you update. you should use service work API to create a cache version for specific files or use the Google workbox library. click here. for service worker API click here
Some years ago location.reload(true) allowed bypassing the cache like CTRL / Command+Shift+R does. Only Firefox continues to support this feature by now, but the hard reload using javascript is no longer supported on chromium based browsers. (spec doesn't describe this feature (anymore))
This change was also discussed on this issue on github/Microsoft/TypeScript and several other places on the web.
jQuery uses a simple workaround to be compatible with almost everything. If you load something with jQuerys jQuery.ajax({ url, cache: false }), it appends a _=TIMESTAMP parameter to the url, which has a similar effect but may bloat the cache.
You can make use of the Entity tag header (ETag). Entity tags are similar to fingerprints and if the resource at a given URL changes, a new Etag value must be generated by the server, which is a similar behavior to the Last-Modified header. (caniuse:etag)
Entity tags in: Apache, IIS, nginx (nginx docs), nodejs
It is also possible to clear the sites cache with a Clear-Site-Data: "cache" header. (mdn, caniuse:clear-site-data)
So I am trying to download a complete HTML page in a React-Native app , so that the user can view the page later when they are offline too. I am rendering the page using WebView and it works without any issues when online.
For getting it offline, I am doing a axios.get to fetch the page and I'm storing it. But when I'm rendering this page I noticed that its missing all the css/images since, they were not part of the GET request. How can I download the complete HTML page and render it as it were online?
I'm not able to think of any way to download all the page's assets.
You need to download all referenced assets and possibly change references so they work locally. There are a few tools that can do this.
The simplest way is probably by saving the website using your web browser. This may or may not work the way you expect but it’s worth trying.
If it’s not enough, try tools like HTTrack or wget. Instructions here.
it similiar with my current issue, im facing with long time download aset time when user try to open the webview, its reduce UX anyway, then we should do something for better performace, and i found this package
https://www.npmjs.com/package/react-native-static-server
but i worry about the long term maintenance of this package, if the package some day not updating their package when react native updating their library, ist gonna be worst scenario.
Since implementing Cloudflare some of my includes aren't working.
One specific example: Inside the includes folder, I have a sub folder "texter". Here I have a php page that references a Javascript library in the same folder. The page receives a GET request with variables, then parses on the parameters to an external 3rd party API.
When Cloudflare is disabled/paused the mini app works.
I'm using Page Rules to disable Cloudflare activity for my includes folder but it's still not working.
e.g. Pattern: *mysite.com/includes/* - With all rules and chache set to disabled.
How can I get my web app running while Cloudflare is also running? Am I on the right track? Thanks in advance.
Edit: I'm using htaccess to limit direct access to these directories... could this cause an issue?
Hmmm...this goes away with us paused? Do you have something like Rocket Loader turned on in your performance settings (can potentially impact jQuery or JavaScript).
Do any error messages appear at all?
Here is my current setup:
I have a script on our Sharepoint.
Each user adds this in a bookmarklet to use it.
If I make an update, they have to go and set up the bookmark all over again.
What I want to do:
User adds script loader to bookmark toolbar
They click it, and it loads the script from our Sharepoint.
This way, if I need to make any changes, they don't have to do anything and changes will be reflected automatically.
My bookmarklets/scripts depend on jQuery to make ajax quests and just for general ease of use.
I am currently using this: http://benalman.com/projects/run-jquery-code-bookmarklet/
Is there a framework that I can use for this kind of thing? I know Visual Event uses a loader, but since it was compressed with Closure, I can't really tell what it's doing. I understand that since things are loaded asynchronously in Javascript, I would have to wrap all my code inside of jquery being loaded, which is fine.. I just need a way to do it.
all you need to do is move your bookmarklet code to an external js file, and then inject that file using a bookmarklet. That way, the bookmarklet injects the latest logic, and you don't have to ever re-bookmark again.
in that external script, you can paste the jQuery.js file's contents above your JS code to make sure it runs as expected.
modify the url to point to your script:
javascript:(function (){document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src='http://domain.com/scripts/external.js?'+Math.random();}());
if your intranet has decent caching setup, you can remove the "+Math.random()" part, but on an intranet, performance is rarely a problem for on-demand single-url asset loading, the the random url ensure everyone always gets the latest copy.
I would like to make a js file external for my client... for example, I will give him a link like this:
http://mydomain.com/yourjs/this_is_your.js
But I may update the this_is_your.js and deliver to the user. So, my question is... how can I ensure the user get the latest .js file... So, I have an idea, when I made a new version, I just upload the latest this_is_your.js to the server, then when the web page polls again, the latest .js received. It works, but I would like something more generic... is that technically achievable? Any advices? Thank you.
You could do the same as GWT does. Have a small file (nocache.js) that wont be cached. In that file you refer to your latest version of your js file. Each version of the actual script has an unique name and therefore it can be cached.
Dynamically load a JavaScript file
How do I include a JavaScript file in another JavaScript file?
One problem I see with your scheme is that the version of javascript a client has is subject both to what you serve and to how recent the client's cached version of it is... Perhaps you can wrap your script file in a client-side request that takes into account a cookie that you can make obsolete when a new version is out. Just an idea, but I would worry about the performance.