Как кэшировать файлы и изображения в приложениях на CapacitorJS с использованием плагина capacitor-cache-file

В современных мобильных приложениях часто возникает необходимость обеспечить доступность определённого контента в офлайн-режиме. Наиболее распространённым случаем является кеширование изображений, чтобы пользователи могли просматривать их даже без подключения к интернету. В этой статье мы рассмотрим, как использовать плагин capacitor-cache-file для кеширования файлов в приложениях на CapacitorJS, а также покажем, как интегрировать его в проект на ReactJS с помощью пользовательского хука.

Что такое capacitor-cache-file?

capacitor-cache-file — это плагин для Capacitor, который позволяет кешировать файлы любого типа. Он проверяет, есть ли файл уже в кеше, и возвращает его, если доступен; в противном случае, он загружает файл, сохраняет его в кеше и возвращает путь к сохранённому файлу. Плагин также предотвращает дублирование при повторных запросах одного и того же URL.

Установка

Для установки плагина выполните следующие команды:

npm install capacitor-cache-file
npx cap sync

API плагина

checkCache(...)

Проверяет, есть ли файл в кеше.

checkCache(options: { url: string; }) => Promise<{ base64: string | null; }>

• Параметры:
  • options: объект с полем url — URL файла для проверки в кеше.
• Возвращает: Promise, который разрешается в объект { base64: string | null; }.

downloadAndCache(...)

Загружает файл и сохраняет его в кеше.

downloadAndCache(options: { url: string; }) => Promise<{ base64: string; }>

• Параметры:
  • options: объект с полем url — URL файла для загрузки и кеширования.
• Возвращает: Promise, который разрешается в объект { base64: string; }.

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

Для удобства использования плагина в приложении на ReactJS можно создать пользовательский хук useCache. Этот хук будет обрабатывать логику проверки кеша и загрузки файлов.

Создание хука useCache

import { useEffect, useState } from "react";
import { cacheFile } from "capacitor-cache-file";

const useCache = (url: string, noCache?: boolean) => {
  const [cachedUrl, setCachedUrl] = useState<string | null>(null);

  useEffect(() => {
    if (noCache) {
      setCachedUrl(url);
      return;
    }
    if (!!url) {
      const fetchCache = async () => {
        const cacheCheck = await cacheFile.checkCache({ url });
        console.log("cacheCheck", cacheCheck);
        if (cacheCheck.base64) {
          setCachedUrl(cacheCheck.base64);
        } else {
          const cachedFile = await cacheFile.downloadAndCache({ url });
          setCachedUrl(cachedFile.base64);
        }
      };

      fetchCache();
    }
  }, [url]);

  return cachedUrl;
};

export { useCache };

В этом хуке мы:

• Используем useState для хранения кешированного URL.
• Используем useEffect для отслеживания изменений в исходном URL.
• Проверяем, есть ли файл в кеше с помощью checkCache.
• Если файла нет, загружаем и кешируем его с помощью downloadAndCache.
• Обновляем состояние cachedUrl после получения данных.

Как использовать хук useCache

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

import React from "react";
import { useCache } from "./useCache";

const CachedImage = ({ src, alt }) => {
  const cachedSrc = useCache(src);

  return <img src={cachedSrc || src} alt={alt} />;
};

export default CachedImage;

В этом примере:

• Компонент CachedImage принимает пропсы src и alt.
• Использует хук useCache для получения кешированного URL изображения.
• Отображает изображение с использованием кешированного URL или оригинального, если кеш недоступен.

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

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

CapacitorJS CapacitorJS кэширование файлов offline-доступ Capacitor плагин кэширование изображений