最近接到个奇葩需求，缓存webview，我想着webview不是自带缓存么，奈何手上这个设备由于网络等各种限制问题，导致webview不能直接加载H5中的资源。也就是说原生缓存机制啥的用不了。
思路：
1.H5本身是html文件，可以想办法保存在本地。
2.H5内的图片可以通过Glide来处理。设置WebViewClient，通过shouldInterceptRequest 拦截所有的资源请求，将图片交给Glide。
开搞: 这里有个问题H5本身怎么保存，估计要写很多代码吧，对于我这个懒人来说太麻烦，html本身就是文件，能不能用glide来处理尼。
查资料发现Glide Decode：
142245.png
里面有File，那么是不是完全可以把h5一个链接当作file使用glide加载了。上代码
1.先处理Glide加载图片部分,新建一个专门处理各种资源的工具类
public class GlideUtil {
public static byte[] syncLoad(String url, String type) {
GlideUrl glideUrl = buildUrl(url);
byte[] bt = null;
switch (type) {
case "gif":
FutureTarget<byte[]> targetGif = Glide.with(App.instance)
.as(byte[].class)
.load(glideUrl)
.decode(GifDrawable.class).submit();
try {
bt = targetGif.get();
} catch (ExecutionException e) {
e.printStackTrace();
} catch (InterruptedException e) {
e.printStackTrace();
}
break;
case "img":
FutureTarget<Bitmap> targetImg = Glide.with(App.instance)
.asBitmap().load(glideUrl).submit();
try {
Bitmap bitmap = targetImg.get();
ByteArrayOutputStream baos = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
bt = baos.toByteArray();
} catch (Exception e) {
e.printStackTrace();
}
break;
case "html":
FutureTarget<File> targetHtml = Glide.with(App.instance)
.asFile()
.load(glideUrl)
.submit();
try {
File file = targetHtml.get();
FileInputStream fis = new FileInputStream(file);
//新的 byte 数组输出流，缓冲区容量1024byte
ByteArrayOutputStream bos = new ByteArrayOutputStream(1024);
//缓存
byte[] b = new byte[1024];
int n;
while ((n = fis.read(b)) != -1) {
bos.write(b, 0, n);
}
fis.close();
//改变为byte[]
bt = bos.toByteArray();
//
bos.close();
} catch (Exception e) {
e.printStackTrace();
}
break;
}
return bt;
}
public static GlideUrl buildUrl(String url){
GlideUrl cookie = new GlideUrl(url, new LazyHeaders.Builder()
.addHeader("Cookie", "2")
.build());
return cookie;
}
}
这里为什么要返回byte[],往下看
2.webview 设置 WebViewClient，重写 shouldInterceptRequest
web.webViewClient = object : WebViewClient(){
override fun shouldInterceptRequest(
view: WebView?,
request: WebResourceRequest?
): WebResourceResponse? {
var url = request?.url.toString()
if(url.endsWith(".png") || url.endsWith(".jpg")){
val bytes = GlideUtil.syncLoad(url, "img")
if (bytes != null) {
return WebResourceResponse(
"image/*",
"utf-8",
ByteArrayInputStream(bytes)
)
}
}
if(url.endsWith(".html")){
val bytes = GlideUtil.syncLoad(url, "html")
if (bytes != null) {
return WebResourceResponse(
"text/html",
"utf-8",
ByteArrayInputStream(bytes)
)
}
}
return super.shouldInterceptRequest(view, request)
}
}
测试搞起来
1.第一次联网加载后，去缓存目录查看：
dsdsd.png
这里面应该包含了图片及html源文件吧。
2.杀进程，断网后，再次打开app，完美还原！！！
3.为了验证H5资源是使用了Glide缓存，将上图中的文件拷出，尝试一下重名名
1213123213.png
这些不就是H5所有的东西了嘛。
有的人要说有些H5里有视频，我想只要把视频当作file来处理，同样是可行的吧。待验证.......
附上 Glide 4.+ 设置缓存路径，便于后期维护本地资源
class App :Application() {
companion object{
lateinit var instance:Application
}
override fun onCreate() {
super.onCreate()
instance = this
initGlide()
}
fun initGlide(){
val builder = GlideBuilder()
//设置内存缓存大小为20mb
val memoryCacheSize = 1024 * 1024 * 200 // 200M
//设置内存缓存大小
builder.setMemoryCache(LruResourceCache(memoryCacheSize.toLong()))
//设置硬盘缓存大小为1G
val diskCacheSize = 1024 * 1024 * 1000 // 1G
// builder.setDiskCache(InternalCacheDiskCacheFactory(this, "Glide_Cache", diskCacheSize.toLong()))
builder.setDiskCache(DiskLruCacheFactory(cacheDir.path + "/Glide_Cache_Folder", diskCacheSize.toLong()))
Glide.init(this, builder)
}
}
笔记
通过 oss请求码获取视频第一帧画面
https://xxxxxxxxxx.mp4?x-oss-process=video/snapshot,t_1000,f_jpg,w_750
