5

I would like to have a link to the manifest file in my index.html by embedding it as below, but seems not to be supported. Is it possibile to embed the manifest description in the web page?

<link rel="manifest" href="data:application/manifest+json;base64,PCVAIFBhZ2UgQ29udGVudFR5cGU9ImFwcGxpY2F0aW9uL2pzb24iICU+DQp7DQoJIm5hbWUiOiAiU2hhcmVQb2ludCBUaXRsZSIsDQoJInNob3J0X25hbWUiOiAiU1AgVGl0bGUiLA0KCSJkZXNjcmlwdGlvbiI6ICJUaGUgb25lIGFuZCBvbmx5IFNoYXJlUG9pbnQgU2l0ZSBUaXRsZSBwcm9ncmFtISIsDQoJInN0YXJ0X3VybCI6ICJpbmRleC5odG1sIiwNCgkiaWNvbnMiOiBbDQoJCXsNCgkJCSJzcmMiOiAiYW5kcm9pZC1jaHJvbWUtMTQ0eDE0NC5wbmciLA0KCQkJInNpemVzIjogIjE0NHgxNDQiLA0KCQkJInR5cGUiOiAiaW1hZ2VcL3BuZyINCgkJfSwNCgkJew0KCQkJInNyYyI6ICJhbmRyb2lkLWNocm9tZS0xOTJ4MTkyLnBuZyIsDQoJCQkic2l6ZXMiOiAiMTkyeDE5MiIsDQoJCQkidHlwZSI6ICJpbWFnZVwvcG5nIg0KCQl9LA0KCQl7DQoJCQkic3JjIjogImFuZHJvaWQtY2hyb21lLTI1NngyNTYucG5nIiwNCgkJCSJzaXplcyI6ICIyNTZ4MjU2IiwNCgkJCSJ0eXBlIjogImltYWdlXC9wbmciDQoJCX0NCgldLA0KICAgICJiYWNrZ3JvdW5kIjogIiNmZjAwMDAiLA0KCSJ0aGVtZV9jb2xvciI6ICIjZmZmZmZmIiwNCgkiZGlzcGxheSI6ICJzdGFuZGFsb25lIg0KfQ0K">
Rounin
  • 27,134
  • 9
  • 83
  • 108
Serge van den Oever
  • 4,340
  • 8
  • 45
  • 66
  • Asked question also at https://github.com/w3c/manifest/issues/534 – Serge van den Oever Dec 06 '16 at 14:49
  • Can you add any details like: code used, error problem encountered? [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask), [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – ReyAnthonyRenacia Dec 07 '16 at 10:36
  • @noogui I included the code used, but that is not really the point. It is something that hopefully someone just knows. In the thread at https://github.com/w3c/manifest/issues/534 it was said that it should be supported, so it might be a bug in the Chrome browser I tested it with. I needed this work-around for loading from authenticated site which did not seem to work. But to get that working use . – Serge van den Oever Dec 07 '16 at 18:06

2 Answers2

4

There's nothing wrong with the Data URI in your question. It works.

However, it contains an invalid JSON.

The JSON is invalid because it begins with:

<%@ Page ContentType="application/json" %>

If, instead, you use:

<link rel="manifest" href="data:application/manifest+json;base64,ewoKCSJuYW1lIjogIlNoYXJlUG9pbnQgVGl0bGUiLAoKCSJzaG9ydF9uYW1lIjogIlNQIFRpdGxlIiwKCgkiZGVzY3JpcHRpb24iOiAiVGhlIG9uZSBhbmQgb25seSBTaGFyZVBvaW50IFNpdGUgVGl0bGUgcHJvZ3JhbSEiLAoKCSJzdGFydF91cmwiOiAiaW5kZXguaHRtbCIsCgoJImljb25zIjogWwoKCQl7CgoJCQkic3JjIjogImFuZHJvaWQtY2hyb21lLTE0NHgxNDQucG5nIiwKCgkJCSJzaXplcyI6ICIxNDR4MTQ0IiwKCgkJCSJ0eXBlIjogImltYWdlXC9wbmciCgoJCX0sCgoJCXsKCgkJCSJzcmMiOiAiYW5kcm9pZC1jaHJvbWUtMTkyeDE5Mi5wbmciLAoKCQkJInNpemVzIjogIjE5MngxOTIiLAoKCQkJInR5cGUiOiAiaW1hZ2VcL3BuZyIKCgkJfSwKCgkJewoKCQkJInNyYyI6ICJhbmRyb2lkLWNocm9tZS0yNTZ4MjU2LnBuZyIsCgoJCQkic2l6ZXMiOiAiMjU2eDI1NiIsCgoJCQkidHlwZSI6ICJpbWFnZVwvcG5nIgoKCQl9CgoJXSwKCiAgICAiYmFja2dyb3VuZCI6ICIjZmYwMDAwIiwKCgkidGhlbWVfY29sb3IiOiAiI2ZmZmZmZiIsCgoJImRpc3BsYXkiOiAic3RhbmRhbG9uZSIKCn0=">

(which is the same as what you have, but with that first JSON-invalid line removed)

it will work.

Plaintext Alternative:

Alternatively, you don't even need to base-64 encode the data:

<link rel="manifest" href='data:application/manifest+json,{"name":"SharePoint Title","short_name":"SP Title","description":"The one and only SharePoint Site Title program!","start_url":"index.html","icons":[{"src":"android-chrome-144x144.png","sizes":"144x144","type":"image/png"},{"src":"android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"android-chrome-256x256.png","sizes":"256x256","type":"image/png"}],"background":"rgb(255,0,0)","theme_color":"rgb(255,255,255)","display":"standalone"}' />
Rounin
  • 27,134
  • 9
  • 83
  • 108
-1

No

The manifest file must be a separate file. It also needs to have the proper Content-Type header - application/json; charset=utf-8

It can be gzipped.

You want it to be separate because the browser will only download it once (per version of course) and use it to direct the way your PWA is presented. This is very similar to the way Live Tile support in Windows has worked for years now. However with Live Tiles you could inline properties as META tag values.

You are much better off having a separate file because it would be repeated overhead that can be avoided each time a page is requested. Now the end user only downloads the content once, not every time.

Chris Love
  • 3,740
  • 1
  • 19
  • 16
  • This doesn't seem to be true.. but anyway. What would you recommend if I need to have different manifest for every sub page? And those pages are dynamically generated so basically every sub page has to have dynamically generated manifest? – trubi Dec 17 '18 at 14:57
  • Here is the manifest specification - https://www.w3.org/TR/appmanifest/ – Chris Love Dec 18 '18 at 17:10
  • While the embed manifest worked well on Chrome v111 on Desktop, my experience on Chrome v111 Mobile on Android didn't worked well... the Install option was unavailable, only Add to Homescreen. Debuging it, the manifest properties was all set, but it just didn't work. Using a separated file works fine. Keep in mind that you can pass some parameters on manifest, and render it as necessary: https://stackoverflow.com/a/46250099/6470272 – Fernando Ulisses dos Santos Apr 14 '23 at 13:24