23

I am developing a PWA in AWS Cloud9, but it won't allow my manifest.json to be included/referenced in a link tag. It says "VFS Connection is not present" in dev tools as if it can't find the manifest because it is external to the app. I get a 499 error in the console. This is the same message I get if I stop the node http-server and reload the preview page, because it isn't being served up on port 8080. It DOES find the CSS file in a link tag just fine (in the same folder), so is it because it is rel=manifest, or it won't allow a json file to be included for security reasons, or some other reason? Does anyone know why this file isn't working?

<link rel="manifest" href="manifest.json" />
Ryan
  • 3,153
  • 2
  • 23
  • 35
  • show the css working part please? – Alex May 29 '18 at 13:19
  • The code for the CSS file is and I know it works because my styles are being applied. This is why I suspect it has something to do with JSON, or security. I've tried permissions as well, and that isn't the issue either. I've tried using a manifest.txt and that isn't acceptable as a manifest file. – Ryan May 29 '18 at 15:12
  • Just to confirm, can you GET the manifest file directly in browser from it's absolute Url? – Tobin Jun 13 '18 at 16:46
  • Yes, I can access the manifest.json in the browser, and see the contents of it, but from the html page, it can't find it. I get a 499 error and it says "VFS connection does not exist" as if it can't connect to it from inside cloud9. – Ryan Jun 13 '18 at 16:53

3 Answers3

3

This occurs because the request for the manifest file is done without using cookies/credentials, but the VFS proxy uses a cookie to restrict access to the development preview. Essentially the 499 & error message actually mean access denied.

This question describes the issue more generically: Cookies not sent with request for Web App manifest.json

I have confirmed that this works with AWS cloud9 & Google Chrome 78.

<link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">

le3th4x0rbot
  • 2,493
  • 23
  • 32
  • I just realized that `crossOrigin` is a React thing, and in plain html it is `crossorigin`. Glad this was able to help you, it was was a really exciting discovery for me about the manifest request! – le3th4x0rbot Jul 13 '21 at 05:49
1

Its mainly because right now your app is not publicly accessible on port 80, once you will go live it shouldn't be a problem.

Update - Alternate method below

You can put the manifest json content as base64 encoded string in the html itself. Below is the sample manifest json and its implementation in the link tag on the page.

{
  "name": "your app name",
  "gcm_sender_id": "xxxxxxx",
  "gcm_user_visible_only": "true"
}

On HTML page - 

<link rel="manifest" href="data:application/manifest+json;base64,ewogICJuYW1lIjogInlvdXIgYXBwIG5hbWUiLAogICJnY21fc2VuZGVyX2lkIjogInh4eHh4eHgiLAogICJnY21fdXNlcl92aXNpYmxlX29ubHkiOiAidHJ1ZSIKfQ==">
mdeora
  • 4,152
  • 2
  • 19
  • 29
  • This does seem to work as a work around. Thanks. I still don't know why the original issue happens, but this makes it at least usable. – Ryan Jun 22 '18 at 01:03
-2

As per MDN Web Docs, the link tag should be like this.

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

Here is the link to the information I found out. I hope it helps.

https://developer.mozilla.org/en-US/docs/Web/Manifest

PS : I am new on StackOverflow, so cannot comment on the question, that's why posting some research in the answer itself.

Anubhav Jain
  • 1
  • 1