I am developing a web app where I need to cache images so that it does not take time to load if user closes and opens website again.
By opening website again, images should be loaded from cache instead of reloading again.
Is this possible to implement with Angular?
I searched a lot online but I did not find proper solution for that yet.
You can use - HTML manifest Attribute
The manifest attribute specifies the location of the document's cache manifest.
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web application that you want cached.
The manifest file is a simple text file that lists the resources the browser should cache for offline access.
Detail understanding read this blog: https://www.html5rocks.com/en/tutorials/appcache/beginner/
Related
I have a ReactJS app hosted in S3 and using Cloudflare as DNS & CDN.
I have a huge issue, a lot of visitors have old version of the application stored in their browser cache (index.html only). I have configured advanced cache control in the newest version, but it cannot be accessed because older version is shown instead.
Static file (CSS, JS) versioning is done using create-react-app, but I have discovered that index.html file is the only cached one.
What should I do now?
How to purge visitors cache now?
PS: I have purged Cloudflare cache already and setup rule to bypass cache.
Unfortunately there is no such solution for this.
The only way is to wait until users cache will empty (expire).
It is technicaly impossible to clear users cache from external resource (JS script etc.), due to security reasons.
Also if it will be possible, there is no way how to tell users to download latest JS (including cache purging code), because they have old version of index.html (including link to those .js files).
You are stack and the only option is to wait.
A better approach would be, whenever your build changes, change the JS link so that the browser downloads the new version from the server, no matter the user's or the server's caching policy.
For example, the way Stack Exchange does it is, whenever the build changes, the HTML goes from something like:
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=1bac371ac78f"></script>
to
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=f83b2f654"></script>
Whenever there's a new build, you can randomize the parameter in the query string in the HTML, and still only have the single (most recent) built .js on your server.
I have an application built that utilizes the HTML5 FilesSystem API, but it only works for Chrome.
Does anyone know of an existing plugin or a technique for replicating this functionality in iOS?
The catch is that I am rendering "mini-sites" for offline use. So I would need to be able to:
Download the files for the micro-site
Store them locally
Access them later. Right now, I'm using an iframe to render the page
My solution (right now) is to do the following.
Because I am caching microsite files that I am pulling from a 3rd party, I set
up a folder on a webserver and built out a PHP-based "caching"
service that routinely compares the content I have stored on the 3rd
part site to the same content stored locally to my server. It updates
the content where necessary.
The app, when it is run from iOS, will asynchronously load each of the microsites in an iframe (create a frame of size 1 x 1px with the appropriate src). The iframe self-destructs after
loading is completed.
Step 2 allows my service worker to cache all of the micro-sites locally, along with the main site.
I have other code in place to keep the local iOS cache "fresh".
This works, but it is nowhere near as ideal as the Chrome File System API, so any alternative suggestions would be great!
Thanks,
Wayne
I have several web resources that are displayed on forms in Microsoft Dynamics. The web resources are html files that include JavaScript/CSS files. When I update the JavaScript files, I am seeing that the latest changes are not getting pulled to end user computers on their next use of the form. I believe this is because the previous version of the web resource has been cached on their machine.
According to this SO question, the solution would be to add a version to the script tag. However, according to the comments on the question, this solution does not work on Chrome and is considered a hack. I have also read here that Dynamics should automatically handle caching when web resources are updated, but does not do so reliably (which is my experience).
How can I force end user computers to get the latest version of my code on their next use of the form when I push out updates?
If you are only changing the files for development (ie. Once they are finished they won't change), then most browsers will allow you to disable the cache. In Chrome, this can be done as long as developer tools are open and you click the "disable cache" button in the network tab.
If they are going to change for the client with each request, then you can generate a random ID to be sent with the file (eg example.com/script.js?182hdh2). To allow this, just put some js in your html file (not in an external script) to import all the other files.
I am working with an angularjs web app. I have a sidebar with images. In my localhost these images only load once because they are cached. When I push the web app to the web the images are not cached and everytime I switch to another state the images reload. Is there a way to cache the images in angularjs without adding extra headers to the server.
You could load the images from a CDN; if the expires headers were setup properly on the CDN, using a CDN allows your images to cache and meets your questions's requirement to not setup your expires headers. This should dramatically increase the speed at which your images load anyway.
If you still aren't getting results, even after you've setup a CDN to serve static content, I would make sure the filenames being served doesn't have some kind of cache-busting url that forces a new image to download each time (the source would look something like "../path/to/image.png?23someRand0mString". And most browser's dev tools turn off caching when the dev tools are open (or at least they have a setting) so verify they aren't being cached; your images should be cached by default in most managed server configurations.
I have several different sites in different hosts and I use the same JS file in all of them which is loaded from one and only remote host. For instance,
One single JS filename my.js is stored at someotherhost.net.
This filename is loaded in several different pages (sites):
somedomain1.net/home.html
somedomain2.net/home.html
somedomain3.net/home.html
Browsing through these sites browser caches my.js. But will it use the same cache for all different sites?
Or maybe it doesn't matter whether the requested filename is named the same, stored in single remote host and loaded in different pages, browser will have different caches?
How browser caching works?
Yes. The browser will cache each unique url, provided there are no headers that tell it not to.
Your file should have one entry in the browser cache even if it is requested from a number of referring pages. Once cached from one site the browser will use the cached version for all the others so speeding up the page load.
This is the idea behind loading JavaScript libraries from a CDN (content delivery network). If you load jquery from http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js there's a good chance the user already has it in their browser cache so it will load instantly.