Me gustaría obligar al navegador a precargar un trabajador de JavaScript, así como un script de WebAssembly. Cuando se carga, tengo un ServiceWorker que coloca estos scripts en CacheStorage.

Para las imágenes, utilizo la siguiente etiqueta <link> y funciona bien:

 <link rel="prefetch" href="/img/foo.png" as="image" type="image/png" importance="low" />

Así que probé lo mismo para mis scripts wasm y js:

 <link rel="prefetch" href="/wasm/bar.wasm" type="application/wasm" importance="low" /> <link rel="prefetch" href="/js/baz.worker.js" as="script" type="text/javascript" importance="low" />

Sin embargo, parece que el navegador (Chrome) no carga estos scripts con el rel de prefetch previa. Así que traté de usar rel="preload" .

Pero no sé qué llenar para la propiedad as para el archivo wasm y para el archivo de trabajo js, recibo la siguiente advertencia: The resource http://localhost:3000/wasm/bar.wasm 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. .

Si el usuario ejecuta una acción que requiere estos archivos, el navegador los carga bien y luego podemos usarlos sin conexión.

Estos scripts no son necesarios antes del evento de load . ¿Podría enviar una solicitud de búsqueda cuando el navegador emita el evento de load ? Pero creo que es mejor dejar que el navegador maneje esas cosas con una etiqueta de link . En mi caso, es bastante probable que el usuario necesite este script (más del 90 %), por lo que una precarga tendría sentido, pero, en teoría, solo quiero hacer una precarga del contenido.

¿Cómo recomendaría precargar estos archivos para usarlos sin conexión (pwa)?