Console warnings about crossorigin and preloaded

abdonrd commented 5 years ago

There are a few warnings about crossorigin and preloaded.

A preload for 'https://pwa-starter-kit.appspot.com/esm-bundled/src/components/my-view1.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute. dispatch @ my-app.js:598

The resource https://pwa-starter-kit.appspot.com/esm-bundled/src/components/my-app.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The resource https://pwa-starter-kit.appspot.com/esm-bundled/src/components/my-view1.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

keanulee commented 5 years ago

These are known issues, but not sure how to fix them. Fortunately, looking at the network timeline, subsequent requests for these resources seem to hit the cache so these warnings shouldn't actually be causing network performance impacts. Will keep this tracking issue open.

keanulee commented 5 years ago

Corrections (crossed out below): crossorigin attribute can be present on regular scripts as well; just need to change @polymer/esm-amd-loader so that it loads modules with the same value of crossorigin.

I did some testing and it seems like adding crossorigin=anonymous; to the Link: rel=preload headers for module (ESM) scripts and the corresponding <script type="module" crossorigin="anonymous"> to index.html will remove the warning/duplicate entry in the network timeline. ~However, crossorigin=anonymous; (and the corresponding <script crossorigin="anonymous"> in index.html) must not be present for regular scripts (e.g. es5/es6 builds, webcomponents-loader.js)~. So basically we want this for esm-bundled:

Link: </src/components/my-app.js>; rel=preload; as=script; crossorigin=anonymous
Link: </src/components/my-view1.js>; rel=preload; as=script; crossorigin=anonymous
Link: </node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js>; rel=preload; as=script
...
<script type="module" crossorigin="anonymous">

And this for the other builds:

Link: </src/components/my-app.js>; rel=preload; as=script
Link: </src/components/my-view1.js>; rel=preload; as=script
Link: </node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js>; rel=preload; as=script
...
<script>

To fix this, we could (but not limited to):

a) Add a feature to prpl-server to add crossorigin=anonymous for all module scripts. Unfortunately, we can't just rely on "browserCapabilities": ["modules"]" and "js": { "transformModulesToAmd": true } in polymer.json since it's possible for someone to write regular (non-module) script, not use these options, and still end up with valid script.

b) Add a specification for crossorigin=anonymous to push-manifest.json and have prpl-server use it. Right now we use the same push-manifest.json across all builds.

~In addition, the transformModulesToAmd transformation must remove the <script crossorigin="anonymous"> attribute in index.html.~

Also, I'm pretty sure using crossorigin=anonymous will break the scripts-behind-authentication use case (ref https://github.com/Polymer/pwa-starter-kit/issues/89). Might want to preserve both the crossorigin=anonymous and crossorigin=use-credentials use cases.

frankiefu commented 5 years ago

Yeah I think we should add a specification for crossorigin to push-manifest.json and have prpl-server to use it. There is already an issue filed for that: https://github.com/Polymer/prpl-server/issues/81

In addition prpl-server should only add the crossorigin to link headers if browserCapabilities contains modules.

cc @aomarks

keanulee commented 5 years ago

Here's my proposed approach to fixing this issue:

Fix @polymer/esm-amd-loader so that it loads AMD modules with the same crossorigin attribute as document.currentScript. That is, if I have <script crossorigin="use-credentials">define(['src/components/my-app.js']);</script>, then that module (and all transitive modules it loads) will load with <script crossorigin="use-credentials">. Fixed in https://github.com/Polymer/tools/pull/801
Add a per-resource "crossorigin" setting to push-manifest.json and make prpl-server use this in link headers. Developers will be required to update push-manifest.json so that each resource matches the way it's loaded in HTML. Fixed in https://github.com/Polymer/prpl-server/pull/85

Unlike the approach I described above, this approach allows any resource (including images, videos, non-module scripts) to use the crossorigin attribute. It also allows choosing between anonymous and use-credentials depending on the use case.

keanulee commented 5 years ago

Preview of changes needed in pwa-starter-kit in the crossorigin branch

wzzz711 commented 5 years ago

咋回事啊

keanulee commented 5 years ago

This was fixed by #288 - see merged PR referenced above.

Polymer / pwa-starter-kit

Console warnings about crossorigin and preloaded #254