1

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.

Greg Hewgill
  • 828,234
  • 170
  • 1,097
  • 1,237

2 Answers2

1

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

  • Thanks, I've tried the `` as you described, that was my first example and is how I got fullscreen working. I don't see anything else in Google's recommendations that relate to offline use. The cache-control header might work, but I really want the page to be stored permanently, not just in a cache where it might get discarded. It's frustrating that the features I want seem to work fine separately, but not together. – Greg Hewgill Apr 18 '18 at 18:56
  • No problem, think the only way to really know is to take your project offline. The '.appmanifest' file should already explicitly list the pages and resources you want available offline/ cached. Try it out and let us know! –  Apr 19 '18 at 23:08
0

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.

Greg Hewgill
  • 828,234
  • 170
  • 1,097
  • 1,237