Magical Workbox 3.0 - Сделайте свой сайт легко доступным в автономном режиме

внешний интерфейс PWA
Magical Workbox 3.0 - Сделайте свой сайт легко доступным в автономном режиме

workboxЭто набор решений для локального хранения статических ресурсов веб-приложения, запущенный командой Google Chrome.Решение включает в себя некоторые библиотеки Js и инструменты сборки.Он был впервые представлен на Chrome Submit 2017. А за рабочим ящиком находитсяService Workerа такжеCache APIДругие технологии и стандарты рулят. Перед Workebox команда Google Chrome запустилась раньшеsw-precacheа такжеsw-toolboxбиблиотеки, но в глазах инженеров Google Chrome workbox является более совершенным решением, которое может удобно и единообразно обрабатывать автономные возможности, поэтому обслуживание sw-precache и sw-toolbox было прекращено.

Судя по связанным проблемам с sw-precache и sw-toolbox, многие разработчики также жалуются на них. Однако после того, как workbox выпустил версию 2.x, отклик был в целом средний.В целом, я думаю, что API слишком запутанный.Хотя функция очень мощная, но дизайн не ясен.Стоимость обучения затрудняет продвижение Тем не менее, исходя из текущей альфа-версии workbox3 Судя по документации и API, лично я считаю, что workbox3 наконец-то является артефактом, который может легко и просто решить большинство проблем Service Worker, поэтому я написал эту статью, чтобы дать исчерпывающее введение.

Обратите внимание, что текущий workbox 3 все еще находится в стадии альфа-версии, и API и интерфейс могут быть скорректированы. Некоторые из инструментов, упомянутых в статье, могут быть не полностью готовы от Google. Эта статья является ранней версией до официального выпуска. , возобновить.

Обзор

workbox теперь выпущен в альфа-версии 3.0, давайте сначала взглянем на workbox:

  • Независимо от того, как построен ваш сайт, вы можете предоставить автономный доступ к своему сайту.
  • Даже если вы не рассматриваете автономные возможности, это может ускорить посещение вашего сайта.
  • Почти нет необходимости рассматривать слишком много конкретных реализаций, просто выполните некоторую настройку.
  • Простой, но гибкий, вы можете полностью настроить соответствующие требования (поддержка функций, связанных с Service Worker, таких как Web Push, фоновая синхронизация и т. д.)
  • Несколько стратегий кэширования для различных сценариев приложений

бинго! Если вам нравятся эти функции, вы можете посмотреть вниз.Мы говорим о содержании workbox 3.0 здесь.Конечно, основные проблемы, решаемые workbox, мало чем отличаются от предыдущих версий, но в API были внесены некоторые коррективы. , а аспекты, связанные со строительством, считаются более полными.После того, как workbox входит в 3.0, API выглядит намного понятнее. Давайте взглянем на конкретное содержимое workbox 3.

Применение

Чтобы использовать Workbox, сначала необходимо создать файл сервисного работника в вашем проектеsw.jsи зарегистрируйтесь на своем сайте:

<script>
// 可以这么注册 Service Worker
if ('serviceWorker' in navigator) {
    // 为了保证首屏渲染性能，可以在页面 load 完之后注册 Service Worker
    window.onload = function () {
        navigator.serviceWorker.register('/sw.js');
    };
}
</script>

имеютsw.jsПосле этого вы можете использовать рабочий ящик, вам просто нужноsw.jsВы можете использовать его, импортировав workbox:

// workbox 2.x 是将 workbox 核心内容放在 workbox-sw node_modules 包里维护的
// workbox 3.x 开始是将 workbox 核心 lib 放在 CDN 维护
// 当然也可以挪到自己的 CDN 维护
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0-alpha.3/workbox-sw.js');

if (workbox) {
    console.log(`Yay! workbox is loaded 🎉`);
}
else {
    console.log(`Boo! workbox didn't load 😬`);
}

когда вsw.jsможет получитьworkboxГлобальная переменная указывает, что рабочий ящик можно использовать.Что он может делать?

  • пройти черезworkbox.precachingМодуль для обработки предварительного кэширования статических ресурсов Service Worker.
  • пройти черезworkbox.routingМодуль обеспечивает управление маршрутизацией иworkbox.strategiesУправление политикой кэширования, предоставляемое модулем, помогает вам выполнять динамическое кэширование.
  • Используйте плагин workbox для выполнения некоторой относительно независимой работы Service Worker, такой как напоминания об обновлениях, фоновая синхронизация и т. д.

предварительное кэширование (pre-cache) статических файлов

Если у вас есть какие-то статические ресурсы, которые необходимо кешировать в автономном режиме навсегда, и кеш не будет обновляться, пока вы снова не подключитесь к сети, то предварительный кеш должен быть тем, что вы ожидаете.Если вы понимаете жизненный цикл Service Worker, работа предварительного кеширования в сервисном работнике.installДелается через Cache API, подробнее об этом можно узнатьЖизненный цикл обслуживания.

workbox предоставляет очень удобный API, помогающий нам решить проблему предварительного кэша, который похож на работу решения Google для предварительного кэширования sw-precache. рабочий ящик с помощьюprecaching.precacheAndRouteИнтерфейс завершает операцию предварительного кэширования:

workbox.precaching.preacheAndRoute([
    '/styles/index.0c9a31.css',
    '/scripts/main.0d5770.js',
    {
        url: '/index.html',
        revision: '383676'
    },
]);

Приведенный выше код будет загружен после успешной установки Service Worker./styles/index.0c9a31.css,/scripts/main.0d5770.js, /index.htmlфайлы и будут хранить эти файлы в хранилище кэша, создавая маршруты. Этот входящий массив на самом деле представляет собой список предварительно кэшированного контента.Есть две формы: одна предназначена для прямой записи строки имени файла (с хэшем), а другая - для URL и версии, как показано ниже. объект значения:

{
    url: '将要预缓存的文件 URL,
    revision: '文件内容的 Hash 值'
}

Здесь следует отметить, что значение этой ревизии будет обновляться при изменении предварительно кэшированного файла.Если ревизия не обновляется, кэшированный файл не будет обновляться при обновлении Service Worker.

Далее мы представим несколько вещей, которые помогут нам создать список предварительно кэшированного контента.precaching.precacheAndRouteПараметры конфигурации для API.

иметь дело с/а также/index.html

Обычно, когда пользователь получает доступ/, соответствующий HTML-файл посещенной страницы/index.html, по умолчанию механизм маршрутизации предварительного кэша запускается в конце любого URL-адреса./добавить послеindex.html, что означает, что любой предварительно кэшированныйindex.htmlможет пройти/index.htmlили/доступ к.

Конечно, вы также можетеdirectoryIndexПараметр отключает это поведение по умолчанию:

workbox.precaching.preacheAndRoute(
    [
        '/styles/index.0c9a31.css',
        '/scripts/main.0d5770.js',
        {
            url: '/index.html',
            revision: '383676'
        },
    ],
    {
        directoryIndex: null
    }
);

Игнорировать параметры запроса

Например, если мы хотим иметьkey1параметр не/example.html?key1=1&key2=2часть, вам просто нужно установитьignoreURLParametersMatchingпараметр, чтобы исключить его:

workbox.precaching.precacheAndRoute(
    [
        {
            url: '/example.html?key2=2',
            revision: '6821e0'
        }
    ],
    {
        ignoreUrlParametersMatching:[/key1/],
    }
);

так/example.html?key1=1&key2=2Содержимое, соответствующее этому маршруту, может быть предварительно кэшировано.

Сгенерировать список предварительного кэша

ручное обслуживаниеprecache.precacheAndRouteСписок предварительно закэшированного контента в API невозможен, и мы не можем поддерживать ревизию вручную, поэтому для этого мы должны использовать некоторые инструменты.К счастью, workbox предоставляет нам множество способов на выбор:

  • командная строка рабочего ящика
  • пакет workbox-build npm
  • workbox-webpack-plugin

Прежде чем использовать три вышеуказанных метода для создания предварительно кэшированного списка контента, давайте заранее настроим сценарий приложения: предположим, что ваш проект находится в каталоге/app, вы должны убедиться, что естьapp/sw.jsСодержит следующее:

// 通常项目中的 sw.js 源文件都是通过这样预留一个空数组的方式来预缓存内容列表的
workbox.precaching.precacheAndRoute([]);

Это гарантирует, что содержимое сгенерированного предварительно кэшированного списка содержимого может быть внедрено в файл Service Worker.

командная строка рабочего ящика

workbox предоставляет набор командных строк специально для того, чтобы помочь нам внедрить список предварительно кэшированного контента, который может помочь нам сгенерировать необходимый контент для внедрения списка предварительно кэшированного контента.workbox-cli-config.jsфайл конфигурации, а затем используйте файл конфигурации через командную строку, чтобы сгенерировать код списка предварительного кэширования и внедрить его в ранее настроенныйapp/sw.jsВ файле он, наконец, скомпилирован в файл Service Worker, необходимый онлайн:dist/sw.js.

Установить командную строку:

npm install -g workbox-cli

Итак, у нас сначала естьworkbox-cli-config.jsфайл, а затем объединить в соответствии с этим файлом/app/sw.jsисходный файл для создания списка предварительного кэшированияdist/sw.jsдокумент. Далее мы можем увидеть, как должна работать эта серия процессов.

сначала выполнитьworkbox generate:swкоманда для создания файла конфигурацииworkbox-cli-config.js, после того как эта команда будет выполнена, вам нужно будет выбрать несколько вопросов, а именно:

>$ workbox generate:sw
? What is the root of your web app? app
? Which file types would you like to cache? (Press <space> to select, <a> to toggle all, <i> to inverse selection)html,ico,svg,png,js,css
? What should the path of your new service worker file be (i.e. './build/sw.js')? dist/sw.js
? Last Question - Would you like to save these settings to a config file? Yes

Ответив на эти вопросы, вы можете экспортировать новый в свой проект.workbox-cli-config.jsФайл конфигурации выглядит следующим образом:

// workbox-config.js
module.exports = {
    "globDirectory": "app/",
    "globPatterns": [
        "**/*.{html,ico,svg,png,js,css}"
    ],
    "swDest": "dist/sw.js",
    "swSrc": "app/sw.js"
};

понятноworkbox-cli-config.jsПосле того, как файл конфигурации может быть выполненworkbox inject:manifest workbox-cli-config.jsкоманда для создания скомпилированногоdist/sw.jsфайл, что делает этот шаг, так это вставляет предварительно кэшированный список содержимого вapp/sw.jsКак правило, используйте командную строку только для ввода предварительно кэшированного списка содержимого перед выходом в Интернет.Обычно мы не будем выполнять эти команды вручную.Разумнее реализовать сгенерированныйworkbox-cli-config.jsфайл, который затем настраивается в скрипте сборки для автоматического выполненияworkbox inject:manifestЗаказ.

workbox inject:manifestТо, как работает команда, должно соответствовать/app/sw.jsсерединаworkbox.precaching.precacheAndRoute([])Затем регулярность метода вводится через замену контента, вы можете обратиться к введению workbox-build ниже.

workbox-build

Всегда глупо использовать командную строку, а шаги операции относительно громоздки.Чтобы сделать работу с предварительным кэшированием проще и гибче, workbox также предоставляет пакет NPM —workbox-build, который вы можете использовать в любом инструменте сборки.

Пакет workbox-build можно установить, выполнив следующую команду в корневом каталоге вашего проекта:

npm install --save-dev workbox-build

Затем вы можете напрямую импортировать библиотеку workbox-build, где вы хотите обрабатывать предварительное кэширование Service Worker, и вызывать ееinjectManifestметод:

const workboxBuild = require('workbox-build');

workboxBuild.injectManifest({
    swSrc: path.join(__dirname, 'app', 'sw.js'),
    swDest: path.join(__dirname, 'dist', 'sw.js'),
    globDirectory: './dist/',
    globPatterns: ['**\/*.{html,js,css}'],
    globIgnores: ['admin.html'],
    templatedUrls: {
        '/shell': ['dev/templates/app-shell.html', 'dev/**\/*.css'],
    },

    // 要替换的预留代码区正则
    injectionPointRegexp: /(\.precacheAndRoute\()\s*\[\s*\]\s*(\))/,
})
.catch(err => {
    console.error(`Unable to inject the precache manifest into sw.js`);
    throw err;
});

Выполнение этого кода в файле сборки будет читатьapp/sw.jsфайл, а затем создатьdist/sw.jsФайл содержит список внедренного предварительно кэшированного контента.

О том, как использоватьinjectManifestМетод может просматривать сборку рабочего ящикаinjectManifestметодВсе параметры

workbox-webpack-plugin

С workbox-build можно придумать множество практических плагинов для предварительного кэширования, таких как Webpack, Gulp и другие плагины, а workbox официально предоставляет плагин.workbox-webpack-plugin, вы можете установить плагин в свой проект веб-пакета:

npm install --save-dev workbox-webpack-plugin

Затем вам нужно только добавить плагин в конфигурацию Webpack, и его можно использовать в обычном режиме, параметры плагина и сборка рабочего ящикаinjectManifestМетод остается прежним:

const workboxPlugin = require('workbox-webpack-plugin');

// ...
webpack({
    plugins: [
        // ...
        new workboxPlugin({
            swSrc: './src/sw.js',
            swDest: './dist/sw.js',
            globDirectory: './dist/',
            globPatterns: ['**/*.{html,js,css}'],
        })
    ]
    // ...
});

Здесь место и ранее упомянутой замене зарезервированоapp/sw.jsДругое: использование подключаемого модуля Webpack, предоставляемого рабочим ящиком, должно бытьapp/sw.jsВключите следующий код, чтобы завершить внедрение предварительно кэшированного списка содержимого.

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

Когда плагин запустится, он/dist/sw.jsдобавить абзацimportScripts()Код используется для введения модуля, содержимое этого модуляself.__precacheManifest, то есть содержимое предварительно кэшированного списка содержимого, конкретный эффект можно использовать в проектеworkbox-webpack-pluginПопробуйте и посмотрите после сборкиdist/sw.jsРезультат будет более четким.

кеш запроса маршрута

Кэширование запросов маршрута — это способ кэширования различных стратегий для сформулированных файлов маршрутов посредством шаблона сопоставления файловых маршрутов.Эта часть работы может быть выполнена вapp/sw.jsНепосредственно используйте рабочее поле, предоставленное вworkbox.routing.registerRouteAPI завершен. Можно понимать, что этот API выполняет две функции.1. Сопоставьте указанный файл для кэширования или запрошенный контент с помощью конфигурации маршрутизации запроса.,2. Определите, какую стратегию использовать для кэширования соответствующих файлов с помощью функции обратного вызова обработки второго параметра.. имеюттриМетоды могут соответствовать URL-адресу запроса через workbox-route.

  • строковый режим
// 可以直接是当前项目下的绝对路径
workbox.routing.registerRoute(
    '/logo.png',
    handler // handler 是做缓存策略的回调函数，通常指后面所会降到的 '缓存策略函数'
);

// 也可以是完整的带完整 host 的 URL 路径，这里的 URL 必须是 https 的
workbox.routing.registerRoute(
    'https://some-host/some-path/logo.png',
    handler
);
  • регулярное выражение
workbox.routing.registerRoute(
    new RegExp('.*\.js'), // 这里是任何正则都行，只要能匹配得上的请求路由地址
    handler
);
  • функция обратного вызова
// 通过回调函数来匹配请求路由将会让策略更加灵活
const matchFunction = ({url, event}) => {
    // 如果请求路由匹配了就返回 true，也可以返回一个参数对象以供 handler 接收处理
    return false;
};

workbox.routing.registerRoute(
    matchFunction,
    handler
);

Вышеупомянутые три способа сопоставления маршрута запроса. Далее мы можем поговорить о том, как обрабатывать контент, возвращаемый совпадающим запросом, то есть обработчиком трех вышеуказанных методов сопоставления маршрута. Обычно есть два способа:

  • использовать рабочий ящик черезworkbox.strategiesпредоставляется APIстратегия кэширования.
  • Предоставляет пользовательский метод обратного вызова, который возвращает Promise с возвращаемым результатом.

Стратегия кэширования запросов маршрутизации

Ниже представлено несколько API-интерфейсов политики кэширования, предоставляемых workbox по умолчанию.Эти API-интерфейсы можно использовать в качестве обработчиков.

Stale While Revalidate

Эта стратегия означает, что когда запрошенный маршрут имеет соответствующий результат кеша кэша, он будет возвращен напрямую.Когда результат кеша кэша возвращен, сетевой запрос будет инициирован в фоновом режиме для получения результата запроса и обновления кеша кэша.Если кэш-память отсутствует. Это очень безопасная стратегия для пользователей, которая напрямую инициирует сетевой запрос и возвращает результат, что может гарантировать, что пользователь сможет получить результат запроса как можно быстрее, но также имеет определенные недостатки, то есть все равно будут сетевые запросы, которые занимают пользовательскую пропускную способность сети. можно использовать следующим образомState While RevalidateСтратегия:

workbox.routing.registerRoute(
    match, // 匹配的路由
    workbox.strategies.staleWhileRevalidate()
);

Network First

Эта стратегия заключается в том, что при совпадении маршрута запроса принимается стратегия приоритета сети, то есть сначала выполняется попытка получить возвращаемый результат сетевого запроса.Если результат сетевого запроса получен, результат возвращается в клиента и записывается в Cache.Cache, в случае сбоя сетевого запроса клиенту будет возвращен последний результат кэширования кэша Cache.Эта стратегия обычно применима к запросам, чьи возвращаемые результаты не очень фиксированы или требуют производительности в реальном времени, поэтому как сделать практический результат для сбоев сетевых запросов. можно использовать какNetwork FirstСтратегия:

workbox.routing.registerRoute(
    match, // 匹配的路由
    workbox.strategies.networkFirst()
);

Cache First

Эта стратегия означает, что при совпадении запроса результат получается непосредственно из кеша Cache.Если в кеше Cache нет результата, он инициирует сетевой запрос, получает результат сетевого запроса, обновляет результат до Кэшировать кеш и возвращать результат клиенту. Эта стратегия больше подходит для запросов, результаты которых не сильно меняются и не требуют высокой производительности в реальном времени. можно использовать какCache FirstСтратегия:

workbox.routing.registerRoute(
    match, // 匹配的路由
    workbox.strategies.cacheFirst()
);

Network Only

Более прямая стратегия, напрямую заставляющая использовать обычные сетевые запросы и возвращающая результаты клиенту, больше подходит для запросов с очень высокими требованиями к реальному времени. можно использовать какNetwork OnlyСтратегия:

workbox.routing.registerRoute(
    match, // 匹配的路由
    workbox.strategies.networkOnly()
);

Cache Only

Эта стратегия также относительно проста, напрямую используя результаты кэша и возвращая результаты клиенту.Эта стратегия больше подходит для статических запросов ресурсов, которые не изменятся, как только они будут подключены к сети. можно использовать какCache OnlyСтратегия:

workbox.routing.registerRoute(
    match, // 匹配的路由
    workbox.strategies.networkOnly()
);

Независимо от используемой стратегии вы можете настроить поведение маршрута (то, как он возвращает результаты), настроив кеш для использования или добавив плагины (плагин workbox мы рассмотрим позже).

workbox.strategies.staleWhileRevalidate({
    // 使用用户自定义的缓存名称
    cacheName: 'my-cache-name',

    // 使用 workbox 插件
    plugins: [
        // ...
    ]
});

Конечно, эти конфигурации обычно требуют больше безопасности при запросах кэша, то есть время, необходимое для ограничения кэша, либо для обеспечения того, чтобы данные на устройстве ограничены.

индивидуальная стратегия

Если ни одна из вышеперечисленных стратегий не может удовлетворить требования к кэшированию вашего запроса, вам нужно найти способ настроить подходящую стратегию или даже вернуть разные результаты запроса в разных ситуациях.Workbox также учитывает этот сценарий (вот почему я настоятельно рекомендую workbox), конечно, проще всего передать самый примитив прямо в файле Service WorkerfetchСобытия управляют стратегией кэширования. Вы также можете использовать другой метод, предоставляемый workbox: передать функцию обратного вызова с параметром объекта, и объект содержит соответствующийurlи просилfetchEventпараметр, функция обратного вызова возвращает объект ответа, конкретное использование выглядит следующим образом:

workbox.routing.registerRoute(
    ({url, event}) => {
        return {
            name: 'workbox',
            type: 'guide',
        };
    },
    ({url, event, params}) => {
        // 返回的结果是：A guide on workbox
        return new Response(
            `A ${params.type} on ${params.name}`
        );
    }
);

Кэш сторонних запросов

Если некоторые запрошенные домены не соответствуют текущему веб-сайту, их можно рассматривать как сторонние ресурсы или запросы и кэшировать для сторонних запросов, поскольку Workbox не может получить статус сторонних запросов на маршрутизацию, а в случае сбоя запроса, workbox может выбрать только кэширование неправильных результатов, поэтому workbox 3 по умолчанию не будет кэшировать возвращенные результаты сторонних запросов. Другими словами, следующие политики кэширования не будут действовать по умолчанию:

workbox.routing.registerRoute(
    'https://notzoumiaojiang.com/example-script.min.js',
    workbox.strategies.cacheFirst(),
);

Конечно, не все политики нельзя использовать на сторонних запросах, workbox 3 может позволитьnetworkFirstа такжеstalteWhileRevalidateСтратегия кэширования вступает в силу, потому что эти стратегии будут регулярно обновлять возвращаемый контент кэша, ведь кэшированный контент будет обновляться после каждого запроса, что гораздо безопаснее, чем прямое кэширование.

Если вы принудительно применяете стратегию кэширования, не рекомендованную рабочим блоком 3, для кэширования сторонних запросов, рабочий блок сообщит об аварийном сигнале на консоли в DevTools.

Если вы по-прежнему настаиваете на кешировании результатов сторонних запросов, рабочий блок 3 также учитывает, что действительно существует такой труднопреодолимый спрос, и предоставляет очень удобный способ удовлетворить спрос: используйтеworkbox.cacheableResponse.PluginЧтобы указать, что кэшируются только результаты успешных запросов, это устраняет наши предыдущие опасения по поводу кэширования небезопасных результатов. Гусиная девочка Цзыин! (Мы представим механизм плагинов позже)

workbox.routing.registerRoute(
    'https://notzoumiaojiang.com/example-script.min.js',
    workbox.strategies.cacheFirst({
        plugins: [
            // 这个插件是让匹配的请求的符合开发者指定的条件的返回结果可以被缓存
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200]
            })
        ]
    }),
);

конфигурация рабочего ящика

Workbox 3 предоставляет некоторые элементы конфигурации, инкапсулированные вworkbox.coreAPI, вы можете понять немного.

Настроить имя кеша

пройти черезDevTools -> Applications -> CachesМожно обнаружить, что в workbox есть некоторые правила именования кеша:

<prefix>-<ID>-<suffix>

Каждое имя имеет префикс и суффикс, середина - это идентификатор реального имени, в основном, чтобы предотвратить появление повторяющихся имен в большей степени, вы можете настроить имена кеша в виде предварительного кеша и времени выполнения следующими способами:

workbox.core.setCacheNameDetails({
    prefix: 'my-app',
    suffix: 'v1',
    precache: 'custom-precache-name',// 不设置的话默认值为 'precache'
    runtime: 'custom-runtime-name' // 不设置的话默认值为 'runtime'
});

После вышеуказанных настроек имя кеша типа precache будетmy-app-custom-precache-name-<ID>-v1, имя кеша типа среды выполненияmy-app-custom-runtime-name-<ID>-v1. workbox рекомендует попробовать установить разные префиксы для каждого из ваших проектов, чтобы вы могли избежать конфликтов при отладке сервисного работника на локальном хосте.

Чтобы сделать управление кешем веб-приложения более понятным и удобным в сопровождении, workbox также предоставляет параметры именования кеша на уровне политики, доступ к которым можно получить через API политик.cacheNameпараметры для установки:

workbox.routing.registerRoute(
    /.*\.(?:png|jpg|jpeg|svg|gif)/g,
    new workbox.strategies.CacheFirst({
        cacheName: 'my-image-cache',
    })
);

Таким образом, соответствующая картина связана сcacheFirstКэш политики начнется сmy-image-cache-<ID>Что касается формы наименования, здесь следует отметить следующее:префикс и суффикс не нужно устанавливать

Указать среду разработки

В процессе разработки workbox требуется отладка, поэтому workbox 3 также предоставляет механизм ведения журнала, который помогает нам устранять проблемы, но в производственной среде мы не хотим генерировать информацию журнала, поэтому workbox предоставляет параметр «указать текущий окружающая обстановка":

// 设置为开发模式
workbox.setConfig({debug: true});

// 设置为线上生产模式
workbox.setConfig({debug: false});

Настроить уровень журнала

Рабочий ящик 3 предоставляет механизм ведения журнала, который помогает нам лучше отлаживать рабочий ящик.Существует четыре уровня журнала:debug,log,warn,error.

workbox logs

Вы можете установить уровень журнала следующими способами, чтобы вы могли видеть информацию журнала только определенного уровня, что делает процесс отладки более целенаправленным. Конкретный метод настройки черезworbox.coreв APIsetLogLevelспособ завершения:

// 展示所有的 log
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);

// 只展示 log, warning 和 error 类型的 log
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.log);

// 只展示 warning 和 error 类型的 log
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.warn);

// 只展示 error 类型的 log
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.error);

// 啥 log 都没有，这个适用于线上生产环境
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.silent);

плагин рабочей области

Механизм плагинов должен быть самым большим улучшением workbox 3. В 2.x большинство функций существующих плагинов напрямую перебрасываются разработчикам в виде API, что вводит разработчиков в замешательство.Теперь каждый встроенный плагин -in в 3.0 Он сам по себе инкапсулирует предыдущие API и решает независимые проблемы для разработчиков. Кроме того, workbox 3 также предоставляет механизм расширения плагинов и перехватчики событий, которые позволяют разработчикам самостоятельно расширять плагины. Плагин workbox позволяет добавить дополнительное поведение, манипулируя содержимым возврата и запроса в жизненном цикле запроса.

Плагины Workbox обычно используются в стратегиях кэширования, что может сделать стратегии кэширования разработчиков более гибкими.Workbox имеет встроенные плагины:

  • workbox.backgroundSync.Plugin: в случае сбоя сетевого запроса добавьте запрос в очередь фоновой синхронизации и повторно инициируйте запрос до того, как сработает следующее событие синхронизации.

  • workbox.broadcastUpdate.Plugin: сообщение будет отправлено всем клиентам при обновлении кэша, аналогичноsw-register-webpack-pluginСписок задач.

  • workbox.cacheableResponse.Plugin: позволяет кэшировать возвращенные результаты сопоставления запросов, которые соответствуют условиям, указанным разработчиком, к которым можно получить доступ черезstatus, headersПараметры задают некоторые условия правила.

  • workbox.expiration.Plugin: управлять количеством кэшей и длительностью кэшей.

Плагин workbox можно использовать следующим образом:workbox.expiration.PluginНапример:

workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    workbox.strategies.cacheFirst({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 60, // 最大的缓存数，超过之后则走 LRU 策略清除最老最少使用缓存
                maxAgeSeconds: 30 * 24 * 60 * 60, // 这只最长缓存时间为 30 天
            }),
        ],
    }),
);

пользовательский плагин

Конечно, workbox также знает, что эти плагины не могут соответствовать требованиям вашей пользовательской стратегии, поэтому он просто выставляет ключевые события всего жизненного цикла запроса в виде callback-функций обработчиков событий, то есть мы можем использовать эти обработчики событий для создания Ваш собственный более гибкий плагин рабочего поля. Плагин — это конструктор, а хук — это метод конструктора, который разработчики могут настраивать и разрабатывать. Вот некоторые хуки событий:

cacheWillUpdate

cacheWillUpdate({request, response}), вызываемый до того, как запрос возвращает результат для замены результата Cache, вы можете изменить возвращаемый результат в этом обработчике событий перед обновлением кеша, если результат установлен непосредственно наnullчтобы возвращенный результат текущего запроса не обновлялся в кеше.

cacheDidUpdate

cacheDidUpdate({cacheName, request, oldResponse, newResponse}), вызываемый при наличии новой записи записи в кэш или обновлении кэша кэша, вы можете вызвать этот метод, чтобы сделать что-то после обновления кэша кэша.

cachedResponseWillBeUsed

cachedResponseWillBeUsed({cacheName, request, matchOptions, cachedResponse}), вызываемый до того, как результат Cache будет запущен в событии fetch до того, как ответ будет возвращен.Этот обратный вызов можно использовать, чтобы разрешить или запретить возврат ответа используемого Cache.

requestWillFetch

requestWillFetch({request})Когда будет вызвано какое-либо событие, будет вызвана выборка, вы можете изменить содержимое запроса в запросе на уничтожение.

fetchDidFail

fetchDidFail({originalRequest, request}), вызываемый, когда событие выборки не срабатывает, сбой триггера события выборки заключается в том, что сеть вообще не может запросить, а не в том, что запрос возвращается как非 200Когда состояние находится в состоянии, вы можете использовать этот хук, чтобы что-то сделать при обнаружении отключения сети.

Если вы хотите написать свой собственный плагин рабочего поля, просто обратитесь к следующему способу:

// my-workbox-plugin.js
export default const MyWorkboxPlugin = {
    cacheWillUpdate({request, response}) {
        // ... 搞事情
    },

    // ... 继续搞事情
};

Эта статья относится кОфициальная документация Google, сделаны некоторые интерпретации и обобщения на основе документа. Заинтересованные разработчики могут прочитать исходный документ. В документе также перечислены некоторые "Лучшие практики"так же как "debug», может помочь нам лучше использовать рабочий ящик.

Наконец, каждый может отсканировать код и подписаться на мой общедоступный аккаунт в WeChat «Jiang Ge Luan Tan», а также обратить внимание на другие мои статьи.

Эта статья является оригинальной статьей, и точки знаний будут часто обновляться, а некоторые ошибки будут исправлены.Поэтому, пожалуйста, сохраняйте первоисточник для перепечатки, что удобно для отслеживания источника, избежания введения в заблуждение устаревшими неправильными знаниями и наличия лучший опыт чтения.
При воспроизведении указать источник:Перейти Miaojiang.com/article/Ama…
Категории