AWS Cloud9 doesn't allow static manifest.json but does allow css file

Question

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" />

Owen

show the css working part please? – Russelrussell

The code for the CSS file is <link rel="stylesheet" href="app.css" /> 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. – Owen

Just to confirm, can you GET the manifest file directly in browser from it's absolute Url? – Gesticulate

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. – Owen

Answer 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==">

Zama

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. – Owen

Answer 2

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">

Topmost

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! – Topmost

Answer 3

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.

Rubble

I appreciate it, however it doesn't solve the cloud9 issue. – Owen