Кэширование ресурсов с помощью сервис-воркера может ускорить повторные посещения и обеспечить автономную поддержку. Workbox упрощает эту задачу и по умолчанию включен в приложение Create React.
Workbox встроен в Create React App (CRA) с конфигурацией по умолчанию, которая предварительно кэширует все статические ресурсы вашего приложения при каждой сборке.
Почему это полезно?
Сервис-воркеры позволяют хранить важные ресурсы в своем кеше ( прекэширование ), чтобы, когда пользователь загружает веб-страницу во второй раз, браузер мог получить их от сервис-воркера вместо того, чтобы делать запросы к сети. Это приводит к более быстрой загрузке страниц при повторных посещениях, а также к возможности отображать контент, когда пользователь не в сети.
Рабочий ящик в CRA
Workbox — это набор инструментов, которые позволяют создавать и поддерживать сервис-воркеры. В CRA плагин workbox-webpack-plugin уже включен в производственную сборку, и его нужно только включить в файле src/index.js , чтобы зарегистрировать нового сервис-воркера в каждой сборке:
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, в котором через этот файл включен сервисный работник:
Чтобы увидеть, какие ресурсы кэшируются:
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим
. - Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку Сеть .
- Перезагрузите приложение.
Вы заметите, что вместо размера полезных данных в столбце Size отображается сообщение (from ServiceWorker) указывающее, что эти ресурсы были получены от Service Worker.
Поскольку сервис-воркер кэширует все статические ресурсы, попробуйте использовать приложение в автономном режиме:
- На вкладке «Сеть» в DevTools установите флажок «Автономно» , чтобы имитировать работу в автономном режиме.
- Перезагрузите приложение.
Приложение работает точно так же, даже без подключения к сети!
Изменение стратегий кэширования
Стратегия предварительного кэширования по умолчанию, используемая Workbox в CRA, — это кэш-сначала , при которой все статические ресурсы извлекаются из кэша сервисного работника, и если это не удается (например, если ресурс не кэшируется), выполняется сетевой запрос. Таким образом, контент может по-прежнему предоставляться пользователям, даже когда они находятся в полностью автономном состоянии.
Хотя Workbox предоставляет поддержку для определения различных стратегий и подходов к кэшированию статических и динамических ресурсов, конфигурацию по умолчанию в CRA нельзя изменить или перезаписать, если вы не удалите ее полностью. Однако существует открытое предложение изучить возможность добавления поддержки внешнего файла workbox.config.js . Это позволит разработчикам переопределить настройки по умолчанию, просто создав один файл workbox.config.js .
Обработка стратегии кэш-сначала
Использование сначала кеша сервис-воркера, а затем возврат к сети — отличный способ создать сайты, которые загружаются быстрее при последующих посещениях и в некоторой степени работают в автономном режиме. Однако есть несколько вещей, которые необходимо принять во внимание:
- Как можно протестировать поведение сервисного работника при кэшировании?
- Должно ли быть сообщение для пользователей, сообщающее им, что они просматривают кэшированный контент?
Документация CRA подробно объясняет эти и другие моменты.
Заключение
Используйте сервис-воркера для предварительного кэширования важных ресурсов в вашем приложении, чтобы обеспечить более быструю работу ваших пользователей, а также автономную поддержку.
- Если вы используете CRA, включите предварительно настроенного сервисного работника в
src/index.js. - Если вы не используете CRA для сборки приложения React, включите в процесс сборки одну из многих библиотек, предоставляемых Workbox, например
workbox-webpack-plugin. - Следите за тем, когда CRA будет поддерживать файл переопределения
workbox.config.js, в этом выпуске GitHub .