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 29 · Accepted Answer · answered Apr 10 '18 at 20:48

29

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

1,032
3
11
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 Mar 14 '21 at 23:50
1

Few options such as start_url, icons src, aren't working this way. https://i.imgur.com/iRuIeuz.png – Shubham P Jul 25 '22 at 03:50
@ShubhamPrajapat did you find a workaround? Having the exact same issue with those those 3 options – benjaminben Aug 02 '22 at 21:55
1

@benjaminben Yeah, I created an api route "/api/manifest.json" and then in response I'm returning the json. Which is used in link tag like this `` – Shubham P Aug 04 '22 at 02:26
The answer https://stackoverflow.com/a/67244614/6470272 with encodeURIComponent solves the problem with in start_url, icons, and other URIs – Fernando Ulisses dos Santos Apr 14 '23 at 13:10

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

This worked perfect in Chrome v111 on Desktop, it was possible to install the App, icons, shortcuts and screenshots worked as expected. But it didn't worked well on Chrome Mobile v112 on Android, on debug, it's possible to see that the manifest properties are ok, but it doesn't presents the Install option, just the Add to Home Screen. I needed to keep manifest as a separated file to have the Install App option available, even events such as beforeinstallprompt just fires with a separated manifest file. — Fernando Ulisses dos Santos, Apr 14 '23 at 13:17

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

2

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.

answered Sep 16 '17 at 04:39

Matt Gaunt

9,434
3
36
57

Just keep in mind security concerns... passing title or any option as a argument (like in the first example) to be rendered can be exploited and create issues. Prefer to pass a argument that the backend will query to get the details to be rendered, such as second and third examples. – Fernando Ulisses dos Santos Apr 14 '23 at 13:27

Inline the Web App Manifest?

3 Answers3

Improved answer

Linked