Web Support

[connectety]

Please add support for Flutter web.
If saving infos needs be done, maybe the localStorage in webbrowsers can help.

[renefloor]

The problem is not storing the files, but that it uses sqflite to store the cache info and that doesn't support Flutter Web yet: tekartik/sqflite#212

I'll look into this whether a switch to Moor or Hive https://github.com/renefloor/flutter_cache_manager/issues/121 is a good move. We'll have to migrate all the data, so I really have to study all the pros and cons before making a decision.

[connectety]

I looked into it a little bit more.
if I understand everything correctly and did not forget any type of storage,
localStorage has a maximum of 10 MB per origin and
cookies have a maximum of 4 KB per domain and
indexDB can get quite big but is not persistent.

In my opinion this is not enough space to cache files.
But webbrowser cache files themselves quite good.

As a workaround I would propose, not caching files for web, but giving a warning and / or exception, which has to be dismissed.

[renefloor]

@connectety I'm not completely sure what you propose. Do you mean that if the platform is Web the library just uses NetworkImage instead of CachedImage? Devs will expect it to work differently.

[connectety]

use NetworkImage instead of CachedImage

Yes, for example.

Devs will expect it to work differently.

I know, and this is not the best idea I have ever had.
I do not stand behind it completely, but I don't see any way to save content and a database, because the storage provided by web browsers is just too small.

Hopefully, I have forgotten some kind of storage.

And also I want to use this as a Hotfix, which can only be used after dismissing an exception or setting a flag or something. So that people will understand that it does not work as expected.
This idea should still somewhat work because there is already pretty good caching in the web and browsers.

Even if this objectively bad solution gets dismissed, I wanted to point out the Problem.

[alextekartik]

I started a fork (https://github.com/alextekartik/flutter_cache_manager and https://github.com/alextekartik/flutter_cached_network_image) where I experimented caching for the web by abstracting the file system (using fs_shim) and the storage (using idb_shim). It is definitely not perfect and a better solution could be found but I think having a way to abstract the database and file system into flutter_cache_manager could allow anyone to use their preferred storage (hive, moor, sqlite, indexed db....)

But with CORS and web browser already doing some caching, the web is a different experience that could require a specific and different network caching mechanism

[IchordeDionysos]

Why not use service workers for caching? 🤔

This is what the web does really good out of the box. (In newer browser versions :D)
Also with the Cache API, you can save the most files with at least 50MB storage.

This might need some refactoring of this package to use sqflite for mobile and service workers for web (maybe using the plugin_platform_interface)

Useful links:
https://developer.mozilla.org/en-US/docs/Web/API/Cache

[deakjahn]

Until the support arrives, could it be made to fail silently? :-) Right now

await DefaultCacheManager().emptyCache();

never returns for me in a web app. Yes, it's easy to wrap it into an if (!kIsWeb), just saying...

[renefloor]

It doesn't cache on disk at the moment, but as @deakjahn asked it at least doesn't fail. It nicely returns the file which is just downloaded from the internet.

@IchordeDionysos I'm looking at the caching options for web. Thanks for the url

[deakjahn]

Actually, I store my files with the Cache API (not necessarily these ones but generally). Do you need some code so that you don't need to look it up yourself? Fairly straightforward.

[renefloor]

Yes it is always good to see some code, but it looks really straight forward indeed.

The main challenge I think at the moment is adapting the cache manager to separate the current storage from the web api.

[deakjahn]

I have an app-embedded platform plugin that simply offers a file storage interface for my app and gets translated to either plain old dart.io or Cache API, depending on the platform. It's tailored to my specific needs, so it's not perfect for immediate re-use without some tweaking. Basically, whenever the normal file IO speaks about folders, I use separate cache files on the web and treat a path like "foo/bar" as an item stored with the name "bar" inside a cache file named "foo". Nothing more nested than this, this was enough for my purposes.

So, the interface itself is this:

Future<bool> fileSave(String path, Uint8List contents, {String mime, bool flush = false});
Future<bool> fileSaveString(String path, String contents, {String mime, bool flush = false});
Future<Uint8List> fileRead(String path, {String mime});
Future<String> fileReadString(String path, {String mime});
Future<bool> fileExists(String path);
Future<int> fileSize(String path);
Future<bool> fileDelete(String path);
Future<bool> fileCopy(String src, String dest);
Future<bool> folderCreate(String path, {bool recursive = false});
Future<bool> folderDelete(String path, {bool recursive = false});
Future<bool> folderEmpty(String path);
Future<bool> folderExists(String path);
Future<List<String>> folderList(String path);

Not that you would need all of them, especially not the ones that store a string (basically, a text file).

[deakjahn]

The implementation is relatively simple:

import 'dart:html' as html;
import 'dart:js';
import 'dart:js_util' as util;

const String _BINARY = 'application/octet-stream';
const String _TEXT = 'text/plain';

Future<bool> fileSave<T>(String path, T contents, String mime) async {
  final parts = path.splitFirst('/');
  return util.promiseToFuture<bool>(_nativeCacheSave(parts.first, parts.last, contents, mime));
}

Future<T> fileRead<T>(String path, String mime) async {
  final parts = path.splitFirst('/');
  if (mime == _BINARY) {
    final buffer = await util.promiseToFuture<ByteBuffer>(await _nativeCacheRead(parts.first, parts.last));
    return buffer.asUint8List() as T;
  } else if (mime == _TEXT)
    return await util.promiseToFuture<String>(_nativeCacheReadString(parts.first, parts.last)) as T;
  else
    throw UnsupportedError(mime);
}

Future<bool> fileExists(String path) async {
  final parts = path.splitFirst('/');
  return util.promiseToFuture<bool>(_nativeCacheExists(parts.first, parts.last));
}

Future<int> fileSize(String path) {
  final parts = path.splitFirst('/');
  return util.promiseToFuture<int>(_nativeCacheSize(parts.first, parts.last));
}

Future<bool> fileDelete(String path) async {
  final parts = path.splitFirst('/');
  return util.promiseToFuture<bool>(_nativeCacheDelete(parts.first, parts.last));
}

Future<bool> fileCopy(String src, String dest) async {
  final parts1 = src.splitFirst('/');
  final parts2 = dest.splitFirst('/');
  return util.promiseToFuture<bool>(_nativeCacheCopy(parts1.first, parts1.last, parts2.first, parts2.last));
}

Future<bool> folderCreate(String path) async {
  final parts = path.splitFirst('/');
  await html.window.caches.open(parts.first);
  return true;
}

Future<bool> folderDelete(String path) async {
  final parts = path.splitFirst('/');
  return await html.window.caches.delete(parts.first);
}

Future<bool> folderEmpty(String path) async {
  await folderDelete(path);
  await folderCreate(path);
  return true;
}

Future<bool> folderExists(String path) async {
  final parts = path.splitFirst('/');
  return await html.window.caches.has(parts.first);
}

Future<List<String>> folderList(String path) async {
  final files = await util.promiseToFuture<List<dynamic>>(_nativeCacheList(path));
  return files.map((f) => f.toString()).toList();
}

with a simple helper:

extension Splits on String {
  List<String> splitFirst(Pattern pattern) {
    final parts = split(pattern);
    return [
      if (parts.isNotEmpty) parts.first,
      if (parts.length > 1) parts.sublist(1).join(pattern),
    ];
  }
}

[deakjahn]

The native (JavaScript, that is) implementations are:

@JS('cacheSave')
external bool _nativeCacheSave(String name, String path, dynamic contents, String mime);

@JS('cacheRead')
external JsObject _nativeCacheRead(String name, String path);

@JS('cacheReadString')
external String _nativeCacheReadString(String name, String path);

@JS('cacheCopy')
external bool _nativeCacheCopy(String name1, String src, String name2, String dest);

@JS('cacheExists')
external bool _nativeCacheExists(String name, String path);

@JS('cacheSize')
external int _nativeCacheSize(String name, String path);

@JS('cacheDelete')
external bool _nativeCacheDelete(String name, String path);

@JS('cacheList')
external JsArray _nativeCacheList(String name);

cacheSave: async function(name, path, contents, mime) {
  var cache = await window.caches.open(name);
  var blob = new Blob([contents], {type : mime});
  var options = {headers: {'Content-Type': mime, 'Content-Length': contents.length}};
  await cache.put(path, new Response(blob, options));
  return true;
},

cacheRead: async function(name, path) {
  var cache = await window.caches.open(name);
  var options = {ignoreSearch: true, ignoreMethod: true, ignoreVary: true};
  var data = await cache.match(path, options);
  return data.arrayBuffer();
},

cacheReadString: async function(name, path) {
  var cache = await window.caches.open(name);
  var options = {ignoreSearch: true, ignoreMethod: true, ignoreVary: true};
  var data = await cache.match(path, options);
  return data.text();
},

cacheCopy: async function(name1, src, name2, dest) {
  var cache1 = await window.caches.open(name1);
  var options = {ignoreSearch: true, ignoreMethod: true, ignoreVary: true};
  var data = await cache1.match(src, options);
  var cache2 = await window.caches.open(name2);
  await cache2.put(dest, data);
  return true;
},

cacheSize: async function(name, path) {
  var cache = await window.caches.open(name);
  var options = {ignoreSearch: true, ignoreMethod: true, ignoreVary: true};
  var data = await cache.match(path, options);
  return parseInt(data.headers.get('Content-Length'));
},

cacheExists: async function(name, path) {
  var cache = await window.caches.open(name);
  return await cache.match(path) != undefined;
},

cacheDelete: async function(name, path) {
  var cache = await window.caches.open(name);
  return await cache.delete(path);
},

cacheList: async function(name) {
  var cache = await window.caches.open(name);
  var files = await cache.keys();
  return files.map(f => new URL(f.url).pathname);
},

But this supposes that you already have a JS file that you can put them into. If you don't, I can also show you how I normally attach one (very much like some of my plugins, eg. https://github.com/deakjahn/flutter_dropzone, but you don't need the added complexity of a platform view, of course). Basically, the few lines starting from here, called from whatever initialization function you have handy.