Menu
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>
777
A web application manifest, as defined in the Web Application Manifest specification, provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users ...
Add a Web App Manifest to your siteCopy some existing JSON and modify it, e.g., the code just above. Give your site a name and a short name (used under the icon). Specify icons, including one of at least 256x256 pixels. (optional) Set a background_color and theme_color that show while your site is loading.
A web app manifest is a required installability criteria in every browser. Your PWA will not install without it. Each PWA should include a single manifest per application, typically hosted in the root folder, and linked on all HTML pages your PWA can be installed from.
It is not a necessary file. You need to use it or you should use it when you are designing a web app that can run offline. Examples are whatsapp web, todoist webapp, amazon webapp, etc.
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
142
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
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
