Supabase-js 在 Ionic Capacitor iOS 应用中的存储持久化问题解析

问题背景

在 Ionic Capacitor 构建的 iOS 应用中，开发者经常遇到一个棘手的问题：使用 Supabase-js 进行身份验证时，存储在 localStorage 中的令牌会每隔一天被系统自动清除。这种现象在 iOS 14 及以上版本中尤为常见，导致用户需要频繁重新登录，严重影响用户体验。

技术原理分析

iOS 系统对 WebView 中的 localStorage 有特殊的管理机制。当应用进入后台一段时间后，系统可能会为节省资源而清理 WebView 的存储数据。这不是 Supabase 特有的问题，而是 iOS WKWebView 的标准行为。

Supabase-js 默认使用浏览器的 localStorage 来保存身份验证令牌。在纯 Web 环境中这是可行的，但在混合应用（如 Ionic Capacitor）中，这种存储方式缺乏持久性保障。

解决方案探索

1. 使用 Capacitor 的本地存储插件

Ionic 提供了更可靠的本地存储方案，如 @capacitor/storage 或 @ionic/storage。这些插件会将数据存储在更持久的位置，不受 iOS 清理机制影响。

实现方式是为 Supabase 提供自定义存储适配器：

import { Storage } from '@capacitor/storage';

const customStorage = {
  getItem: async (key: string) => {
    const { value } = await Storage.get({ key });
    return value;
  },
  setItem: async (key: string, value: string) => {
    await Storage.set({ key, value });
  },
  removeItem: async (key: string) => {
    await Storage.remove({ key });
  }
};

const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    storage: customStorage
  }
});

2. 使用 IndexedDB 作为替代方案

对于需要支持 SSR（服务器端渲染）的场景，可以考虑使用 IndexedDB：

const customStorage = {
  getItem: async (key: string) => {
    return new Promise((resolve) => {
      const request = indexedDB.open('supabaseAuthStore');
      request.onsuccess = (event) => {
        const db = (event.target as IDBOpenDBRequest).result;
        const transaction = db.transaction('auth', 'readonly');
        const store = transaction.objectStore('auth');
        const getRequest = store.get(key);
        getRequest.onsuccess = () => resolve(getRequest.result?.value || null);
      };
    });
  },
  setItem: async (key: string, value: string) => {
    return new Promise((resolve) => {
      const request = indexedDB.open('supabaseAuthStore');
      request.onsuccess = (event) => {
        const db = (event.target as IDBOpenDBRequest).result;
        const transaction = db.transaction('auth', 'readwrite');
        const store = transaction.objectStore('auth');
        store.put({ key, value });
        transaction.oncomplete = () => resolve();
      };
    });
  },
  removeItem: async (key: string) => {
    return new Promise((resolve) => {
      const request = indexedDB.open('supabaseAuthStore');
      request.onsuccess = (event) => {
        const db = (event.target as IDBOpenDBRequest).result;
        const transaction = db.transaction('auth', 'readwrite');
        const store = transaction.objectStore('auth');
        store.delete(key);
        transaction.oncomplete = () => resolve();
      };
    });
  }
};

3. 使用原生键值存储

对于更复杂的场景，可以考虑使用原生键值存储方案：

import { Preferences } from '@capacitor/preferences';

const nativeStorage = {
  getItem: async (key: string) => {
    const { value } = await Preferences.get({ key });
    return value;
  },
  setItem: async (key: string, value: string) => {
    await Preferences.set({ key, value });
  },
  removeItem: async (key: string) => {
    await Preferences.remove({ key });
  }
};

最佳实践建议

1. 生产环境必须使用持久化存储：在 Ionic Capacitor 应用中，永远不要依赖默认的 localStorage 来保存关键身份验证信息。

2. 考虑用户隐私：敏感数据应加密存储，特别是当使用原生存储方案时。

3. 实现自动恢复机制：即使使用持久化存储，也应设计当令牌失效时的自动恢复流程。

4. 测试不同场景：特别测试应用长时间处于后台后的恢复情况，以及系统更新后的数据持久性。

5. 多平台兼容：虽然 iOS 问题更突出，但建议在 Android 平台也采用相同的持久化方案以保证一致性。

总结

Supabase-js 在混合应用中的存储问题本质上是平台特性与 Web 存储机制的不匹配。通过实现自定义存储适配器，开发者可以绕过 iOS 的系统限制，为用户提供稳定持久的身份验证体验。选择哪种方案取决于具体的技术栈和需求，但关键是要避免依赖浏览器默认的 localStorage 实现。