Polymer/prpl-server

add support for the `crossorigin` attribute on the pushed resources

vlukashov opened this issue · 0 comments

As a developer I want to use PRPL server with a push manifest to push JavaScript modules to the browser and expect the pushed files to be used when the browser encounters a <script type="module"> tag or a dynamic import() directive later on the page.

As of now pushing does not work for ES modules because of the issue with non-matching credential modes between the pushed resources and the ES modules used on the page (described here).

PRPL server translates push instructions from a push manifest into Link HTTP headers. For example, a push manifest below would add a Link: </src/components/my-app.js>; rel=preload; as=script HTTP header to the response.

"/view1": {
  "src/components/my-app.js": {
    "type": "script",
    "weight": 1
  }
}

With that setup, having a <script type="module" src="/src/components/my-app.js"></script> tag on a page would cause the same file to be downloaded twice. Here is a live demo (open in a browser that supports ES modules):
es-module-duplicate-download-with-http2-push

In order to workaround the issue, both the <script> tag and the Link header should have an explicit crossorigin attribute with the same value. E.g.
<script type="module" src="/src/components/my-app.js" crossorigin></script> and
Link: </src/components/my-app.js>; rel=preload; as=script; crossorigin.

It would be great if PRPL server allowed adding a crossOrigin property to push resource definitions, and used it to add a corresponding attribute to the Link HTTP headers it creates:

"/view1": {
  "src/components/my-app.js": {
    "type": "script",
    "weight": 1,
    "crossOrigin": "anonymous"
  }
}

A matching issue is also opened in the http2-push-manifest repo to ensure a better tooling support for this feature: GoogleChromeLabs/http2-push-manifest#14.