最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

ecmascript 6 - Safari modulepreload for relative paths fails - Stack Overflow

programmeradmin0浏览0评论

I am including the vega module in a module:

import vega from '/[email protected]/+esm';

This works without console errors on Chrome, Edge, and Firefox, but not Safari.Inspecting the headers for the above URL, I find:

Link: </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush

Safari treats these as links relative to my site, rather than relative to jsdelivr, and I get a bunch of 404s for these links. I've tried using an importmap to redirect each of these links, but that doesn't work, and even if it did, I don't really want to hardcode all of the versions. I am using a serviceworker for my fetches, so I could try to patch this there, but it seems like a kludge. The modules eventually get loaded, and the site works, I just hate seeing red in the console.

I am including the vega module in a module:

import vega from 'https://cdn.jsdelivr/npm/[email protected]/+esm';

This works without console errors on Chrome, Edge, and Firefox, but not Safari.Inspecting the headers for the above URL, I find:

Link: </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush, </npm/[email protected]/+esm>; rel="modulepreload"; nopush

Safari treats these as links relative to my site, rather than relative to jsdelivr, and I get a bunch of 404s for these links. I've tried using an importmap to redirect each of these links, but that doesn't work, and even if it did, I don't really want to hardcode all of the versions. I am using a serviceworker for my fetches, so I could try to patch this there, but it seems like a kludge. The modules eventually get loaded, and the site works, I just hate seeing red in the console.

Share Improve this question asked Jan 19 at 20:38 Jeff E MandelJeff E Mandel 812 silver badges8 bronze badges 1
  • I investigated further and disabling the serviceworker allows the preloads to work. Unfortunately, the serviceworker is critical to my app, which makes heavy use of SVG and mp3 assets, which I cache with the serviceworker. What isn't clear to me is whether this is the fault of Safari in how it resolves modulepreloads, or the rollup script that emits relative URLs. Thoughts? – Jeff E Mandel Commented Jan 20 at 17:43
Add a comment  | 

1 Answer 1

Reset to default 0

This isn't the perfect solution, but it is a workaround. In my serviceworker:

self.addEventListener("fetch", (event) => {
    if (event.request.url.indexOf('/npm/vega') !== -1) { return; }
    event.respondWith(cacheFirst(event.request));
});

This bypasses the serviceworker cacheFirst for that path. Since I don't want to cache the jsdelivr modules with my serviceworker, this is fine, and may be slightly faster, as the serviceworker doesn't need to check the cache for these files. I realized making all matches to '.js' bypass the cache was even better; I don't cache javascript files, and now I can use <link rel="modulepreload"> tags more broadly (until there is a widely available way to have the serviceworker play nicely with modulepreload).

self.addEventListener("fetch", (event) => {
    if (event.request.url.indexOf('.js') !== -1) { return; }
    event.respondWith(cacheFirst(event.request));
});

Of course, modulepreload seems to be a swamp, see Early hints and modulepreload #7854

发布评论

评论列表(0)

  1. 暂无评论