Inline the Web App Manifest?

Viewed 4612

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>
3 Answers

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

Related