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)?
Parece que enviar una solicitud HTTP con la API de fetch coloca bien el script en CacheStorage.
/** * Preload resources for offline pwa use */ window.addEventListener('load', () => { fetch('/js/baz.worker.js'); fetch('/wasm/bar.wasm'); }); Al enviar estas solicitudes después del evento de load , no se altera el tiempo de carga de la página.
Para mantener la sugerencia de prioridad, es posible establecer el parámetro de importancia en un nivel bajo, como se muestra a continuación:
fetch('/wasm/bar.wasm', { importance: "low" });(advertencia: compatibilidad limitada del navegador cuando se haya publicado esta respuesta)