Подключение через CDN

Основной способ подключения библиотеки

Библиотека localForage может быть подключена напрямую через CDN без установки через npm или сборщики. Такой способ применяется в случаях, когда проект не использует сборку, либо требуется быстрое подключение функциональности клиентского хранилища.

Наиболее распространённый вариант подключения — использование официального CDN, предоставляющего готовый минифицированный файл:

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

После подключения библиотека становится доступной в глобальной области видимости через объект:

localforage

Этот объект содержит весь публичный API для работы с асинхронным хранилищем.

Проверка успешного подключения

После добавления CDN-скрипта можно проверить доступность библиотеки:

if (typeof localforage !== "undefined") {
  console.log("localForage загружен");
}

Также можно убедиться в наличии основных методов:

console.log(typeof localforage.setItem); // function
console.log(typeof localforage.getItem); // function

Подключение через разные CDN-провайдеры

cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/localforage/dist/localforage.min.js"></script>

unpkg

<script src="https://unpkg.com/localforage/dist/localforage.min.js"></script>

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

Порядок загрузки скриптов

localForage должен подключаться до кода, который его использует. При использовании обычного <script> порядок критически важен:

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

<script>
  localforage.setItem("key", "value");
</script>

Если подключение выполняется после пользовательского кода, возникнет ошибка:

ReferenceError: localforage is not defined

Использование async и defer

При подключении через CDN возможно использование атрибутов async и defer, однако их поведение различается.

defer

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js" defer></script>
<script src="app.js" defer></script>

defer сохраняет порядок выполнения, что делает его безопасным для зависимостей.

async

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js" async></script>

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

Настройка после подключения

После загрузки через CDN библиотека готова к использованию без дополнительной инициализации, однако рекомендуется задать конфигурацию хранилища.

localforage.config({
  name: "MyApp",
  storeName: "keyvalue_pairs",
  description: "Client storage"
});

Основные параметры:

  • name — имя базы данных IndexedDB/WebSQL
  • storeName — имя хранилища внутри базы
  • description — описание (используется некоторыми движками)

Работа в глобальной области видимости

При CDN-подключении localforage становится глобальным объектом, что влияет на архитектуру приложения.

Пример использования:

localforage.setItem("user", { id: 1, name: "Alex" })
  .then(() => localforage.getItem("user"))
  .then(value => console.log(value));

Особенность заключается в отсутствии необходимости импортов:

// импорт не нужен при CDN

Подключение в модульной среде через CDN

Некоторые CDN поддерживают ESM-версию библиотеки:

<script type="module">
  import localforage from "https://cdn.jsdelivr.net/npm/localforage/dist/localforage.esm.js";

  localforage.setItem("key", "value").then(console.log);
</script>

Такой способ позволяет использовать библиотеку в современных приложениях без сборщиков, сохраняя модульную структуру.

Версионирование и контроль стабильности

При подключении через CDN важно фиксировать версию:

https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js

Использование плавающих ссылок:

https://cdn.jsdelivr.net/npm/localforage/dist/localforage.min.js

может привести к неожиданным изменениям поведения при обновлении версии библиотеки.

Фиксация версии обеспечивает:

  • предсказуемость поведения
  • стабильность API
  • отсутствие неожиданных breaking changes

Использование SRI (Subresource Integrity)

Для повышения безопасности возможно добавление проверки целостности:

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"
  integrity="sha512-..."
  crossorigin="anonymous">
</script>

SRI защищает от подмены файла на CDN и гарантирует, что загруженный скрипт соответствует ожидаемому хешу.

Особенности поведения при CDN-подключении

При использовании CDN-версии проявляются следующие особенности:

  • отсутствует tree-shaking
  • загружается полный UMD-бандл
  • библиотека доступна как глобальный объект
  • невозможность локального патчинга через import/export
  • зависимость от доступности CDN-сервера

Совместимость с браузерами

CDN-версия localForage работает во всех браузерах, поддерживающих:

  • IndexedDB
  • WebSQL (fallback)
  • localStorage (fallback)

В старых браузерах используется цепочка деградации хранилищ, встроенная в библиотеку.

Пример полноценной интеграции

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>localForage CDN</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

<script>
  localforage.config({
    name: "DemoApp"
  });

  async function run() {
    await localforage.setItem("theme", "dark");
    const theme = await localforage.getItem("theme");
    console.log(theme);
  }

  run();
</script>

</body>
</html>

Ограничения CDN-подхода

Использование CDN имеет архитектурные ограничения:

  • отсутствие контроля над временем доставки скрипта
  • зависимость от внешнего источника
  • сложность офлайн-режима до первой загрузки
  • невозможность тонкой оптимизации бандла

Эти ограничения особенно заметны в крупных SPA, где предпочтение отдаётся npm-сборке, однако CDN остаётся актуальным для прототипов и простых приложений.

Оглавление