2

Standard way of including manifest.json :

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

Is there a way to include the content of manifest.json directly in the HTML document ?

(The reason for this is to avoid a HTTP request, and make an automatic generation of the file based on tags available only directly in my html template)

To be more precise, here is a non-working example of what I'm trying to do, just for the idea :

<link rel="manifest" content="{"name": "Web Starter Kit", "other options": "directly here"}">

Adrien
  • 21
  • 1
  • 3

2 Answers2

3

First of all, don't use the same quotes. HTML thinks it is

content=
"{"
name
": "
Web Starter Kit
", "
other options
": "
directly here
"}"

Plus link cannot have a content attribute so use <script type="application/json">

Next, to use dot notation you should exclude spaces as manifest.other options can confuse programs.

Now to read JSON use

var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON

The following is a working example of what you want.

    //var manifest= JSON.parse(document.getElementById('myJSON').innerHTML); /*Shortend of 2&3*/
var manifest= document.getElementById('myJSON').innerHTML; //sets manifest to the text in #myJSON
manifest= JSON.parse(manifest) //Converts it into JSON
document.getElementById('test').innerHTML= manifest.name+ '<br/>'+ manifest.otherOptions; //Displays it
console.log('manifest')
console.log(manifest);
<head>
<script type="application/json" id="myJSON">
  {"name":"Web Starter Kit", "otherOptions":"directly here"}
</script>
</head>
<body>
<p id="test"></p>
</body>

And yes you can use <script> for javascript and also have global variables (variables not in functions)

Zekrom_Vale
  • 344
  • 4
  • 10
0

How to inline dynamically generated manifest.json documents with standard JavaScript

I included the following link rel like this one in the html header, WITHOUT a valid href property, yet:

link rel="manifest" id="my-manifest-placeholder"

(see also "How to Setup Your Web App Manifest Dynamically Using Javascript" https://medium.com/@alshakero/how-to-setup-your-web-app-manifest-dynamically-using-javascript-f7fbee899a61 which unfortunately did NOT work for me!)

(or "Inline Web App Manifest", Inline the Web App Manifest? which inspired my solution very much)

Later, I ran the following javascript:

thisHostUrl = "http://localhost/";

// json manifest, escaped as a string

var myManifest  = '{\"short_name\": \"ungravel\",\"name\": \"Ungravel:%20Cofounder%20GroupWallet\",\"icons\": [{\"src\": \"' + thisHostUrl + 'icon192x192.png\",\"type\": \"image\/png\",\"sizes\": \"192x192\",\"purpose\": \"any%20maskable\"},{\"src\": \"' + thisHostUrl + 'icon512x512.png\",\"type\": \"image\/png\",\"sizes\": \"512x512\",\"purpose\": \"any%20maskable\"}],\"start_url\": \"' + thisHostUrl + '\",\"background_color\": \"rgb(225,230,233)\",\"display_override\": [\"window-control-overlay\", \"standalone\"],\"display\": \"fullscreen\",\"orientation\": \"landscape-primary\",\"scope\": \"' + thisHostUrl + '\",\"theme_color\": \"rgb(179,231,253)\",\"shortcuts\": [{\"name\": \"Ungravel:%20Cofounder%20GroupWallet\",\"short_name\": \"ungravel\",\"description\": \"Create%20co-founder%20group%20with%20shares%20and%20GroupWallet\",\"url\": \"' + thisHostUrl + '\",\"icons\": [{ \"src\": \"' + thisHostUrl + 'icon64x64.png\", \"sizes\": \"64x64\", \"type\": \"image\/png\" }, { \"src\": \"' + thisHostUrl + 'icon192x192.png\", \"sizes\": \"192x192\", \"type\": \"image\/png\"}]}],\"description\": \"Co-found%20a%20distributed%20group%20on%20ethereum%20blockchain,%20based%20on%20ERC20-compatible%20GroupToken%20shares%20and%20NameRegistry%20NFTs%20(ENS)\",\"screenshots\": [{\"src\": \"' + thisHostUrl + 'screenshot1.jpg\",\"type\": \"image\/jpg\",\"sizes\": \"842x790\"},{\"src\": \"' + thisHostUrl + 'screenshot2.jpg\",\"type\": \"image\/jpg\",\"sizes\": \"1144x630\"}]}';


const stringManifest = 'data:application/manifest+json,'+myManifest;

document.querySelector('#my-manifest-placeholder').setAttribute('href', stringManifest);

DO NOT forget to escape spaces and special chars, such as / and "". https://www.tutorialspoint.com/json_simple/json_simple_escape_characters.htm

Be aware of the color codes for background and themeColors: rgb(179,231,253) DO NOT use hex colors or escape the #-special char.

I tried URL.createObjectURL(xxxxx), but the dynamically href is happy with:

data:application/manifest+json + the dynamically generated manifest, in my case myManifest

Google Version 91.0.4472.77 (Offizieller Build) (x86_64) loads the manifest from my source without any extra network access, thus saving network requests for my single-page PWA. A bit ugly, but it works.

Since the manifest format is yet final and still in development, I assume, properties may change and this solution may NOT work in other Google Chrome browsers.

pepihasenfuss
  • 1