Skip to content

Instantly share code, notes, and snippets.

@kornelski
Forked from marcoscaceres/manifest-options.md
Last active December 30, 2015 06:29
Show Gist options
  • Save kornelski/7789975 to your computer and use it in GitHub Desktop.
Save kornelski/7789975 to your computer and use it in GitHub Desktop.

Which one do you prefer?

We are trying to create a new manifest format for the Web. It will allow you to define metadata for a web application in one place.

Right now, we are trying to decide how to "inline" the manifest into HTML. Need your feedback.

A - using a meta element and content attribute

<!doctype html>
<html>
<head>
...
<meta name="manifest" content='{
  "name": "Example",
  "url": "/start.html",
  "mode": "standalone",
  "icons": [{
      "src": "icon/lowres",
      "density": "1",
      "width": "64",
      "type": "image/webp"
    }, {
      "src": "icon/hd",
      "density": "2",
      "width": "64"
  }]
}'>
...

B - using a script tag

<!doctype html>
<html>
<head>
...
<script type="application/manifest+json">
{
  "name": "Example",
  "url": "/start.html",
  "mode": "standalone",
  "icons": [{
      "src": "icon/lowres",
      "density": "1",
      "width": "64",
      "type": "image/webp"
    }, {
      "src": "icon/hd",
      "density": "2",
      "width": "64"
  }]
}
</script>

External linking

<link rel="manifest" href="app.json">`

OR

  <script src="app.json" type="application/manifest+json"></script>

C - Map manifest properties to existing <meta> and <link> elements

<meta name="application-name" name="My App">
<link rel=start href="/start.html">
<meta name="mobile-web-app-capable" content="yes">
<link rel=icon sizes="64x64" type="image/webp" href="icon/lowres">
<link rel=icon sizes="128x128" href="icon/hd">

Got a better idea?

Please share it in the comments!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment