I'm trying to use caching, but I'm not sure why I'm implementing it right. When I see Page Speed tool from Google Developers, it still tells me my images are not being cached. Here's my code:
HTML:
<html lang="en" manifest="manifest.appcache">
<meta http-equiv="Cache-control" content="max-age=86400">
...
manifest.appcache:
CACHE MANIFEST
# 2015-05-27
#Static FILES
css/bootstrap.min.css
js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
#Static IMGS
img/desktop_homepage.jpg
img/mobile_homepage.jpg
img/tablet_homepage.jpg
img/cargo_arrow.png
img/minus.png
img/plus.png
img/countries/at.png
img/countries/be.png
img/countries/canada.png
img/countries/ch.png
img/countries/cz.png
img/countries/de.png
img/countries/es.png
img/countries/fr.png
img/countries/gb.png
img/countries/gr.png
img/countries/hu.png
img/countries/ie.png
img/countries/it.png
img/countries/nl.png
img/countries/pt.png
img/countries/usa.png
You have to configure your server to send the images with the last-modified, max-age or etag tag.
Check this page: optimize with caching
Related
I'm trying to build a simple single HTML page that can be launched when offline (on Android, if that matters).
I'm using the Web App Manifest to give the app a name for adding to the home screen and display fullscreen with no browser chrome. This much works.
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="mf.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>
This does not appear to be cached when offline. Separately, I can make a page which is cached offline using the application cache:
<!DOCTYPE html>
<html manifest="mf.appcache">
<head>
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>
However, when I try to combine these two (so I can have an offline-cached page that launches fullscreen), the Web App Manifest is ignored and I only get the offline behaviour as in the second example.
What I ultimately want is a single page that can be added to the home screen, that opens full screen with no browser/OS chrome at all, and is cached for use offline. A solution that works just on Android using Chrome 65 is acceptable.
That's an interesting dilemma! I wonder if you would have better luck using
<link rel="manifest" href="/manifest.json"> as described by Google. Here's a link to their recommendations for the Web App Manifest.
The Web App Capable meta tag is primarily for full screen capabilities. If you want caching specifically, I think using the http-equiv="cache-control" header tag and its directives is closer to what you're trying to accomplish. Especially since Service workers aren't globally supported yet. I found a decent explanation on HTML caching here on stack: "How to set HTTP headers for cache-control."
Edit: another user has pointed out that Chrome will not honor this tag if a display is set up in the manifest file
The Service Workers feature provides the same capabilities as the deprecated Application Cache.
MDN has an article on Using Service Workers which I found very helpful in implementing what I needed to replace the Application Cache.
I have a strange problem...
I need to send a GET HTTP Request to web site by NSURLConnection ([NSURLConnection sendAsynchronousRequest...).
All works very well but sometimes I see a strange html result different from what I expect.
This garbage html is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> -->
<HTML><HEAD><META HTTP-EQUIV="Refresh" CONTENT="0.1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<TITLE></TITLE></HEAD><BODY><P></BODY>
</HTML>
(Lines split for clarity)
What does that mean?
The web site to which I refer is not mine so I can not work on the server side to solve the issue.
Can I do anything to prevent this?
For some reason, the server (or an intermediary, like a load balancer) is asking you to make the request again in .1 seconds.
If you viewed this page with a web browser, it would wait .1 seconds, and then refresh the page (the purpose of the Refresh meta tag).
You will probably need to check explicitly for this, and retry your request (after waiting .1 seconds to be polite) when it happens.
I am considering generating .html files for my entire web site as I want my site to be as fast as possible. The files would be generated with dynamic content via a backend service as data updates occur.
How do I ensure users always see the latest content? Say I publish a change to my home page, index.html. How do I prevent these files from always coming from the user's cache and ensure new content, if available, is always retrieved and displayed?
Remember, I am using pure HTML.
If there is absolutely no way, I would not be adverse to using .php files containing HTTP cache-related header() calls prior to the content; e.g.:
<?php header(...) ?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
etc.
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
Im using HTML5 offline storage
My Index.html page
<!DOCTYPE html>
<html lang="en" manifest="/offline-cache.manifest">
<head>
<meta charset="utf-8">
<title>HTML5 offline code demo</title>
</head>
<body>
<div id="content">
<img src="http://increaserss.com/wp-content/uploads/flickr-rss.jpg" alt="img to be cached" />
</div>
</body>
</html>
offline-cache.manifest file
CACHE MANIFEST
#just want to cache that remote image only
http://increaserss.com/wp-content/uploads/flickr-rss.jpg
My htaccess
RewriteEngine On
AddType text/cache-manifest .manifest
After loading the page for the first time with internet and then disabled the internet and trying to access this index.html ,caching works fine but again if i hit f5 the image is not shown (only alt text is there) and when i click on the url bar and hit enter (as if were a new request) it is working fine...any way to sustain cache for a page refresh(f5) ?
I would first validate if you can pull assets that are not on your server and then cache them? I am thinking you might be blurring the lines between browser caching and HTML 5 application caching?
I would also make sure you are not using Internet Explorer as it doesn't support offline Caching.
The Cache manifest should also include a version # after the CACHE MANIFEST header (ex. # version 1.4) and the cached files should be under the CACHE: header. For example.
CACHE MANIFEST
# version 1.4
CACHE:
images/flickr-rss.jpg
Please let us know how you made out.
You are using a full URL, is the image not on the same server? If so, that could prevent it from getting cached. If you're using Chrome it reports the cache events to the console.
I have a webapp using offline support (a manifest file). It works correctly on Androids, iOS, RIM, and then some.
It doesn't work on TouchPad though. If I refresh the app without connectivity, I get a "No Internet Connection" error. Did anybody got a manifest file to work on TouchPads?
Here's part of my code:
My main HTML file:
<!DOCTYPE html>
<html manifest="offline/newspro.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
.
.
.
And the manifest file (sent as text/cache-manifest mime type):
CACHE MANIFEST
CACHE:
../index.html
../css/stylesheet.css
../images/logo.png
../images/progress.gif
../images/warning.png
../js/global.js
NETWORK:
*
# revision 351234
The answer to the question in the title post is "Yes" based on https://github.com/shichuan/mobile-html5-boilerplate/wiki/HTML5-Mobile-Support. TouchPad's are WebOS and WebOS supports appcache.
As for the answer to the question in the body of your post--has anyone gotten it to work?--I don't know about that, unfortunately.