Мы исследуем кеширование данных для использования в автономном режиме.

Эта статья является частью серии, которая начинается с Примеры прогрессивных веб-приложений: Часть 1.

Боковая панель в квоте Cache API

Прежде чем мы углубимся в хранение данных для использования в автономном режиме, мы сначала исследуем квоту для API Cache для конкретного источника (по сути, веб-приложения). Cache API используется сервисными работниками под капотом (для кэширования кода и ресурсов приложения).

Для браузеров, за исключением iOS Safari, квота зависит от размера тома устройства; от 50 МБ до 20 ГБ. Для iOS Safari это 50 МБ. Дополнительную информацию об этом можно найти в статье: Что такое Service Worker - Предел хранилища кэша? Сколько может храниться ваше прогрессивное веб-приложение (PWA) e .

С учетом этого практическая квота для кроссплатформенного веб-приложения составляет 50 МБ.

Для справки, наше простое приложение использовало 434 КБ; подавляющее большинство из которых - сторонние библиотеки.

примечание: потратил немного времени, пытаясь точно отследить, как мы израсходовали 434 КБ (по данным Chrome), поскольку основная часть приложения - это один Пакет JavaScript размером всего 118 КБ, как сообщается на страницах GitHub. Не пришел к удовлетворительному ответу.

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

Параметры автономного хранения данных

Теперь в центре внимания этой статьи; хранение данных. Сегодня существует три универсально доступных варианта веб-приложений:

  • Файлы cookie: устаревшие и подверженные проблемам с безопасностью; используйте вместо этого веб-хранилище API
  • API веб-хранилища: доступен в двух вариантах; sessionStorage (временный) и localStorage (постоянный). Доступно практически во всех браузерах. Практическая квота ограничена 5 МБ данных. Синхронный доступ к парам "ключ-значение" строк
  • IndexedDB: доступно практически во всех браузерах. Практическая квота ограничена 50 МБ данных. Асинхронный API для хранения на стороне клиента значительных объемов структурированных данных, включая файлы / большие двоичные объекты

Наблюдения:

  • Можно встретить Web SQL. Он устарел и не доступен повсеместно; используйте вместо него IndexDB
  • Параметры хранения Web Storage API и IndexedDB не ограничиваются прогрессивными веб-приложениями. В то же время они особенно полезны для хранения данных для автономного использования с ними.

Пример API веб-хранилища

В этом примере мы обновляем наш пример, чтобы сохранить одно значение в поле ввода формы и обратно с помощью localStorage.

Реализация обеспечивается компонентом; src / components / LocalStorage.js:

Используя Инструменты разработчика Chrome, мы можем проверить сохраненное значение в localStorage.

Пример IndexedDB

В этом примере мы получаем данные из REST API (список Todos), сохраняем их в IndexedDB для использования в автономном режиме и отображаем.

Вместо того, чтобы напрямую взаимодействовать с IndexedDB (немного сложно), мы используем стороннюю библиотеку (Dexie.js) для упрощения процесса.

Основные функции представлены в src / apis / todos.js:

Затем мы вызываем fetchTodos в src / components / IndexedDB для отображения Todos:

Используя Инструменты разработчика Chrome, мы можем проверить данные IndexedDB:

Дальнейшие действия

В следующей статье Пример прогрессивных веб-приложений: часть 4 мы продолжим наше исследование, превратив наше веб-приложение в прогрессивное веб-приложение.