flow
flow copied to clipboard
vaadin
PWA manifest link tag with support for crossorigin
Describe your motivation
The manifest file is denied when a web application is running behind a "guard/proxy". An example of a "guard" is Google Identity-aware Proxy (IAP) which adds credentials to each request. The <link rel="manifest" href="manifest.webmanifest">, that is inserted by the @PWA annotation, does not include the credentials which makes Google IAP deny the request of the manifest.webmanifest file.
MDN describes the solution here: Webmanifest with credentials.
A similar issue for <script> tags are discussed here: https://github.com/vaadin/flow/issues/9131
Describe the solution you'd like
Add a parameter to the @PWA annotation that adds the attribute crossorigin="use-credentials" to the <link> tag.
Describe alternatives you've considered
Implement an IndexHtmlRequestListener that finds the <link> tag and adds the attribute to it in runtime. It works. This might be the solution that should be used for "advanced cases"?
@Override
public void serviceInit(ServiceInitEvent event) {
event.addIndexHtmlRequestListener(indexHtmlResponse -> {
indexHtmlResponse.getDocument().head().selectFirst("link[rel=\"manifest\"]").attr("crossorigin", "use-credentials");
});
}
Additional context
A workaround is to add the <link> tag to your index.html file. It will result in two lines with the same link, as the @PWA annotation inserts one, but I guess that the browser will skip the second line.
<head>
<title>...</title>
<link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
...
<link rel="manifest" href="manifest.webmanifest"> // inserted by @PWA
</head>
That would be awesome.. Would need that to preload the manifest with some details about the user. Any plans to implement this?
@Override
public void configurePage(AppShellSettings settings) {
settings.addLink(Inline.Position.PREPEND, PwaConfiguration.DEFAULT_PATH,
Map.of("rel", "manifest", "crossorigin", "use-credentials")
);
}
That's the workaround mentioned in the request btw. Which works, but is not really nice, as u end up with 2 manifest links in the headers.
