Как предварительно загрузить ресурс веб-работника

Question

В настоящее время мы внедряем веб-работников на веб-сайте нашей компании (на основе ReactJS-Redux) для первоначальной синхронизации данных пользователя (таких как: список избранных, список удаленных)...) путем вызова конечной точки API.

Реализация прошла успешно, но аудит Lighthouse показывает проблему с производительностью, потому что мы не загружаем этот ресурс.Хотя нас это не особо беспокоит, это довольно «раздражает», и мы хотели бы избавиться от этого.

Мы пытались «предварительно загрузить» его безуспешно, даже следуя W3Cспецификации .Атрибут «as» со значением «работник» кажется правильным, но Google Chrome не определяет его как допустимое значение.Ниже приведены некоторые варианты, которые мы попробовали:

<link rel="preload" href="userSync.worker.js" as="script" type="text/javascript">
<link rel="preload" href="userSync.worker.js" as="fetch" type="text/javascript">
<link rel="preload" href="userSync.worker.js" as="worker" type="text/javascript">

Мы также безуспешно пробовали разные варианты атрибута 'crossorigin'.

Кто-нибудь имел представление о том, что может быть не так?

Спасибо!

Answer 1

Использовать предварительную выборку вместо предварительной загрузки: <link rel="prefetch" href="userSync.worker.js" as="worker" />

В этом случае рабочий будет в кеше диска при вызове.

Answer 2

Попробуйте добавить атрибут: crossorigin = "anonymous"

Согласно инструменту маяка (Chrome Dev Tools -> Audit): предварительная загрузка была найдена для "https://yourworker.js", но не использоваласьв браузере. Убедитесь, что вы используете атрибут crossorigin правильно.

Редактировать: все еще не работает, я тоже застрял. Я заметил, что «тип» в сети Chrome для предварительной загрузки отображается как «script ', но' type 'при его загрузке -' x-javascript '. Однако, если вы указываете' x-javascript 'в качестве as = "" в предварительной загрузке, он все равно не работает