Модуль workbox-sw обеспечивает чрезвычайно простой способ начать работу с модулями Workbox, упрощает загрузку модулей Workbox и предлагает несколько простых вспомогательных методов.
Вы можете использовать workbox-sw через нашу CDN или использовать его с набором файлов рабочего ящика на своем собственном сервере.
Использование Workbox SW через CDN
Самый простой способ начать использовать этот модуль — через CDN. Вам просто нужно добавить следующее в свой сервис-воркер:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
При этом у вас будет пространство имен workbox в вашем сервис-воркере, которое обеспечит доступ ко всем модулям рабочей области.
workbox.precaching.*
workbox.routing.*
etc
Когда вы начинаете использовать дополнительные модули, происходит какое-то волшебство.
Когда вы впервые ссылаетесь на модуль, workbox-sw обнаружит это и загрузит модуль, прежде чем сделать его доступным. Вы можете увидеть, как это происходит на вкладке сети в DevTools.
Эти файлы будут кэшироваться вашим браузером, что сделает их доступными для будущего использования в автономном режиме.
Использование локальных файлов Workbox вместо CDN
Если вы не хотите использовать CDN, достаточно легко переключиться на файлы Workbox, размещенные в вашем собственном домене.
Самый простой подход — получить файлы с помощью команды copyLibraries в workbox-cli , а затем указать workbox-sw , где найти эти файлы, с помощью параметра конфигурации modulePathPrefix .
Если вы поместите файлы в /third_party/workbox-vX.YZ/ / , вы будете использовать их так:
importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});
Избегайте асинхронного импорта
По сути, первая загрузка новых модулей включает вызов importScripts() с указанием пути к соответствующему файлу JavaScript (либо размещенному в CDN, либо через локальный URL-адрес). В любом случае применяется важное ограничение: неявные вызовы importScripts() могут происходить только внутри обработчика install сервис-воркера или во время синхронного первоначального выполнения сценария сервис-воркера.
Чтобы избежать нарушения этого ограничения, рекомендуется ссылаться на различные пространства имен workbox.* вне любых обработчиков событий или асинхронных функций.
Например, следующий код сервисного работника верхнего уровня подойдет:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will work!
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst()
);
Но приведенный ниже код может стать проблемой, если вы не ссылались на workbox.strategies где-либо еще в своем сервис-воркере:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
// outside of the initial, synchronous service worker execution.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Если вам нужно написать код, который в противном случае нарушил бы это ограничение, вы можете явно вызвать вызов importScripts() вне обработчика событий, используя метод workbox.loadModule() :
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Referencing workbox.strategies will now work as expected.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Альтернативно вы можете создать ссылку на соответствующие пространства имен вне ваших обработчиков событий, а затем использовать эту ссылку позже:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Using the previously-initialized strategies will work as expected.
const cacheFirst = new strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Принудительное использование отладочных или рабочих сборок
Все модули Workbox поставляются с двумя сборками: отладочной сборкой, которая содержит ведение журнала и дополнительную проверку типов, и производственной сборкой, в которой отсутствует ведение журнала и проверка типов.
По умолчанию workbox-sw будет использовать отладочную сборку для сайтов на локальном хосте, но для любого другого источника будет использоваться производственная сборка.
Если вы хотите принудительно выполнить отладочную или производственную сборку, вы можете установить параметр конфигурации debug :
workbox.setConfig({
debug: true,
});
Преобразование кода с помощью операторов импорта для использования workbox-sw
При загрузке Workbox с помощью workbox-sw доступ ко всем пакетам Workbox осуществляется через глобальное пространство имен workbox.* .
Если у вас есть пример кода, использующий операторы import , который вы хотите преобразовать для использования workbox-sw , все, что вам нужно сделать, это загрузить workbox-sw и заменить все операторы import локальными переменными, которые ссылаются на эти модули в глобальном пространстве имен.
Это работает, поскольку каждый рабочий пакет службы Workbox, опубликованный в npm, также доступен в глобальном пространстве имен workbox через версию имени в CamelCase (например, все модули, экспортированные из пакета npm workbox-precaching можно найти в workbox.precaching.* . И все модули, экспортированные из npm-пакета workbox-background-sync можно найти на workbox.backgroundSync.* ).
В качестве примера приведем код, в котором используются операторы import , ссылающиеся на модули Workbox:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);
А вот тот же код, переписанный для использования workbox-sw (обратите внимание, что изменились только операторы импорта — логика не была затронута):
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);