当前位置: 首页 > news >正文

HarmonyOS/OpenHarmony 离线加载web资源,并实现web资源更新

关键词:h5离线包加载、h5离线包更新、沙箱

在上一篇文章中,我们已经介绍了如何将 rawfile 资源文件中的文件数据拷贝到沙箱下,那么该篇文章将介绍如何加载该沙箱目录下的文件资源(此处以打包后的web资源为例),用webview加载出页面,并实现在线获取新包更新web页面的效果。

如何将rawfile中文件拷贝到沙箱中,可参考我的上一篇文章:HarmonyOS/OpenHarmony 如何将rawfile中文件复制到沙箱中

该片文章首先需要介绍我这边准备的 ohosInteractive.zip 离线包,该离线包中仅存放了一个简易的html文件

1. 解压文件

解压zip文件到 webSources 下,因为涉及到文件加载需要一段时间,所以此处的解压建议放到ability生命周期中进行,不建议在页面需要加载时进行解压。

let boxPath = getContext().getApplicationContext().filesDir
let unzipPath = boxPath + "/webSources"
let zipPath = boxPath + "/webSources/ohosInteractive.zip"zlib.decompressFile(zipPath, unzipPath, {}, (err, data) => {if (err != null) {console.error(err.message)} else {console.log("luvi > decompress succeed")fs.unlinkSync(zipPath);}})

2. webview 加载页面

此处的 webUrl 是我们在上一步解压后的文件所在位置,不要写错了。因为当前 web 为加载沙箱文件,所以需要开启 fileAccess 属性,不然 h5 将无法加载。

当文件解压完后,页面就会加载出来了,若不能加载,可连接设备点击 IDE 右下角的 Device File Browser 文件管理,查看文件拷贝和解压是否正确,有些页面需要设置 domStorageAccess 属性才可以加载,此处也不能遗忘。

@Entry
@Component
export struct WebPage {webController: WebviewController = new webview.WebviewController()webUrl: string = "file://" + getContext().getApplicationContext().filesDir + "/webSources/index.html";build() {Column() {Web({ src: this.webUrl, controller: this.webController }).fileAccess(true).domStorageAccess(true).zoomAccess(false).width("100%").height("100%")}}
}

3. h5离线包更新

在第一步时,我们就已经把文件管理在了沙箱中,沙箱中的文件我们可以进行任意操作,如删除或替换,那么我们可以利用该特性进行资源包的在线下载并解压替换,即可实现h5页面的更新。

该 updateResources 方法自行修改按业务调用即可,此处需要注意的是,在app中本地 rawfile 已经存在离线包拷贝解压后需要进行标记或自行检查文件的存在与否,避免在线的离线包下载替换完成后下次启动app再一次把 rawfile 中的文件拷贝到了沙箱中,那么最新的在线包始终不会被更新进沙箱。

3.1 使用 request.downloadFile 下载离线包并解压
updateResources() {// 下载最新离线包let boxPath = getContext().getApplicationContext().filesDirlet unzipPath = boxPath + "/webSources"let zipPath = boxPath + "/webSources/ohosInteractive.zip"try {// 需要手动将 url 替换为真实服务器的 HTTP 协议地址,此处我就不给我的服务器了request.downloadFile(getContext(), {url: "https://xxxxxx/ohosInteractive.zip",filePath: zipPath}).then((data: request.DownloadTask) => {let downloadTask: request.DownloadTask = data;downloadTask.on("complete", () => {// 解压下载的新资源包zlib.decompressFile(zipPath, unzipPath, {}, (err, data) => {if (err != null) {console.error("luvi > " + err.message)} else {console.log("luvi > decompress succeed")// 解压成功后删除源zip包fs.unlinkSync(zipPath);}})console.log("luvi > 新离线包下载成功!")promptAction.showToast({message: "luvi > 新离线包下载成功!重启展示新页面"})})}).catch((err: BusinessError) => {console.error(`luvi> Failed to request the download. Code: ${err.code}, message: ${err.message}`);})} catch (err) {console.error(`luvi > Failed to request the download. err: ${JSON.stringify(err)}`);}}

师傅领进门,修行靠个人,本文章只介绍核心功能,因业务功能而异,所以不提供完整代码了。

http://www.lryc.cn/news/450413.html

相关文章:

  • 【Spark 实战】基于spark3.4.2+iceberg1.6.1搭建本地调试环境
  • TCP连接建立中不携带数据的报文段为何不消耗序号解析
  • JS设计模式之状态模式:优雅地管理应用中产生的不同状态
  • C语言系列4——指针与数组(1)
  • JS网页设计案例
  • 4.2.1 通过DTS传递物理中断号给Linux
  • 常用性能优化方法
  • 上海我店:创新模式引领本地生活新风尚
  • 【微服务】前端微服务qiankun 2.x主子应用通信代码片段
  • 高级java每日一道面试题-2024年9月30日-算法篇-LRU是什么?如何实现?
  • CSS选择器的全面解析与实战应用
  • vue3自动暴露element-plus组件的ref
  • 龙芯+FreeRTOS+LVGL实战笔记(新)——10蜂鸣器嘀嘀嘀
  • 微信小程序-数据模型与动态赋值
  • 【Redis】Linux下安装配置及通过C++访问Redis
  • Python 入门教程(4)数据类型 | 4.7、元组
  • Temu正在吸引越来越多的亚马逊卖家,这个市场Temu蝉联下载榜首
  • 设计原则模式概览
  • 高级主题:接口性能测试与压力测试
  • python绘制图像
  • 如何修复变砖的手机并恢复丢失的数据
  • 服务器使用了代理ip,遇到流量攻击,会对服务器有影响吗
  • 从存储到人工智能洞察: 利用 MinIO 和 Polars 简化数据管道
  • 只需要 1 分钟语音数据实现声音克隆
  • OpenEuler虚拟机安装保姆级教程 | 附可视化界面
  • 表格控件QTableWidget
  • LeetCode236题:二叉树的最近公共祖先
  • 虚谷中使用PL/SQL改变模式下所有表的大小写
  • 数据挖掘的基本步骤和流程解析:深入洞察与策略实施
  • BCJR算法——卷积码的最大后验译码