Inline the Web App Manifest?

Question

I have a marketplace/web application with thousands of static single page apps.

Wish to add a Web App Manifest for each single page app in the <head> </head> tag of their corresponding stem_url (The {root}/index.html for all the urls of a given SPA).

The standard method:

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

…does not seem like a good way to go forward because this would mean thousands of manifest.js files being dumped into the /public folder (it's a rails app!) and it would eventually make the app/assets compilation job very heavy as this number goes up.

Is there a way we could inline manifest json just like we do the style tags:

<style>
  body { // style here }
  …
</style>

An equivalent of manifest declaration:

<manifest>
 { 
   "name": "HackerWeb",
   "short_name": "HackerWeb",
   …
}
</manifest>

score 26 · Accepted Answer · answered Apr 10 '18 at 20:48

26

You can inline the json by using a data:url. So instead of the standard

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

it would be

<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />

I wanted to inline it too and tried it just now. It works

answered Apr 10 '18 at 20:48

RADXack

952
3
10
17

Neat! Will give it a try in sometime. – Marvin Danig Apr 10 '18 at 22:52
1

Relevant discussion from December 2013: https://gist.github.com/marcoscaceres/7783977 – Rounin - Standing with Ukraine Mar 14 '21 at 23:50

Benjamin Filiatrault · Answer 2 · 2021-12-16T21:04:54.467

Improved answer

As mentioned by RADXack, this works great

<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />

But what if you want to add more attributes like the colors or start_url?

Then on your server you could add:

const manifest = JSON.stringify({
        name: "React Doc",
        short_name: "React"
        start_url: "/",
        background_color: "#fffff",
        theme_color: "#ff00ff",
        display: "standalone",
    });

const HTML = `<!DOCTYPE html>
<html lang="en">
  <head>
   <link rel="manifest" href='data:application/manifest+json,${encodeURIComponent(manifest)}' />
   ...rest of your code`

encodeURIComponent will convert all special characters for you.

This way, you are sure that whatever the data being passed is, it'll be URL friendly

score 1 · Answer 3 · answered Sep 16 '17 at 04:39

The main thing to remember is that the manifest request is still just a network request.

So you can Add Query Params

/manifest.json?title=Hello&icon=.....

Or you could do:

/manifest.json?appId=1234

OR you can just use a pretty URL:

/manifest/1234

Then on your server you can return the JSON that you want.

Inline the Web App Manifest?

3 Answers3

Improved answer

Linked