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.
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 just went through the Getting Start with Flask on App Engine Standard Environment tutorial. The source code is here.
Firefox and Chrome both the html templates but neither render them when running locally:
dev_appserver.py app.yaml
or in the cloud
gcloud app deploy
The FireFox Developer Tools console tells me that:
The character encoding of the HTML document was not declared. The
document will render with garbled text in some browser configurations
if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or
in the transfer protocol.
I tried adding declaring UTF-8 encoding by adding this line to the html files.
<html>
<head>
<meta charset="utf-8"/>
...
but to no avail. Any ideas?
Thanks!
I don't think this is the reason your template is not rendering. But, to get rid of that error, try:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
To troubleshoot your template, please provide your url handlers, view handler, and template.html
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
I'm trying to use the html5 cache to store locally office documents.
I use :
ASP.NET MVC 4 on server side
Chrome / PC and Android Browser / Galaxy Tab (Android 3.1) on client side.
Here is my (test) page (the one I was working on is a little bit complex) :
<!DOCTYPE html>
<html manifest="/HandlerManifest.ashx">
<head>
<meta name="viewport" content="width=device-width" />
<title>TestCache</title>
</head>
<body>
test1.jpg
test.docx
</body>
</html>
Here is my manifest :
CACHE MANIFEST
# v1.0.2.0 du 15/10/2012 14:57:58
CACHE:
/Data/test1.jpg
/Data/test.docx
This works fine on Chrome/Pc.
On the Galaxy Tab, I can access the jpg file, even when I m disconnected.
But when I access the docx, connected or disconnected, I have the folowing error :
Web Page not available
When I remove the manifest, everything works fine.
Do you know if I can only store some kind of files (images, css, js) on Android Web Browser ? Or if there is something wrong with what I'm doing ?
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.