Мы исследуем кеширование данных для использования в автономном режиме.
Эта статья является частью серии, которая начинается с Примеры прогрессивных веб-приложений: Часть 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 мы продолжим наше исследование, превратив наше веб-приложение в прогрессивное веб-приложение.