Кеширование объектов с помощью сервисного работника может ускорить повторные посещения и обеспечить поддержку офлайн-режима. Workbox упрощает эту задачу и по умолчанию включен в Create React App.
Workbox встроен в Create React App (CRA) с конфигурацией по умолчанию, которая предварительно кэширует все статические ресурсы в вашем приложении при каждой сборке.
Почему это полезно?
Сервисные скрипты позволяют сохранять важные ресурсы в кеше (предварительное кеширование). Когда пользователь загружает веб-страницу во второй раз, браузер может получить их из сервисного скрипта, а не отправлять запросы в сеть. Это позволяет ускорить загрузку страниц при повторных посещениях, а также показывать контент, когда пользователь находится офлайн.
Workbox в CRA
Workbox – это набор инструментов, позволяющих создавать и поддерживать сервисные скрипты. В CRA workbox-webpack-plugin уже включен в рабочую сборку, и его нужно только активировать в файле src/index.js, чтобы регистрировать новый Service Worker при каждой сборке:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
Вот пример приложения React, созданного с помощью CRA, в котором сервисный работник включен через этот файл:
Чтобы посмотреть, какие объекты кешируются:
- Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим)
. - Нажмите Ctrl + Shift + J (или Cmd + Option + J на Mac), чтобы открыть Инструменты разработчика.
- Откройте вкладку Сеть.
- Перезапустите приложение.
Обратите внимание, что вместо размера полезной нагрузки в столбце Size показывается сообщение (from ServiceWorker), указывающее, что эти ресурсы были получены из сервисного работника.
Поскольку сервис-воркер кеширует все статические объекты, попробуйте использовать приложение в офлайн-режиме:
- На вкладке Сеть в инструментах разработчика установите флажок Офлайн, чтобы имитировать работу в офлайн-режиме.
- Перезапустите приложение.
Приложение работает точно так же, даже без подключения к сети!
Изменение стратегий кеширования
По умолчанию в CRA используется стратегия предварительного кеширования Workbox Сначала кеш, при которой все статические объекты извлекаются из кеша сервисного работника, а если это не удается (например, если ресурс не кеширован), выполняется сетевой запрос. Благодаря этому пользователи могут просматривать контент даже без подключения к интернету.
Хотя Workbox поддерживает определение различных стратегий и подходов к кэшированию статических и динамических ресурсов, конфигурацию по умолчанию в CRA нельзя изменить или перезаписать, если вы не извлечете ее полностью. Однако есть предложение добавить поддержку внешнего файла workbox.config.js. Это позволит разработчикам переопределять настройки по умолчанию, просто создавая один файл workbox.config.js.
Работа со стратегией "Сначала кеш"
Использование кеша сервисного работника в первую очередь, а затем резервное копирование в сеть – отличный способ создавать сайты, которые быстрее загружаются при последующих посещениях и в некоторой степени работают в автономном режиме. Однако необходимо учитывать следующее:
- Как можно протестировать поведение кеширования с помощью сервисного работника?
- Нужно ли сообщать пользователям, что они видят кешированный контент?
Подробную информацию об этом и других аспектах вы найдете в документации по CRA.
Заключение
Используйте сервис-воркер, чтобы предварительно кешировать важные ресурсы в приложении. Это позволит ускорить его работу и обеспечить поддержку офлайн-режима.
- Если вы используете CRA, включите предварительно настроенный сервис-воркер в
src/index.js. - Если вы не используете CRA для создания приложения React, включите в процесс сборки одну из многочисленных библиотек, предоставляемых Workbox, например
workbox-webpack-plugin. - Следите за тем, когда CRA начнет поддерживать файл переопределения
workbox.config.js, в этой теме на GitHub.