Предварительное кэширование в создании приложения React с Workbox

Кэширование ресурсов с помощью сервис-воркера может ускорить повторные посещения и обеспечить автономную поддержку. 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.

Сетевые запросы к сервисному работнику

Поскольку сервис-воркер кэширует все статические ресурсы, попробуйте использовать приложение в автономном режиме:

  1. На вкладке «Сеть» в DevTools установите флажок «Автономно» , чтобы имитировать работу в автономном режиме.
  2. Перезагрузите приложение.

Приложение работает точно так же, даже без подключения к сети!

Изменение стратегий кэширования

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

Хотя Workbox предоставляет поддержку для определения различных стратегий и подходов к кэшированию статических и динамических ресурсов, конфигурацию по умолчанию в CRA нельзя изменить или перезаписать, если вы не удалите ее полностью. Однако существует открытое предложение изучить возможность добавления поддержки внешнего файла workbox.config.js . Это позволит разработчикам переопределить настройки по умолчанию, просто создав один файл workbox.config.js .

Обработка стратегии кэш-сначала

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

  • Как можно протестировать поведение сервисного работника при кэшировании?
  • Должно ли быть сообщение для пользователей, сообщающее им, что они просматривают кэшированный контент?

Документация CRA подробно объясняет эти и другие моменты.

Заключение

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

  1. Если вы используете CRA, включите предварительно настроенного сервисного работника в src/index.js .
  2. Если вы не используете CRA для сборки приложения React, включите в процесс сборки одну из многих библиотек, предоставляемых Workbox, например workbox-webpack-plugin .
  3. Следите за тем, когда CRA будет поддерживать файл переопределения workbox.config.js , в этом выпуске GitHub .