Flutter云数据库缓存插件firestore_cache的使用

插件介绍

firestore_cache 是一个用于Flutter应用程序的插件，它允许从Firestore中获取文档时优先读取缓存数据，然后再从服务器获取最新数据。这对于减少网络请求次数、提高应用响应速度非常有用。该插件主要用于那些使用cloud_firestore插件中的DocumentReference.get()和Query.get()方法的应用程序。

插件特性

• 优先读取缓存：在每次查询时，先尝试从本地缓存中读取数据。
• 基于时间戳更新策略：通过比较缓存中的时间戳字段来决定是否需要从服务器拉取新数据。
• 易于集成：与现有的Firestore操作无缝结合。

快速开始

添加依赖

首先，在项目的pubspec.yaml文件中添加firestore_cache作为依赖：

dependencies:
  firestore_cache: ^2.15.3

然后运行 flutter pub get 来安装此插件。

使用示例

创建Firestore文档

确保你在Firestore中创建了一个包含时间戳字段（如updatedAt）的文档。例如：

/status/status
    - updatedAt: Timestamp

编写代码

下面是一个完整的Flutter项目示例，展示了如何使用firestore_cache来获取单个文档以及文档集合，并显示它们是否来自缓存。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firestore_cache/firestore_cache.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Cache Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final _firestore = FirebaseFirestore.instance;
  late Future<DocumentSnapshot<Map<String, dynamic>>> _futureDoc;
  late Future<QuerySnapshot<Map<String, dynamic>>> _futureSnapshot;

  @override
  void initState() {
    super.initState();
    _futureDoc = _getDoc();
    _futureSnapshot = _getDocs();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Firestore Cache Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const Text('Get single document'),
            _buildDoc(),
            const Divider(),
            const Text('Get collection of documents'),
            _buildDocs(),
          ],
        ),
      ),
    );
  }

  Widget _buildDoc() {
    return FutureBuilder<DocumentSnapshot>(
      future: _futureDoc,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('${snapshot.error}');
        } else if (snapshot.hasData) {
          final doc = snapshot.data!;
          final data = doc.data() as Map?;

          return Text(
            '${data!['userId']} isFromCache: ${doc.metadata.isFromCache}',
          );
        }

        return const CircularProgressIndicator();
      },
    );
  }

  Widget _buildDocs() {
    return FutureBuilder<QuerySnapshot>(
      future: _futureSnapshot,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('${snapshot.error}');
        } else if (snapshot.hasData) {
          final docs = snapshot.data?.docs;
          return Expanded(
            child: ListView(
              children: docs!.map((DocumentSnapshot doc) {
                final data = doc.data() as Map?;
                return Text(
                  '${data!['postId']} isFromCache: ${doc.metadata.isFromCache}',
                  textAlign: TextAlign.center,
                );
              }).toList(),
            ),
          );
        }

        return const CircularProgressIndicator();
      },
    );
  }

  Future<DocumentSnapshot<Map<String, dynamic>>> _getDoc() async {
    final docRef = _firestore.doc('users/user');
    final doc = await FirestoreCache.getDocument(docRef);

    return doc;
  }

  Future<QuerySnapshot<Map<String, dynamic>>> _getDocs() async {
    const cacheField = 'updatedAt';
    final cacheDocRef = _firestore.doc('status/status');
    final query = _firestore.collection('posts');
    final snapshot = await FirestoreCache.getDocuments(
      query: query,
      cacheDocRef: cacheDocRef,
      firestoreCacheField: cacheField,
    );

    return snapshot;
  }
}

在这个例子中：

• _getDoc() 方法用来获取单个用户文档，并检查它是从缓存还是从服务器获取。
• _getDocs() 方法用来获取帖子列表，并同样地检查每个文档是否来自缓存。

请注意，为了使缓存机制生效，你需要确保Firestore中的每个相关文档都有一个时间戳字段（例如updatedAt），并且在更新这些文档时正确设置这个字段。

希望以上信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。