Я играю с работниками сферы обслуживания.Следующий код должен прокси-файлы JS для исправления импорта, чтобы они соответствовали стандартам платформы (например, "./"
, "../"
, "/"
или "http://..."
).
Отлично работает в Chromium (67.0.3396.79 в Arch Linux).И, похоже, работает так же хорошо в Firefox (60.0.2 (64-bit) в Arch), по крайней мере, на вкладке сети, я вижу загрузку всех пропатченных источников, но по какой-то причине модули JS не работают,Не могу console.log
и т. Д. Или что-нибудь еще.Не уверен, как заставить Firefox загрузить приложение.
Я заметил, что все заголовки выборки toLowerCase
, но я прочитал об этом здесь , и Mozilla также указывает на этот заголовокимена нечувствительны к регистру здесь .
Я также подумал, что, возможно, из-за изменения длины содержимого, что файл не был получен полностью, но я не увидел ошибок синтаксического анализаи действительно, на вкладке сети были правильные изменения длины контента, поэтому я исключил это.
const maybeAppendJS = (x) =>
x.endsWith(".js")
? x
: `${x}.js`;
const maybePatchURL = (x) =>
x.match(/(^'@.*'(.)?$)|(^"@.*"(.)?$)/)
? `"/node_modules/${maybeAppendJS(eval(x))}";`
: x;
const maybePatchImport = (x) =>
x.startsWith("import ")
? x.split(/\s/).map(maybePatchURL).join(" ")
: x;
async function maybeRewriteImportStatements(event) {
let candidate = event.request.url;
const url = maybeAppendJS(candidate);
const resp = await fetch(url);
if (!resp.headers.get("content-type").startsWith("text")) {
const text = await resp.text();
const newText = text.split(/\n/g)
.map(maybePatchImport)
.join("\n");
return new Response(newText, {headers: resp.headers});
}
if (resp.headers.get("content-type").startsWith("text/")) {
const location = `${url.substring(0, url.length - 3)}/index.js`;
return new Response(null, {status: 302, headers: {location: location}});
}
console.log("Service worker should never get here");
}
this.addEventListener('fetch', (event) => {
if (event.request.destination === "script" || event.request.referrer.endsWith(".js") || event.request.url.endsWith(".js")) {
event.respondWith(maybeRewriteImportStatements(event));
}
});