Я пытаюсь понять, как использовать workbox-core и workbox-routing.
Примечание Я использую пакет gulp + browserify, чтобы мой код работал в моем браузере.
Я скачал пакет, используя пряжу:
yarn add --dev workbox-core@4.* workbox-routing@4.*
Который работает нормально. Сервисный работник установлен правильно, и дальнейшая перезагрузка пропустит ожидание.
Тогда я написал это в своем работнике службы:
import { workbox } from "workbox-core";
workbox.core.clientsClaim();
workbox.core.skipWaiting();
А потом я попытался добавить маршрутизацию:
import { workbox } from "workbox-core";
import { registerRoute } from "workbox-routing";
workbox.core.clientsClaim();
workbox.core.skipWaiting();
Но я обнаружил эту ошибку в DevTools:
Uncaught ReferenceError: рабочая область не определена
Так что, я думаю, в какой-то момент workbox-routing нужно workbox-core для работы, потому что это задействованный код в трассировке стека ошибок:
e.setDefaultHandler=(e=>{u().setDefaultHandler(e)}),e}({},workbox.core._private,workbox.core._private)},{}],3:[function(e,t,r){"use strict";var n=e("workbox-core");e("workbox-routing");n.workbox&&(n.workbox.core.clientsClaim(),n.workbox.core.skipWaiting(),console.log("routing",n.workbox))},{"workbox-core":1,"workbox-routing":2}]},{},[3]);
ВОПРОС
Как я могу использовать workbox вместе с его компонентом (маршрутизация, стратегии, ...) в узле?
* 1042 Временное решение *
Вот что я на самом деле делаю, чтобы обойти эту проблему. Я считаю, что это не использует разделенные компоненты, которые предлагает workbox- *, но это имеет свои преимущества для работы ...
import "workbox-sw";
import { workbox as workboxCore } from "workbox-core";
const routes = ["/", "/nous-trouver", "/mentions-legales", "/produit"];
const assetsStrategy = new workbox.strategies.CacheFirst({
cacheName: "assets-v5"
});
// Main
workboxCore.core.clientsClaim();
workboxCore.core.skipWaiting();
workbox.routing.registerRoute(
new RegExp(".*(js|css|jpg|jpeg|png|svg|webp|eot|ttf|woff|woff2)$"),
assetsStrategy
);
for (const route of routes) {
workbox.routing.registerRoute(route, assetsStrategy);
}