鸿蒙H5离线包技术分享原创

shouyiyiyiyi

发布于 2025-2-28 13:31

浏览

0收藏

在开发过程中,我们常常使用H5离线包技术,实现H5本地化,解决无网情况下,H5无法加载的问题;
核心问题就是三个:<mark>下载,解压,加载</mark>.下面的分享就围绕这三个问题要解答
<mark>下面的所有代码是基于鸿蒙NEXT Api 12 </mark>

1. 下载离线包

要有下载进度回调
支持重复下载

具体实现如下

 download(
    resourceUrl: string | undefined,
    targetZipPath: string,
    progressCallback?: (progress: number) => void,
    completeCallBack?: (isSuc: boolean, message: string) => void) {
    if (resourceUrl != undefined && resourceUrl.length > 0) {
      // 如果zip文件地址存在,需要先删除
      if (fs.accessSync(targetZipPath)) {
        fs.unlinkSync(targetZipPath)
      }
      try {
        request.downloadFile(getContext(), { url: resourceUrl, filePath: targetZipPath })
          .then((downloadTask: request.DownloadTask) => {
            downloadTask.on('complete', () => {
              if (progressCallback != undefined) {
                progressCallback(1)
              }
              if (completeCallBack != undefined) {
                completeCallBack(true, "下载成功")
              }
            })
            downloadTask.on('remove', () => {
              if (completeCallBack != undefined) {
                completeCallBack(false, "取消下载")
              }
            })
            downloadTask.on("progress", (receivedSize: number, totalSize: number) => {
              if (progressCallback != undefined) {
                let progress = receivedSize / totalSize
                console.log(`下载当前进度${progress} receivedSize ${receivedSize} totalSize ${totalSize}`)
                progressCallback(progress)
              }
            })
          })
          .catch((err: BusinessError) => {
            if (completeCallBack != undefined) {
              completeCallBack(false, err.message)
            }
          });
      } catch (error) {
        let err: BusinessError = error as BusinessError;
        if (completeCallBack != undefined) {
          completeCallBack(false, err.message)
        }
      }
    } else {
      if (completeCallBack != undefined) {
        completeCallBack(false, "下载地址为空")
      }
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.

2. 解压离线包

要有解压进度回调
- 官方提供了zip解压组件zlib,但是不支持解压进度的回调,因此选用了minizip
解压完成后自动删除压缩包

具体实现如下


unzipToDirectory(
    zipPath: string,
    targetPath: string,
    progressCallback?: (progress: number) => void,
    completeCallback?: (isSuc: boolean, message: string) => void) {
    if (!fs.accessSync(zipPath)) {
      if (completeCallback) {
        completeCallback(false, "selectPath not exists");
      }
      return
    }
    if (fs.accessSync(targetPath)) {
      fs.rmdirSync(targetPath)
    }
    fs.mkdirSync(targetPath, true);

    let minizipEntry = new MinizipNative(zipPath);

    let code: number = minizipEntry.Open()
    if (code == 0) {
      let entryNames: Array<string> = minizipEntry.GetEntryNames().sort((a: string, b: string) => {
        return a.length - b.length
      });

      let dirEntrySet = new Set<string>()
      for (let i = 0; i < entryNames.length; i++) {
        const path = entryNames[i]
        const index = path.lastIndexOf("/")
        if (index != -1) {
          const dirPath = path.substring(0, index)
          dirEntrySet.add(dirPath)
        }
      }
      let dirEntryNames = Array.from(dirEntrySet).sort((a: string, b: string) => {
        return a.length - b.length
      });

      for (let i = 0; i < dirEntryNames.length; i++) {
        let dirPath = targetPath + "/" + dirEntryNames[i]
        if (!fs.accessSync(dirPath)) {
          fs.mkdirSync(dirPath, true);
        }
      }
      let onlyFiles = entryNames.filter((value) => {
        return !value.endsWith("/")
      })
      if (progressCallback != undefined) {
        progressCallback(0)
      }
      let result: boolean = true
      for (let i = 0; i < onlyFiles.length; i++) {
        let path: string = targetPath + "/" + onlyFiles[i];
        let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
        let arrBuffer: ArrayBuffer | undefined = minizipEntry.ExtractFileToJS(onlyFiles[i], "");
        if (arrBuffer != undefined) {
          fs.write(file.fd, arrBuffer).then((writeLen: number) => {
            let progress = (i + 1) / onlyFiles.length
            if (progressCallback != undefined) {
              progressCallback(progress)
            }
          }).catch((err: BusinessError) => {
            result = false
            if (completeCallback) {
              completeCallback(false, "fs.write failed: " + onlyFiles[i])
            }
          }).finally(() => {
            fs.closeSync(file);
          })
        } else {
          // 数据为空的话,直接创建空文件即可
          fs.write(file.fd, "")
          let progress = (i + 1) / onlyFiles.length
          if (progressCallback) {
            progressCallback(progress)
          }
        }
        if (!result) {
          break
        }
      }
      if (result) {
        if (progressCallback) {
          progressCallback(1)
        }
        fs.unlink(zipPath).then(() => {
          if (completeCallback) {
            completeCallback(true, "unzip success")
          }
        })
      }

    } else {
      if (completeCallback) {
        completeCallback(false, "Open failed")
      }
    }
  }

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.

3. 加载本地H5页面

在加载本地网页的时候发现如果网页中的含有本地css,跳转,资源文件,都加载不出来,我们需要将上述的内容进行正则匹配后替换上述内容,再在对应的系统代理事件中进行处理

所以我们核心解决下面两个问题:

支持本地资源加载
支持本地网页跳转

@Component
struct WebPage {
  // 跳转过来 传递的地址
  urlPath: string = ""
  controller = new webview.WebviewController()
  schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler();
  responseWeb: WebResourceResponse = new WebResourceResponse();
  fileDir: string = ""

  loadData() {
    try {
      if (this.urlPath.includes("http") == false) {
        this.loadLocalUrl()
      } else {
        this.controller.loadUrl(this.urlPath)
      }

    } catch (e) {
      showShortCenterToast("加载失败")
    }
  }

  loadLocalUrl() {
    let parts = this.urlPath.split('/');
    // 如果数组长度大于 1，移除最后一个元素
    if (parts.length > 1) {
      parts.pop();
    }
    // 当前H5所在文件夹的绝对路径
    this.fileDir = parts.join('/')

    let html = fs.readTextSync(this.urlPath)
    // 要插入的指定字符串
    const insertString = "http://local";
    // 定义正则表达式
    const regex = /src="([^"]+\.(?:png|jpg|gif))"/gi;
    // 执行替换操作
    const imageHtml = html.replace(regex, (_, p1: string) => {
      let content = `src="${insertString}/${p1}"`;
      return content
    });

    // href定义正则表达式
    const cssRegex = /href="([^"]+\.(?:css|html))"/gi;
    const cssHtml = imageHtml.replace(cssRegex, (_, p1: string) => {
      let content = `href="${insertString}/${p1}"`;
      return content
    });
    this.controller.loadData(
      cssHtml,
      'text/html',
      'UTF-8'
    );
  }

  build() {
    Web({ src: this.urlPath, controller: this.controller })
      .width(FULL_WIDTH)
      .mixedMode(MixedMode.All)
      .layoutWeight(1)
      .onControllerAttached(() => {
        this.loadData()
      })
      .onLoadIntercept((event) => {
        let url = event.data.getRequestUrl()
        // 跳转拦截
        if (url.toLowerCase().startsWith('http://local') && url.toLowerCase().endsWith("html/")) {
          url = url.replace("http://local", "")
          url = url.toUpperCase()
          url = url.replace("HTML/", "html")

          const filePath = this.fileDir + "/" + url
          if (fs.accessSync(filePath)) {
            this.urlPath = filePath
            this.loadLocalUrl()
            return true
          }
        }
        return false
      })
      .onInterceptRequest((event) => {
        let url = event.request.getRequestUrl()
        // 本地资源加载拦截
        if (url.startsWith('http://local')) {
          const promise: Promise<String> = new Promise((resolve: Function, reject: Function) => {
            url = url.replace("http://local", "")
            const filePath = this.fileDir + "/" + url
            if (fs.accessSync(filePath)) {
              if (url.toLowerCase().endsWith(".png") ||
              url.toLowerCase().endsWith(".jpg") ||
              url.toLowerCase().endsWith(".gif") ||
              url.toLowerCase().endsWith(".css")) {

                const fd = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
                // 获取文件的大小
                const stat = fs.statSync(fd.fd);
                const fileSize = stat.size;
                // 创建一个指定大小的 ArrayBuffer
                const buffer = new ArrayBuffer(fileSize);
                // 读取文件内容到 ArrayBuffer
                fs.readSync(fd.fd, buffer);
                this.responseWeb.setResponseData(buffer);
                if (url.toLowerCase().endsWith(".css")) {
                  this.responseWeb.setResponseMimeType('text/css');
                } else {
                  this.responseWeb.setResponseMimeType('image/*');
                }
              }
              this.responseWeb.setResponseCode(200);
              this.responseWeb.setReasonMessage('OK');
              resolve("success");
            } else {
              reject("failed")
            }
          })
          promise.then(() => {
            this.responseWeb.setResponseIsReady(true);
          })
          this.responseWeb.setResponseIsReady(false);
          return this.responseWeb;
        }
        return null

      })
      .width(FULL_WIDTH)
      .height(FULL_HEIGHT)
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.