I have a website developed in AngularJS, and index.html serves the root of the application.
All the JS and CSS versions are maintained in the index.html itself, which means for any changes to reflect to the user, "index.html" is to be reloaded at the browser.(correct me if I am wrong here).
This is a problem, since there could be chances that the user has a tab opened of our website in his browser and we have published a new release. This release will not be published at user's browser till the time a "Manual refresh" is not triggered and "index.html" is not reloaded and hence bring up the possibility that the user will not be using our latest release.
We have written a framework to reload all resources once a release is detected by sending the latest version from web-server and comparing this with the current version in the browser and trigger a reload automatically. This fix works fine, but the problem again is, how to publish this release first time to all user's browser?
I hope you get my problem? let me know otherwise.
This is not possible. There is no way to force an open page to refresh if it does not already have code to implement that feature. You will have to wait until the user refreshes it themselves, and the browser cache expires, and any intermediate caches between the user and your servers.
I recommend searching to learn about "HTTP caching" if you are not already familiar, as well as "cache busting." In general, you may want to consider making index.html a small file that references your big files in <script> tags, setting the cache control for index.html very low, and use cache busting techniques on your big files.
But for your first release, there is no way to invalidate open tabs or existing caches. If this will cause a problem with your server, read up on "API versioning" for different ways to handle it.
Related
I have seen various solutions for this approach, like adding a version number to my CSS file in index.html or adding a no-cache meta tag.
But all these solutions do not entirely fix the problem.
I want the browser to load from the cache when there is no update. But, if there is a new update, I want the browser to automatically load the fresh content from the server(that is, load the entire index.js file from the server) without the user having to reload the browser hard.
Also, my updates are sometimes not visible in the incognito mode. Why does this happen? As far as I know, there are no cache files in incognito Mode.
We have some medium website (> pages) and would like to prerender the entire site. Upon content changes in some external system, we would like to update only the specific page which contains the updated content and deploy the updated version of the page as static html page to some publishing service (webserver, CDN, Netlify, etc.).
I have seen that SvelteKit supports this SSG rendering approach through the adapter-static but as far as I've seen it always builds all the pages/routes for every build. This is currently a blocker because if an editor updates some content it takes more than 15 minutes (rough estimate if you have around 1500 pages) to see this update online.
Is there already some possibility to simply build some specific page or route?
Looks like that this is still an open feature request and to be discussed there: https://github.com/sveltejs/kit/issues/2369
I have a challenge in my PWA. because of performance issues, I can't download all js files in the initial load, so each page, download its chunk, in loading time. in this case, if I deploy a new version and the previous' deploy chunk isn't downloaded yet, deploy time active users, will find a crash on application.
I need to know , is there any way to download all chunks and update PWA in background in service workers?
Under some scenarios, you could use Periodic Background Sync to keep cached data up to date via periodic refreshes. However, it's not intended as a way to allow you to cache critical resources for your web app—think of it more as a way of making optional, nice-to-have, updates.
If you have resources that need to be cached, and those resources are all versioned together, they should all be added to the cache inside of an install handler.
If you can't download all files inside of that install handler then I think you need to reconsider whether using a service worker is the right approach for you, because there's no guarantee that you'll end up with a consistent cache using a different approach.
One workaround that you might consider is to show a "Loading..." or "Download assets..." splash screen when a user first comes to your web app, before they can interact with it, and while that screen is up, register your service worker and allow it to populate its caches inside its install handler. Once the install handler completes, you can then remove the "Loading..." screen and allow your users to interact with your web app.
First, I apologize that I don't fully understand what's going on here. I am new to AngularJS and I am building an app that I am running on localhost:3000. I make changes to my files, and I refresh the localhost:3000 page.
But after a few times of doing this, my changes do not get passed to the server.
Upon inspecting the developer tools, I see that it is using an older version of the file that I have overwritten with new code. No matter how many times I refresh the page, the changes do not get passed to the server.
If I come back after a few hours, it gets all the changes like it should. But only the first time, because every time after that I have the same problem.
I've tried restarting the http-server, I've tried closing and opening the editor, closing and opening the tab, restarting my computer, but none of these fixes the problem permanently.
If you need any more information, I'll edit it into this question. Thanks!
Try clearing your browser cache
Either
ctrl + f5
or
Right click on refresh button and choose the last option (hard reload)
(only in chrome, I guess)
That's almost certainly a caching issue.
You need to look at the network traffic when the page is downloading.
How you do that will depend on the browser you use, but try pressing F12 for a start
Check the RESPONSE headers for anything "cache"
Also check for a Status code of 304 - "Not Modified"
That might reveal to you instructions from the server to the browser to cache the file for a few hours, or that the browser is being told the copy it has is up to date.
Alternatively it might be server side caching, in which case I can't help you much.
One other solution is to change the file reference to include the date modified as a query string.
e.g.
instead of
src="/scripts/myscript.js"
use
src="/scripts/myscript.js?dt={filemodifieddateformyscripts.js}"
I'm assuming the issue I'm having is related to caching. Code changes I make are not getting picked up when I debug. Most times I get served a previous version of the app. How do I prevent this from happening?
Ctrl+F5 is an easy way to refresh a page and clear the cache of that page at the same time - it may help :)
Try to add to the page that hosts Silverlight application on Page_Load:
Response.Cache.SetExpires(DateTime.Now.AddSeconds(-100));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Append a "version" querystring to your XAP Url, something like:
http://localhost:1234/ClientBin/my_silverlight_app.xap?v=1.0.287.5361
This will trick the browser (and many web servers) to think that this is a different file. And when the cache problem appears again, increase the number.
If you then want to employ proper caching, do it on the server-side with OutputCache directives.
As far as I see, this seems to be a problem with Firefox - when I used IE8, this didn't happen to me (I realize this may open its own can of worms, but at least for debugging and testing Silverlight, IE is much better)
I have not had any issues with Silverlight assemblies getting cached - you might want to try debugging the HTTP requests that go back and forth, to see if maybe your server is instead returning incorrect information to the browser (e.g. a "not modified" response).
For general no-cache behavior, the only reliable method I have found is to turn off caching in the browser.
For IE, this has been the only reliable option - otherwise, even if proper no-cache headers are sent, certain things are still cached (specifically, dynamically loaded resources which are accessed via Javascript XmlHttpRequest). I have not specifically had issues with Silverlight getting cached when it should not, though - IE has always loaded the latest updates even if cache is enabled.
Firefox has been much more problematic - even when disabling cache, it still sometimes caches XmlHttpRequest-loaded resources. Manually hitting Refresh a few times has been the only solution in such a case. Once again, I have had no issues with Silverlight assembles, even if cache is turned on.
In Firefox, I use the 'web developer' plugin and simply select to 'disable cache'. Works fine.
Firefox 3.5 under Tools has the option for Private Browsing. Click that to disable caching.
Here is how I have done it for flex/flash and silverlight and it works.
Code Behind ASPX or CSHTML
string slUrl = "/ClientBin/MySilverlight.xap";
string filePath = Server.MapPath(slUrl);
FileInfo info = new FileInfo(filePath);
// this will force browser to
// re download file if file was
// updated
slUrl += "?t=" + info.FileWriteTime.Ticks;
ASPX or CSHTML
<embed ....
src="<%= slUrl %>"
..
/>
Trick is you have to change url by adding something after ? and make a new arbitrary random query string or use file write time, and for browser, something?t=1 and something?t=2 are two urls and it will not pickup cache if t changes.
Instead of write time, you can also choose any standard config value or you can even simply hardcode your ASPX or HTML and append something after ? that will force browsers to download silverlight xap file again.
<embed ....
src="/ClientBin/MySilverlight.xap?something-different-each-time"
...
/>