Flutter Web应用清理缓存

前言

应用清理缓存是一个常见的功能，在移动端清理缓存这个行为比较常见，但是游览器web应用清理缓存并不常见，很多人都不会特地去清理，与之相关的，flutter的web应用清理缓存的资料网上比较少，本文进行一些探讨

正文

要清理缓存，首先要知道缓存是如何产生的，然后再针对这个产生方式做缓存清理

LocalStorage

LocalStorage是Web存储API的一部分，允许网站在用户的浏览器中存储键值对数据，每个键和值都是字符串类型

LocalStorage的数据存储在用户的设备上，不会随着浏览会话结束而被清除

• 大多数浏览器为LocalStorage设置了约5MB的容量限制
• LocalStorage的操作是同步的，这意味着大量数据操作可能会阻塞主线程

同时实际上，flutter的SharedPreferences在web端就是由此实现

清理方式如下

import 'dart:html' as html;

void clearLocalStorage() {
  html.window.localStorage.clear();
}

IndexedDB

IndexedDB是一个复杂、强大的客户端存储解决方案，支持在用户浏览器中存储大量结构化数据，允许创建、读取、导航和写入数据库的对象存储，支持事务、索引、游标等数据库概念

• 相比LocalStorage，IndexedDB提供了更大的存储空间。
• IndexedDB的操作都是异步的，不会阻塞用户界面
• 可以存储诸如文件、Blob、ArrayBuffer等复杂数据类型

清理方式

import 'dart:indexed_db' as idb;
import 'dart:html' as html;

Future<void> deleteIndexedDB(String dbName) async {
  try {
    await html.window.indexedDB!.deleteDatabase(dbName);
  } catch (e) {

  }
}

Service Worker

Service Worker是一种在浏览器背后运行的脚本，可以用来拦截和处理网络请求，允许控制页面的缓存，并在没有网络连接时提供内容

• Service Worker有自己的生命周期，独立于Web页面
• 支持在后台同步数据，即使用户已经关闭了页面
• 可以接收来自服务器的推送通知，即使Web应用没有打开

需要根据具体的代码制定具体清理策略，给其发送消息执行清理逻辑