Search code examples
javascriptandroidiosoffline-cachingprogressive-web-apps

How do you juggle appcache.manifest, manifest.json, and serviceworkers?


I'm new to javascript development. I'm trying to make an app that will work offline on both iOS and android devices. I'm have trouble learning with no examples and I'm not finding examples that do what I need.

Here's what I've found; it could be wrong:

  • iOS requires appcache.manifest and it needs to be loaded with this syntax: <html manifest = "appcache.manifest">

  • Android requires manifest.json and it needs to be loaded with this syntax: <html manifest = "manifest.json">

  • These seem mutually exclusive

  • Android also likes serviceworkers. You can have both appcache.manifest and serviceworkers; see this: Application Cache and Service Workers

  • The above discussion suggests handing appcache vs serviceworker with javascript. I get how it handles appcache & serviceworker but it doesn't address including manifest.json. It looks like the recommended place for scripts on an html page is someplace after the tag, at which point the decision between appcache.manifest (for ios) and manifest.json (for android) looks like it already needs to have been made.

How do you handle all this? Here are some questions that might get at the root of my confusion:

  1. Do I need a manifest.json for Android? Or is this replaced by the serviceworker and that's why I have found zero examples involving both kinds of manifest?

  2. Is there something I'm missing about order of operations that will allow me to choose between appcache.manifest and manifest.json programmatically?

  3. Is there a more effective approach that I'm missing?


Solution

  • You can have a reference to both. Remember a progressive web app is 'progressive enhancement'. If there is a service worker, then by specification the appCache is ignored and the service worker is used for caching/offline. The web manifest file contains meta data the browser/platform will use to create the themed experience and chose the icon for the home screen. So different context from the appCache.

    Also Progressive Web Applications are not an Android specific thing. They are supported by all browsers except Apple Safari.