android H5本地缓存加载优化的实战

2020年最后一周,正准备摸摸鱼回家过年,须不知“惊天阴谋”已在领导层酝酿。竖日,组长带着诡异的微笑向我走来:

组长: “快过年了,你回家路途遥远,要不要请两天假?”

我: “组长,你真是我的知己,想我所想,思我所思,你这么一说我就不客气了,那我就请两天”

组长:“行,请假肯定没问题,我一向很照顾兄弟们!!”(那一刻,一股暖流心中而过,早已将这一年他对我的“压榨”抛之脑后)

“不过我还有个事跟你说下,回家前有个需求你得完成”

我:“what??? ,,,, TMD......”

组长:“需求是这样的:最近客户反应HTML加载有点慢,需要优化下,最好能做到秒开,,,,加油,我相信你”。

我:“不是这H5,加载慢那你前端的原因呀,你找我。。。我。。。”(组长已经远去)

带着沉重的心情开始研究优化,开始在webView 层做文章,开启缓存,预加载,一顿操作效果微乎其微。

然后开始打前端文件的注意,一般本地Html文件加载速度比通过Url的加载速度会快很多。于是去找前端要了一个本地文件放到项目里进行本地加载。果不其然,速度嗖嗖的,此时,尴尬的事情发生了,前端功能经常更新,如果放到项目里岂不是H5更新,我就得升级版本。且不说我得累死,估计这方案提到组长那,他得提刀来见了。 于是另辟蹊径,将通过接口下载HTMl文件,存在到手机本地,这样webView去加载手机本地文件即可。一弧诡异的微笑在脸上散开。

动手: 1.偷了懒,用 filedownloader 去下载了Html压缩文件

  implementation 'com.liulishuo.filedownloader:library:1.7.7'

封装下载工具类:

public class FileDownloadUtils {
public static FileDownloadUtils instance = null;

public FileDownloadUtils() {
}

public static FileDownloadUtils getInstance() {
  if (null == instance) {
    instance = new FileDownloadUtils();
  }
  return instance;
}

/**
 * 单任务下载
 *
 * @param downLoadUri 文件下载网络地址
 * @param destinationUri 下载文件的存储绝对路径
 */
public void startDownLoadFileSingle(String downLoadUri, String destinationUri,FileDownLoaderCallBack callBack) {

  FileDownloader.getImpl().create(downLoadUri).setPath(destinationUri).setListener(fileDownloadListener(callBack)).start();
}

// 下载方法
private FileDownloadListener fileDownloadListener(final FileDownLoaderCallBack callBack) {
  return new FileDownloadListener() {
    @Override
    protected void pending(BaseDownloadTask task, int soFarBytes, int totalBytes) {
      //等待,已经进入下载队列
    }

    @Override
    protected void progress(BaseDownloadTask task, int soFarBytes, int totalBytes) {
      //下载进度回调
      if (callBack != null){
        callBack.downLoadProgress(task,soFarBytes,totalBytes);
      }

    }

    @Override
    protected void completed(BaseDownloadTask task) {
      //完成整个下载过程
      if (callBack != null){
        callBack.downLoadCompleted(task);
      }
    }

    @Override
    protected void paused(BaseDownloadTask task, int soFarBytes, int totalBytes) {
      //暂停下载
    }

    @Override
    protected void error(BaseDownloadTask task, Throwable e) {
      //下载出现错误
      if (callBack != null){
        callBack.downLoadError(task,e);
      }
    }

    @Override
    protected void warn(BaseDownloadTask task) {
      //在下载队列中(正在等待/正在下载)已经存在相同下载连接与相同存储路径的任务
    }
  };
}

  public interface FileDownLoaderCallBack {
  //文件是否下载完成
  void downLoadCompleted(BaseDownloadTask task);

  //文件是否下载失败
  void downLoadError(BaseDownloadTask task, Throwable e);

  //文件下载进度
  void downLoadProgress(BaseDownloadTask task, int soFarBytes, int totalBytes);
 }
}

解压Zip文件

public class ZipUtils {
  public static final String TAG = "ZIP";

  public ZipUtils() {

   }

/**
 * 解压zip到指定的路径
 *
 * @param zipFileString ZIP的名称
 * @param outPathString 要解压缩路径
 * @throws Exception
 */
public static void UnZipFolder(String zipFileString, String outPathString) throws Exception {
  ZipInputStream inZip = new ZipInputStream(new FileInputStream(zipFileString));
  ZipEntry zipEntry;
  String szName = "";
  while ((zipEntry = inZip.getNextEntry()) != null) {
    szName = zipEntry.getName();
    if (zipEntry.isDirectory()) {

      szName = szName.substring(0, szName.length() - 1);
      File folder = new File(outPathString + File.separator + szName);
      folder.mkdirs();
    } else {
      Log.e(TAG, outPathString + File.separator + szName);
      File file = new File(outPathString + File.separator + szName);
      if (!file.exists()) {
        Log.e(TAG, "Create the file:" + outPathString + File.separator + szName);
        file.getParentFile().mkdirs();
        file.createNewFile();
      }
      // 获取文件的输出流
      FileOutputStream out = new FileOutputStream(file);
      int len;
      byte[] buffer = new byte[1024];
      // 读取(字节)字节到缓冲区
      while ((len = inZip.read(buffer)) != -1) {
        // 从缓冲区(0)位置写入(字节)字节
        out.write(buffer, 0, len);
        out.flush();
      }
      out.close();
    }
  }
  inZip.close();
}

public static void UnZipFolder(String zipFileString, String outPathString, String szName) throws Exception {
  ZipInputStream inZip = new ZipInputStream(new FileInputStream(zipFileString));
  ZipEntry zipEntry;
  while ((zipEntry = inZip.getNextEntry()) != null) {
    //szName = zipEntry.getName();
    if (zipEntry.isDirectory()) {
      //获取部件的文件夹名
      szName = szName.substring(0, szName.length() - 1);
      File folder = new File(outPathString + File.separator + szName);
      folder.mkdirs();
    } else {
      Log.e(TAG, outPathString + File.separator + szName);
      File file = new File(outPathString + File.separator + szName);
      if (!file.exists()) {
        Log.e(TAG, "Create the file:" + outPathString + File.separator + szName);
        file.getParentFile().mkdirs();
        file.createNewFile();
      }
      // 获取文件的输出流
      FileOutputStream out = new FileOutputStream(file);
      int len;
      byte[] buffer = new byte[1024];
      // 读取(字节)字节到缓冲区
      while ((len = inZip.read(buffer)) != -1) {
        // 从缓冲区(0)位置写入(字节)字节
        out.write(buffer, 0, len);
        out.flush();
      }
      out.close();
    }
  }
  inZip.close();
}

/**
 * 压缩文件和文件夹
 *
 * @param srcFileString 要压缩的文件或文件夹
 * @param zipFileString 解压完成的Zip路径
 * @throws Exception
 */
public static void ZipFolder(String srcFileString, String zipFileString) throws Exception {
  //创建ZIP
  ZipOutputStream outZip = new ZipOutputStream(new FileOutputStream(zipFileString));
  //创建文件
  File file = new File(srcFileString);
  //压缩
 // LogUtils.LOGE("---->"+file.getParent()+"==="+file.getAbsolutePath());
  ZipFiles(file.getParent()+ File.separator, file.getName(), outZip);
  //完成和关闭
  outZip.finish();
  outZip.close();
}

/**
 * 压缩文件
 *
 * @param folderString
 * @param fileString
 * @param zipOutputSteam
 * @throws Exception
 */
private static void ZipFiles(String folderString, String fileString, ZipOutputStream zipOutputSteam) throws Exception {
  // LogUtils.LOGE("folderString:" + folderString + "\n" +"fileString:" + fileString + "\n==========================");
  if (zipOutputSteam == null)
    return;
  File file = new File(folderString + fileString);
  if (file.isFile()) {
    ZipEntry zipEntry = new ZipEntry(fileString);
    FileInputStream inputStream = new FileInputStream(file);
    zipOutputSteam.putNextEntry(zipEntry);
    int len;
    byte[] buffer = new byte[4096];
    while ((len = inputStream.read(buffer)) != -1) {
      zipOutputSteam.write(buffer, 0, len);
    }
    zipOutputSteam.closeEntry();
  } else {
    //文件夹
    String fileList[] = file.list();
    //没有子文件和压缩
    if (fileList.length <= 0) {
      ZipEntry zipEntry = new ZipEntry(fileString + File.separator);
      zipOutputSteam.putNextEntry(zipEntry);
      zipOutputSteam.closeEntry();
    }
    //子文件和递归
    for (int i = 0; i < fileList.length; i++) {
      ZipFiles(folderString+fileString+"/", fileList[i], zipOutputSteam);
    }
  }
}

/**
 * 返回zip的文件输入流
 *
 * @param zipFileString zip的名称
 * @param fileString  ZIP的文件名
 * @return InputStream
 * @throws Exception
 */
public static InputStream UpZip(String zipFileString, String fileString) throws Exception {
  ZipFile zipFile = new ZipFile(zipFileString);
  ZipEntry zipEntry = zipFile.getEntry(fileString);
  return zipFile.getInputStream(zipEntry);
}

/**
 * 返回ZIP中的文件列表(文件和文件夹)
 *
 * @param zipFileString ZIP的名称
 * @param bContainFolder 是否包含文件夹
 * @param bContainFile  是否包含文件
 * @return
 * @throws Exception
 */
public static List<File> GetFileList(String zipFileString, boolean bContainFolder, boolean bContainFile) throws Exception {
  List<File> fileList = new ArrayList<File>();
  ZipInputStream inZip = new ZipInputStream(new FileInputStream(zipFileString));
  ZipEntry zipEntry;
  String szName = "";
  while ((zipEntry = inZip.getNextEntry()) != null) {
    szName = zipEntry.getName();
    if (zipEntry.isDirectory()) {
      // 获取部件的文件夹名
      szName = szName.substring(0, szName.length() - 1);
      File folder = new File(szName);
      if (bContainFolder) {
        fileList.add(folder);
      }
    } else {
      File file = new File(szName);
      if (bContainFile) {
        fileList.add(file);
      }
    }
  }
  inZip.close();
  return fileList;
}
}

下载:

    File file = new File(Constants.saveH5FilePath);
    if (file.exists()) {
      file.delete();
    }
    //开始下载ZIP压缩包
    FileDownloadUtils.getInstance().startDownLoadFileSingle(bean.getUrl(), Constants.saveH5FilePath,
        new FileDownloadUtils.FileDownLoaderCallBack() {
          @Override
          public void downLoadCompleted(BaseDownloadTask task) {
            try {
              //解压ZIP压缩包
              ZipUtils.UnZipFolder(Constants.saveH5FilePath, Constants.unH5ZipPath);
              PreferencesUtil.getInstance().saveParam("H5VersionName", H5VersionName);

            } catch (Exception e) {
              e.printStackTrace();
            }

          }

          @Override
          public void downLoadError(BaseDownloadTask task, Throwable e) {
          }

          @Override
          public void downLoadProgress(BaseDownloadTask task, int soFarBytes, int totalBytes) {
          }
        });

webView 加载:

 mWebSe.loadUrl("file:"+ Constants.unH5ZipPath+"/index.html");

此时,心如止水 ,,回家,搜噶。。。。

以上就是android H5本地缓存加载优化的实战的详细内容,更多关于android H5本地缓存加载优化的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android WebView 不支持 H5 input type="file" 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 input type="file" 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webview 由于考虑安全原因屏蔽了 input type="file" 这个功能 . 经过不懈的努力,以及google 翻译的帮助 在 stackoverflow 中找到了解决的方法. 具体可以理解为 重写webview 的WebChrome

  • 解决Android软键盘弹出覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

  • Android中webView加载H5绑定cookie实例

    简介: 我最近在做项目的时候遇到了这种情况: 1.需要用WebView实现一个H5的登陆注册. 2.大赛报名,用H5实现.这些情况下,我需要把cookie传给服务器,让其判断当前账户是否登陆成功.查阅了一些资料后,终于搞定了. 1. 给一个加载的链接设置cookie private void syncCookie(String url) { try { CookieSyncManager.createInstance(mWvSignUp.getContext());//创建一个cookie管理器

  • Android仿微信加载H5页面进度条

    前言 Android中WebView打卡前端页面时受到网路环境,页面内容大小的影响有时候会让用户等待很久.显示一个加载进度条可以提升很大的体验.微信内访问H5页面加载效果不错,效仿着写了一个. 1.实现 1-1.自定义类继承WebView类 class ProgressWebView(context: Context, attr: AttributeSet) : WebView(context, attr) { /** *xml布局中使用,所以用两个构造参数的构造函数 */ private va

  • android调用H5显示加载中效果的示例代码

    我们在看有些应用在引入h5的时候经常会有一个进度条在转,显示加载的意思,那么这个东西其实一般是我们android端做的事(不要把所有的事都推给h5~~~),其实实现起来很简单, ok 废话不多说,上代码吧 wv.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view,

  • Android与H5互调详细介绍

    Android与H5互调详细介绍 微信,微博,微商,QQ空间,大量的软件使用内嵌了H5,这个时候就需要了解Android如何更H5交互的了:有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在iOS上直接复用页面,最终解决成本. 为什么学android也要学h5? Android很多软件都有内嵌H5的,有什么用处.优势?节约成本,提高开发效率. 实现的原理是什么? 本质是:Java代码和JavaScript调用 案例一:Java与Js简单互调 首先,在Android代码中加载H

  • WebView的介绍与简单实现Android和H5互调的方法

    为什么要学习Android与H5互调? 微信,QQ空间等大量软件都内嵌了H5,不得不说是一种趋势.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发. 优势:使用H5实现的功能能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,节约了成本,提高了开发效率. 原理:其实就是Java代码和JavaScript之间的调用. 开局插入一张文章的目录结构: WebView简介 要

  • android 关于webview 加载h5网页开启定位的方法

    如下所示: //webview定位相关设置 settings.setDomStorageEnabled(true); settings.setGeolocationEnabled(true); //settings.setGeolocationDatabasePath(getFilesDir().getPath()); progressWebView.setWebChromeClient(new WebChromeClient() { @Override public void onGeoloc

  • Android网页H5 Input选择相机和系统相册

    需求: 网页h5的input选择相机和系统相册,并且返回压缩的图片到h5. 代码: 1.WebView代码 package com.zql.sdk; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.pm.PackageManager; import android.net.Uri; import android.os

  • Android的WebView与H5前端JS代码交互的实例代码

    前段时间项目有深度和前端对接过,也是碰了一些坑,现在有时间就拿出来分享下 JS调用原生不外乎就两种,一种是传假的url,也就是url拦截的方式,类似于下面这种: //js代码 function sendCommand(param){ var url="js-call://"+param; document.location = url; } sendCommand("PlaySnake"); //Java代码 mWebView.setWebViewClient(ne

  • Android实现H5与Native交互的两种方式

    前言 大家都知道在Android WebView使用中,经常需要H5页面和Native页面进行交互,比如在网页上点击分享按钮,调用本地分享接口进行分享,分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息.下面来看看一起看看两种实现方式是什么? 一.Url拦截的方式 重写ShouldOverrideUrl进行Url拦截,这种方式通过H5和Native协商好的Url格式来表明H5页面想要Native进行的操作,比如拨打电话,播放视频,查看某个用户的信息等操作,每种操作对应一种ur

随机推荐