Look into adding a web application manifest file

[alrra]

General information

From: https://w3c.github.io/manifest/#h2_abstract

JSON-based manifest, which provides developers with a centralized place to put metadata associated with a web application. This includes, but is not limited to, the web application's name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). .

From: http://blog.chromium.org/2014/10/chrome-39-beta-js-generators-animation.html

Previously when developers wanted to allow their web applications to be added to the home screen from Chrome for Android, they had to use a variety of <meta> and <link> tags to trigger this behavior and deliver relevant resources such as icons. Having this embedded in every page was not only repetitive, but was a waste of bandwidth and put extra bits on the critical path.
...
Developers seeking to enable "add to homescreen" can define a title, landing page, default orientation, and different icons depending on size and screen density.

Links

Specification:

• https://w3c.github.io/manifest/

Other useful links:

• http://html5doctor.com/web-manifest-specification/
• http://updates.html5rocks.com/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android

Browser support

• Chrome 39+
• Firefox - not yet, but underway!
• Internet Explorer - not yet, but it's under consideration! (+this)
  
• Opera 26+ (?)
• Safari - not yet

---

Required changes

• Add a generic web application manifest file
  • Decide on the name (e.g.: manifest.json)
  • Decide what members to provide by default and with what values
• Add a <link> in index.html(e.g.: <link rel="manifest" href="manifest.json">)
• Update documentation

The server configs are already covered!

Note: For now, the scope of this issue is mainly to start the discussion and to track how browser support evolves.

[j8r]

I think this should be a "manifest.webapp"(with json syntax) instead of "manifest.json"

[alrra]

I think this should be a "manifest.webapp"(with json syntax) instead of "manifest.json"

@JulR43 Please see: https://w3c.github.io/manifest/#h-media-type-registration

[j8r]

Ok! manifest.webapp is specialy for Firefox OS, AndroidManifest.xml for Android and WMAppManifest.xml for Windows Phone 8. Firefox (Gecko) and Chrome (Blink) have a manifest.json.
You can add

{
  "name": "My App",
  "description": "Description here",
  "version": 0,
  "icons": {
    "256": "/img/icon-256.png",
    "128": "/img/icon-128.png"
  }
}

[alrra]

Related discussion: w3c/manifest#346.

[alrra]

I've done a little bit of digging and updated this pull request:

• Changed the name of the manifest file to site.webmanifest:

  • The server configs have been updated (e.g.: Apache) to provide some good defaults for .webmanifest files (+ also opened PRs in other repositories)
  • See also: The use of the .manifest file extension may be problematic / confusing ? w3c/manifest#346

• Changed the content of the manifest file to:

  {
    "icons": [{
       "src": "icon.png",
       "sizes": "192x192",
       "type": "image/png"
    }],
    "start_url": "/"
  }

  (I've tried to not introduce something that might affect users in any way)

  • Members not included as the default value represents a good default and/or providing a different value might cause problems as people might not change that value:

    • display => defaults to browser
    • lang => defaults to undefined (see similar discussions: Remove lang attribute from html #1110, Revise the lang attribute problem #1542):
    • name => defaults to the value of <meta name=application-name content="..."> and then the value of <title>.
    • orientation => defaults to default orientation
    • prefer_related_applications => defaults to false
    • related_applications => defaults to undefined
    • scope => defaults to undefined => it is (true) within scope
    • short_name => defaults to undefined, however, see name
    • theme_color => defaults to undefined

    @marcoscaceres If you have time, can you review this? Thanks!

  • Since for Chrome for Android the recommended size for the icon is 192x192px, I've added a 192x192px image called icon.png that can be used in the manifest and as the apple-touch-icon (in both cases the icon will be automatically resized by the browser).

    Cc: @h5bp/html5-boilerplate

Thoughts?

---

Remaining TODOs:

• Make changes based on feedback
• Update documentation

[marcoscaceres]

name => defaults to using the <title>.

Will default to the value of the content in a <meta name=application-name content=foo> instead. We are currently working out what the defaults are going to be in the spec (this PR will change: w3c/manifest#351).

[marcoscaceres]

(fixed comment above)

[alrra]

name => defaults to using the <title>.

Will default to the value of the content in a <meta name=application-name content=foo> instead. We are currently working out what the defaults are going to be in the spec (this PR will change: w3c/manifest#351).

@marcoscaceres I was talking from the perspective of H5BP. Since we don't include a <meta name=application-name content=foo>, right now, name will default to the value of <title>.

edit: Updated my previous comment.