До сих пор эта документация была посвящена предварительному кэшированию, часто затрагивая инструменты generateSW и injectManifest . Хотя существует множество веских причин для включения логики предварительного кэширования в ваш сервис-воркер, вам не обязательно использовать предварительное кэширование для использования Workbox.
Возможно, вашему проекту требуется только кэширование во время выполнения, или, может быть, вам нужен более чистый способ интеграции API-интерфейсов сервис-воркеров, таких как Web Push . Это случаи, когда вы не захотите использовать инструменты сборки Workbox, и это описано в этой статье.
При использовании упаковщика
Бандлеры занимают видное место в сфере веб-разработки, и есть большая вероятность, что ваш проект использует их. В этом случае важно знать, что вам не нужно использовать плагин связывателя (например workbox-webpack-plugin ), если вы ничего не кэшируете. Вы будете рассматривать своего сервис-воркера как отдельную точку входа в свое приложение.
В корне исходного каталога вашего проекта вы создадите сервис-воркера и будете использовать любые модули Workbox, необходимые вашему приложению. Вот пример без предварительного кэширования, в котором вместо этого настраиваются стратегии кэширования для запросов навигации и изображений в отдельных экземплярах Cache :
// sw.js
import {NetworkFirst, CacheFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
const imageAssetRoute = new Route(({request}) => {
return request.destination === 'image';
}, new CacheFirst({
cacheName: 'image-assets'
}));
registerRoute(navigationRoute);
registerRoute(imageAssetRoute);
Отсюда вам нужно указать этого сервисного работника в качестве точки входа в выбранный вами упаковщик. Ниже приведены несколько примеров того, как это сделать в нескольких популярных сборщиках.
веб-пакет
webpack принимает точки входа в своей конфигурации entry . При использовании этого подхода следует учитывать несколько вещей:
- Чтобы гарантировать, что ваш сервис-воркер имеет максимально широкую область действия, вам нужно, чтобы он выводился в корень вашего выходного каталога.
- Вы не хотите, чтобы у сервис-воркера была версия, так как его обновления будут генерировать новые хэши, что может привести к развертыванию нескольких сервис-воркеров на вашем веб-сайте.
Чтобы удовлетворить вышеуказанным условиям, в output.filename можно передать функцию, которая проверяет, является ли текущая обрабатываемая точка входа точкой входа сервис-воркера. В противном случае файлы с версиями записываются в свои обычные места назначения.
// webpack.config.js
import process from 'process';
const isProd = process.env.NODE_ENV === 'production';
export default {
mode: isProd ? 'production' : 'development',
context: process.cwd(),
entry: {
// Service worker entry point:
sw: './src/sw.js',
// Application entry point:
app: './src/index.js'
},
output: {
filename: ({runtime}) => {
// Check if the current filename is for the service worker:
if (runtime === 'sw') {
// Output a service worker in the root of the dist directory
// Also, ensure the output file name doesn't have a hash in it
return '[name].js';
}
// Otherwise, output files as normal
return 'js/[name].[contenthash:8].js';
},
path: './dist',
publicPath: '/',
clean: true
}
};
свернуть
Накопительный пакет аналогичен ситуации с веб-пакетом, за исключением того, что несколько точек входа указываются как отдельные объекты конфигурации, экспортируемые в массив:
// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
// Plugins common to both entry points
const plugins = [
nodeResolve(),
];
export default [
// Application entry point
{
input: './src/index.js',
output: {
dir: './dist/js',
format: 'esm'
},
plugins
},
// Service worker entry point
{
input: './src/sw.js',
output: {
file: './dist/sw.js',
format: 'iife'
},
plugins: [
...plugins,
// This @rollup/plugin-replace instance replaces process.env.NODE_ENV
// statements in the Workbox libraries to match your current environment.
// This changes whether logging is enabled ('development') or disabled ('production').
replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
})
]
}
];
эсбилд
esbuild предлагает простой интерфейс командной строки:
npx esbuild ./src/sw.js --bundle --minify --outfile=./dist/sw.js
esbuild позаботится о замене процесса.env.NODE_ENV на «разработку» по умолчанию или на «производство», если включена минификация.
Без упаковщика с использованием workbox-sw
Ваш проект может даже не использовать сборщик. workbox-sw может загрузить для вас среду выполнения Workbox из CDN внутри вашего сервис-воркера и без этапа сборки, если вы импортируете ее с помощью importScripts :
// sw.js
// Imports Workbox from the CDN. Note that "6.2.0" of the URL
// is the version of the Workbox runtime.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
const navigationRoute = new workbox.routing.NavigationRoute(new workbox.strategies.NetworkFirst({
cacheName: 'navigations'
}));
const imageAssetRoute = new workbox.routing.Route(({request}) => {
return request.destination === 'image';
}, new workbox.strategies.CacheFirst({
cacheName: 'image-assets'
}));
workbox.routing.registerRoute(navigationRoute);
workbox.routing.registerRoute(staticAssetRoute);
Если перспектива загрузки среды выполнения Workbox из CDN не кажется вам радужной, можно использовать workbox-sw с локальными URL-адресами .
Заключение
Теперь, когда вы знаете, как использовать Workbox без предварительного кэширования, вы больше не привязаны к определенному сборщику или инструменту сборки. Это дает вам возможность вручную создать сервисного работника, используя только те фрагменты кода кэширования среды выполнения Workbox, которые вас интересуют.