Workbox - это набор библиотек и инструментов для сборки, которые позволяют легко хранить файлы вашего веб-сайта локально на устройствах пользователей. (Сайт Workbox)

Workbox сочетает в себе набор надежных инструментов сборки и библиотек, которые помогут вам создать правильного Service Worker для вашего веб-приложения. Если вы еще не знаете, что это такое, Service worker - это файл Javascript, который запускается в фоновом режиме вашего веб-приложения для добавления таких функций, как кэширование, фоновая синхронизация, push-уведомления, а также другие полезные API-интерфейсы, доступные в современных браузерах.

Сервис-воркеры стали настолько популярными из-за относительно новых прогрессивных веб-приложений, которые представляют собой просто способ постепенного улучшения взаимодействия с пользователем за счет добавления функциональности в веб-приложение до тех пор, пока браузер пользователя поддерживает эту функциональность (возможно через обнаружение функций). Это важно, потому что, хотя браузеры могут действительно улучшаться в результате усовершенствования мобильных устройств с точки зрения технических характеристик, по-прежнему важно обслуживать всех и все устройства, потому что вы никогда не знаете, кто ваш платящий клиент.

Так где же тут Workbox?

Как сказано в приведенном выше описании, Workbox - это набор инструментов, которые помогут вам создать сервис-воркера, подходящего для вашего варианта использования. Поскольку Workbox также представляет собой набор передовых практик, это означает, что вам больше не нужно раздувать приложение запутанным шаблоном или копировать код из Stack Overflow. Вместо этого вы получаете хорошо написанный и простой для понимания код в меньшем количестве строк. Простота Workbox на самом деле дает вам возможность делать больше с меньшими затратами.

Джефф Посник в своем выступлении на # ChromeDevSummit17 использовал следующие фрагменты кода, чтобы проиллюстрировать, насколько проста жизнь с Workbox. Смотрите« Workbox: гибкие библиотеки PWA (Chrome Dev Summit 2017) Джеффа Посника здесь».

Все это сводится к…

Или, если вы хотите иметь параметры того, как и когда обновляется кеш, вы можете просто…

Начиная

Workbox поставляется с интерфейсом командной строки. Чтобы установить его, просто запустите

npm install -g workbox-cli

А чтобы создать сервис-воркер, запустите

workbox generate:sw

Это создаст базового сервис-воркера, использующего конфигурацию Workbox по умолчанию. Вы можете предоставить свою собственную конфигурацию, указав ее в своей команде generate: sw следующим образом:

workbox generate:sw --config-file=./path/to/config.js

Типичная конфигурация Workbox может указывать такие вещи, как каталог для кеширования, место назначения сгенерированного сервис-воркера, имя и срок действия кеша и даже стратегию кеширования для использования для данного маршрута. Пример приведен ниже.

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

Интеграция с системами сборки

Это, пожалуй, самая замечательная часть Workbox. Настолько легко интегрировать Workbox в вашу предпочтительную систему сборки. На сайте Workbox есть примеры интеграции с наиболее широко используемыми, например, Webpack, Gulp и npm-скриптами. Я использую Webpack и npm-скрипты (иногда вместе) для создания своих проектов Vue.Js. В Workbox есть плагин для веб-пакетов, который вы можете просто установить с помощью

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

Этот плагин необходимо добавить (или разместить соответствующим образом) в массиве плагинов в webpack.config.js (или webpack.prod.conf.js) с помощью следующего кода.

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

 const DIST_DIR = 'dist';

 module.exports = { /* Do the usual webpack stuff. */
   plugins: [ /* Call the plugin. */
     ...
     new workboxPlugin({
       globDirectory: DIST_DIR,
       globPatterns: ['**/*.{html,js,css}'],
       swDest: path.join(DIST_DIR, 'sw.js'),
     }),
   ]
 };

Если у вас есть файл конфигурации Workbox, вы можете использовать плагин с этой конфигурацией так ...

plugins: [ /* Call the plugin. */
    ...
    new workboxPlugin(require('./path/to/workbox/config.js')),
]

Я даже написал свой собственный плагин Webpack, чтобы добавить сервис-воркера в html, и использовал cheerio для синтаксического анализа html.

Таким образом, я интегрировал Workbox для создания сервисного воркера каждый раз, когда я запускаю npm run build, а также убедился, что сервисный воркер добавлен в index.html моего веб-приложения. Теперь пользователи могут быстрее работать в Интернете и продолжать использовать веб-приложение даже в автономном режиме.

Заключение

Прогрессивные веб-приложения, похоже, привлекли к себе внимание, которого они заслуживают. Они привносят в Интернет мощь нативных технологий (автономное использование), способствуют вовлечению пользователей (с помощью веб-push-уведомлений) и многое другое. Все эти потрясающие функции для вашего веб-приложения начинаются с сервис-воркера, а Workbox упрощает этот процесс создания сервис-воркера. Обязательно ознакомьтесь с официальной документацией для Workbox, чтобы узнать больше о его возможностях, таких как автономная Google Analytics и Фоновая синхронизация.