如何将Firebase存储项存储到本地缓存以节省带宽成本?

Question

我注册了一个使用Flutter和Firebase的项目，我在带宽限制方面遇到了麻烦。免费配额是每天1gb，我有一个包含100个图像(和一些文件)的列表。

是否有一种方法可以通过在本地电话缓存中缓存此文件来最小化带宽成本，而不必每次打开屏幕时都从DB获取项目?

是否有一个包或类似的东西来做这个?

Answer 1

我认为使用缓存的网络图像可以很容易地做到这一点

如果你想要更多的控制，我创建了一个简单的函数来做这个工作，你可以根据你的需要进一步定制它:

import 'dart:typed_data';
import 'dart:io';
import 'package:http/http.dart' show get;
Future<File> getCachedImageFile(final String imageId) async {
final Directory temp = await getTemporaryDirectory();
final String fullPathName = '${temp.path}/images/$imageId';
final File imageFile = File(fullPathName);
if (imageId == null) return null;
if (await imageFile.exists() == false) { // will guarantee that you don't make the API request (or just get image from url if unprotected)
final String endpoint = 'http://www.mywebsiteorRESTapi.com/'
String imgUrl = endpoint + imageId + '.png';
var response = await get(imgUrl);
try {
await imageFile.create(recursive: true);
if (response.bodyBytes != null)
await imageFile.writeAsBytes(response.bodyBytes);
return imageFile;
} on Exception catch (exception) {
throw 'could not write image $exception';
}
}
return imageFile;
}

在你的FutureBuilder:

future: getCachedImageFile('1VsSbB4Kh7Ab7spjQBA');
...
return Image.file(snapshot.data)

Answer 2

您可以使用CachedNetworkImage包来避免每次都下载映像。它使用起来很简单，您只需要将URL传递给Widget:

CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),

要控制图像缓存的时间*，请确保在上传图像时添加缓存头，以便它们被正确缓存(如果使用flutter web，在浏览器中也是如此):

final contentType = 'image/*'; 
final cacheControl = 'public, max-age=31556926'; // seconds -- ie 31556926 == one year
final uploadTask = reference.putData(
image.data,
SettableMetadata(
cacheControl: cacheControl,
contentType: contentType,
));

所以当你上传图片的时候一定要存储图片的URL并把URL传递给用户去获取图片而不是直接从FirebaseStorage下载图片如果你那样做的话

*如果没有可用的缓存头，我相信包的默认值是7天，但我不能确认。