Is it possible to set the cache for JS and CSS files only, based on some logic?
When the url of the assets always changes (e.g SignUp.[versiontoken].css when the content is modified) then the cache settings can be (1 year) Cache-Control: max-age=31536000
When the url is static (e.g /ui/some.css) then the cache should be short (<1day).
Related
I have set the page header to the public by htaccess file.
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
</ifModule>
But still, it is showing cf-cache-status: as DYNAMIC for the static HTML page too. Please let me know if there is an additional setting at Cloudflare or the website header.
I'd recommend to review the Default Cache Behaviour documentation page which explains how the Cloudflare Cache works and how to configure it to cache (or bypass caching) different resources. To summarise:
By default only specific file extensions are cached
You can set specific Page Rules to override the default behaviour
You can also use Cloudflare Workers to achieve a customized caching result
You can also use Cache-Control headers, as long as the resource is deemed cacheable (see above)
For some files we want akamai to cache the files and but prevent browser form caching the resources, so as per their post I added following header:
<add name="Edge-control" value="!no-store,max-age=365d,downstream-ttl=0" />
It is working but now the local proxy has started caching the resources which defeats the purpose.
Adding private to the downstream header should most probably fix the issue, but I couldn't find the syntax for same. Something like:
<add name="Edge-control" value="!no-store,max-age=365d,downstream-ttl=0,private" />
you needed not add these in code. This can be configured in akamai property manager where you can specify which files shouldn't be cached in downstream and make it private too.
How to create a robots.txt file in a codeigniter project to hide a view page . where should i place this robots.txt file
currently i have created file like this
User-agent: *
Disallow: /application/views/myviewpage.php
in side
/public_html/folder/robots.txt (Where i place my .htaccess file). Is there any way to test this?
The robots.txt file MUST be placed in the document root of the host. It won’t work in other locations.
If your host is example.com, it needs to be accessible at http://example.com/robots.txt.
If your host is www.example.com, it needs to be accessible at http://www.example.com/robots.txt.
I'm hosting a static website in S3 and using Cloudfront to cache files. I've essentially got 3 files with the following headers:
index.html (Cache-Control: no-cache)
app.js (Cache-Control: max-age=63072000, public)
style.css (Cache-Control: max-age=63072000, public)
My html file uses query string parameters that get updated every time I update my css or js files. I've configured s3 to pass these parameters through and I've verified that it works to invalidate cached resources. My index.html file looks something like this:
<html>
<head>
...
<link rel="stylesheet" href="app.css?v=14113e2c764">
</head>
<body>
...
<script src="app.js?v=14113e2c764"></script>
</body>
</html>
It seems to work great as I push updates all day, but when I come in the next morning and push my next change, The index.html file is out of date. Instead of having the correct ?v= parameter, it has the old one! The only way to fix it is to invalidate the html file manually. Then everything works for the rest of the day. The next day I have the same problem again.
What's going on here?
Verify that the CloudFront distribution's Minimum TTL is set to 0. If it's set to any other value, CloudFront won't respect the no-cache header and will still cache the file for the Minimum TTL. More details about the caching directives can be found here:
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html
If this doesn't help, try to debug the actual HTTP request for index.html and post the response headers here so we can have a look at them.
Also, instead of using no-cache for the index.html file, you can try using
public, must-revalidate, proxy-revalidate, max-age=0
This will allow CloudFront to store the file on the edge location, but it will force it to revalidate it with the origin with each request. If the file hasn't changed, CloudFront will not need to transfer the file's entire content from the origin. This can speed up the response time, especially for larger files.
This is more of a comment, but a bit too long. Hopefully helps others that land here.
Cache busting via query parameter has drawbacks, although perhaps you can combat them all via Cloudfront behaviors. See https://stackoverflow.com/a/24166106/630614. Still, I would recommend unique filenames e.g. app.css?v=14113e2c764 becomes app.14113e2c764.css.
To respond to BradLaney's comment/issue: If you've updated cache-control headers and don't see the changes, it's because the origin item is already cached – invalidate it and you should see the new headers the next time you view the resource.
Regarding race condition when setting cache-control for S3 items, or just setting cache-control in general for an SPA, this is what's working well for my team:
# Sync all files with 1 week cache-control, excluding .html files.
aws s3 sync --cache-control 'max-age=604800' --exclude *.html dist/ s3://$AWS_BUCKET/
# Sync remaining .html files with no cache.
aws s3 sync --cache-control 'no-cache' dist/ s3://$AWS_BUCKET/
Every time I do I search on this I get information about how to disable the browser cache.
Never anything about enabling it.
How do I get the back button to use the cache and not regenerate the page?
As far as I know you can control to force a browser to reload the data by means of these meta tags:
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="0">
but you cannot force it to read from cache. The browser itself will do that for you if you don't explicitly specify to ignore the cache, and the page data are in fact cached and not expired.
This does not depend on CodeIgniter because it's client-side, but you might want to use the meta() function included in CI's html helper, which will simply output the corresponding meta tag. e.g:
echo meta('Cache-control', 'no-cache', 'http-equiv');
would generate the second code line above.
Note:
The 1st meta tag is specified for http/1.0 while the 2nd one is for http/1.1 but both are used to allow backwards compatibility.
If you're using xhtml instead of html remember to close the meta tags with />
Browser caching has nothing to do with codeigniter. You can use html meta tags to instruct the browser specifically not to cache pages or you can set a cache expiry for an individual page like so:
<meta http-equiv="expires" content="Mon, 10 Dec 2001 00:00:00 GMT" />
You could use a bit of php to drop tomorrows date in there. The browser (depending on settings) will usually pull as much as it can from the cache automatically, including when clicking the back button - the cache for the back button will work the same as if you were coming in from any other link.
You could set expires headers through your htaccess using something like the following on an apache server (you would have to ask about how to do this on other server types) to tell the browser that is should cache certain types of content for a given periods of time:
ExpiresByType text/html "access plus 60 seconds"
This will tell the browser to store anything of mime type text/html for 60 seconds (this includes codeigniter output) BUT DONT DO THIS if your dealing with dynamic content It will stop any dynamic page content being loaded and will stop any changes to your content being loaded by returning visitors (Obviously this second part is not such an issue with a 60 second cache).
The key thing to realise is that Your page is not one thing, it's made up of lots of parts, some of these parts should be called from cache (js, css, images, etc.) some should not (often html will fall into this category).
The browser will automatically call all the parts of your page from the cache where the cache has not expired.
Usually you would use .htaccess (or similar method) to cache your css, images, etc. (using versioning in filenames to force a reload when they change).
You should also take advantage of server side caching - codeigniter does this for whole pages but I dont tend to find this very helpful for any kind of dynamic site so I would take a look at for using phil sturgeons partial caching library for ci if you are interested in ss caching:
https://github.com/philsturgeon/codeigniter-cache
This wont stop a request being sent to the server but will mean that request requires less processing and can be served as one or several pieces of static content.