Force live users to expire assets for JS Web Apps - javascript

Our web application is built on AngularJS and Ruby on Rails. Sometimes we find a bug in the JS and need to patch it immediately. We push up an update to Heroku and the new JS files are then live. However, users on the site (who are currently on the site) and do not refresh their page, are still using the old JS file.
Is there a way to force refresh of the assets on deployment with Heroku? Or, is there a better way to handle this type of problem?
I am thinking of using web sockets to possibly handle the scenario.

Related

GatsbyJS - Automatically re-build & deploy project on changes in the Wordpress backend?

I was wondering whether there is a way to automatically re-build & deploy my gatsbys site, once something changes in the wordpress layer (i.e. somebody adds a post)?
I am thinking of using gatsbyjs with a client and want to enable the client to update content automatically, but would love to keep the site static. Is
there anything like this out there? Any advice on how I may proceed?
You can setup a webhook from WordPress that will trigger your Gatsby build process to run again. If you are deploying to Netlify, they support webhooks to trigger rebuilds. If you have some other build process, you will need to decide how to have it re-run on a web hook.
WordPress.com supports webhooks, and there are plugins available for self hosted WordPress sites.

cordova/phonegap app - load js css and html from server

I'm developing an cordova app for Android which has a lot of logic (js) and design (html/css) same as my web application. I want to share these assets among web app and android app. Now I had compiled all these js and css in apk, but when some code is changed, I have to prepare an update and put in the play store. If it would be possible to load code and css from server after app started, it would reduce need for upgrading. Is there any way?
I'm considering loading shared resources via ajax and dynamically creating stylesheets and scripts in DOM, but maybe there is better approach, isn't it?
You could download the files from server every time, but i think that is not what you want because it would not be availibe offline at all and if the app it big and the connection bad it will take much time to download.
a better way is to download the files if they change. you can do that with FileTransfer.download() yourself or use a ready solution like the cordova-standalone-hydration
BUT your app will not be accepted by for example Apple because they deny an app with code they can not check
I found a plugin where you can update all your files in the WWW folder on startup or later.
Link: https://www.npmjs.com/package/cordova-plugin-dynamic-update

Should I include all my sources in my PhoneGap app, or request them from a remote server?

I'm currently trying out PhoneGap, and by the looks of it I'll probably need to use at least one framework: jQuery Mobile, Bootstrap, whatever. Either way, I'll need to reference that code in my app's index.html. I heard that when you do that on a website, you should always request code from a (popular) CDN because unless you're requesting a super-new version of the framework, there's a good chance the client already has a cached copy. Is this the same for apps?
I would include it in the app. A PhoneGap app runs entirely from your phone, unlike a website, which you fetch from the internet. If you use a CDN your app now requires the user to have an internet connection to use the app. Depending on your app, this might not be a big issue if it already requires a connection to work properly.

How to deploy WaveMaker project without runtimeLoader.js

WaveMaker is a powerful ajax based UI builder, but its JSON-RPC API standard is incompatible with our web service, which only has a RESTful API. As a result, we would like to design an UI without using any service using WaveMaker, and only extract part of its source code that runs on browser side (discarding all services)
Unfortunately, we can neither view or test the extracted code (all .html files show an empty page), a javascript reference in index.html is pointing to runtimeLoader.js, which we cannot find anywhere. So, is it possible to deploy the browser side code on a web container (not an application container like Tomcat) without runtimeLoader.js? If this is not possible, how do I change the source code so it can be tested without using WaveMaker?
If you don't mind having a java server in the mix, you could "import" REST calls to your API into the application. The XHR service (new in 6.5) targets JSON returning services. The 'Build-a-Service' does best with XML returning services. The browser would then call the WM java server, which in turn calls your REST services.
An easy way to get started with a WaveMaker client only app is to use the phonegap build option. This will build a zip file of a stand alone app. If you unzip that into say an apache served folder, you will render pages, etc. Note this build is targeted towards mobile devices via phonegap, so you will want to make adjustments if you are targeting desktop browsers.
Also, runtimeLoader.js can be found in the client runtime lib folder. e.g. /studio/lib/runtimeLoader.js of the installation.

If I upload a new version of a javascript file to Amazon S3, should I expect browser caching problems?

We have a large number of people (10k+) who return to my clients' sites on a regular basis to use a web app we built, improve, and host for them. We have been making fairly frequent backward-incompatible updates to the web app's javascript as our app has improved and evolved. During deployments, the javascript is minified and concatenated into one file, loaded in the browser by require.js, and is uploaded to and hosted on Amazon S3. The file name & url currently doesn't change at all during updates. This last week we deployed a major refactor to the web app and got a few (but not a lot) of reports back that the app stopped working for some people, particularly in firefox. It seemed like a caching issue. We were able to see it initially in a few browsers in testing but it seemed to go away after a refresh or two.
It dawned on me that I really don't know what browser-caching ramifications deploying a new version of a javascript file (with the same name) on S3 will have and whether this situation warrants cache-busting or manipulating S3's headers or anything. Can someone help me get a handle on this? Are there actions I should be taking during deployments to ensure that browsers will immediately get the new version of a javascript file? If not, we run the risk of the javascript and the server API being out of sync and failing, which I think happened here.
Not sure if it matters, but the site's server runs Django and the app and DB are deployed to Heroku. Static files are deployed to S3 using S3Boto via Django's collectstatic command.
This depends a lot on the behaviour of S3 and the headers it sends when requesting files on S3. As you experienced, browsers will show different caching behaviour - so the best option is to use unique filenames.
I would suggest to use cachebuster hashes - in this way you can be sure that the new file always gets requested by browsers and you can use long cache-lifetime headers if you host the files on your own server.
You can for example create a MD5 hash of your minified file and append it (like mycss-322242fadcd23.css). Or you could use the revision number of your source control system. You have to use the cache buster in all links to this file, but you can normally easily do this in your templates where you embed your static resources. Depending on your application, you could probably use this Django plugin that should do this work for you.

Categories

Resources