CODEWITHSUNDEEP
javascriptmanifestservice-workerprogressive-web-appsweb-app-manifest
empire29
empire29

Reputation: 3890

Does the Web App Manifest include order matter?

I am trying to add PWA functionality to a simple site, and I am running into odd issues with Chrome version 68.0.3440.106.

I am running on http://localhost:4502 for my testing, in the context of a CMS (so I am working within a few constraints). Also, note that I removed all my PWA/Service Worker code so there is no caching at play.

In the <head> .. I include the manifest via:

<link rel="manifest" href="/content/foo/bar.pwa.manifest.webmanifest" type="application/manifest+json">

(The "odd" name of the manifest file is a constraint of the CMS i'm working in; i've also used the "json" extension to the same effect as described below).

Which contains...

{"name":"Sample",
"short_name":"sample",
"theme_color":"#001F3F",
"background_color":"#FF4136",
"display":"standalone",
"scope":".",
"start_url":"/content/foo/bar.html",
"icons":[{"src":"/content/assets/sample.jpg","size":"192x192","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"512x512","type":"image/jpeg"},{"src":"/content/assets/sample.jpg","size":"144x144","type":"image/jpeg"}]}

I've observed the following: When I have JS/CSS includes ABOVE my <link rel="manifest" .. things go haywire. * If i copy the page's URL, paste it into a NEW chrome tab (a refresh of an existing tab does not cut it), and open up Chrome Dev Tools FOR that new tab, I can see the HTTP request/response for the manifest, and in Dev Tools > Application > Manifest is appears to display everything correctly. (so far so good). * If I then REFRESH this tab, i don't see the request for the manifest and the Application > Manifest section is blank. The HTML source has not changed at all. * No matter how many times I refresh it doesn't seem to help (also clear cache, etc.)

2) When i move the <link rel="manifest" to be ABOVE any CSS/JS in the <head> it seems to load consistently and correctly. Refreshing the page the HTTP request for the manifest displays, and Application > Manifest displays the correct info.

I've been scouring docs (Google, MDN) to see if the manifest MUST be included before ANY other includes, but I can't find anything that says that - and it's odd that on the first load of a tab, it seems to work even when included after CSS/JS.

Im hoping there is a way to get this to load regardless of where in the <head> the <link rel="manifest".. happens to be (as the CMS makes it hard to guarantee the order)

Upvotes: 2

Views: 344

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

No, the relative position of the <link rel="manifest"> within your page's <head> does not make a difference from the perspective of how it's parsed and interpreted.

I'm hard pressed to explain the behavior you're seeing, other than perhaps a syntax error in the HTML that includes your JavaScript and CSS, causing the subsequent <link rel="manifest"> to be parsed incorrectly. But in general, the position shouldn't matter.

Upvotes: 4

Related Questions