HarmonyOS Web组件,离线包方案

离线包方案:通过劫持请求的方案实现,请麻烦给一个demo。劫持html,劫持css js。

HarmonyOS
2024-09-05 11:40:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

1.在onInterceptRequest对加载url中文件类型进行判断进行html,js及css劫持。

2.对于图片也可以通过类型进行拦截,做相应资源替换(若本地有资源图片)或放过

3.拦截后WebResourceResponse返回响应数据则按照响应数据加载,无响应数据则返回null表示按照原来的方式加载。图片及接口若放开则直接返回null

Web({ src:'https://test.index.html/', controller: this.controller }) 
  .onInterceptRequest((event) => { 
    let url: string = '' 
    if (event) { 
      url = event.request.getRequestUrl() 
      console.log('url---:' + event.request.getRequestUrl()) 
    } 
    let head1: Header = { 
      headerKey: "Connection", 
      headerValue: "keep-alive" 
    } 
    let head2: Header = { 
      headerKey: "Cache-Control", 
      headerValue: "no-cache" 
    } 
    this.heads.push(head1) 
    this.heads.push(head2) 
    if (url == 'https://test.index.html/fakao/') { 
      console.log('d:'+this.currentPath) 
      const file = fs.openSync(this.currentPath+ '/index.html',fs.OpenMode.READ_ONLY); 
      this.responseweb.setResponseHeader(this.heads) 
      this.responseweb.setResponseData(file.fd) //$rawfile('dist/index.html') 
      this.responseweb.setResponseEncoding('utf-8') 
      this.responseweb.setResponseMimeType('text/html') 
      this.responseweb.setResponseCode(200) 
      this.responseweb.setReasonMessage('OK') 
      return this.responseweb 
    } 
    else if (url.endsWith('css') || url.endsWith('js')) { 
      const result = extractFileNameAndExtension(url) 
      try { 
        console.log('c:'+`${this.currentPath}/${result.fileName}.${result.extension}`) 
        const file = fs.openSync(`${this.currentPath}/${result.fileName}.${result.extension}`,fs.OpenMode.READ_ONLY); 
        this.responseweb.setResponseHeader(this.heads) 
        this.responseweb.setResponseData(file.fd) //$rawfile('dist/'+result.fileName+'.'+result.extension) 
        this.responseweb.setResponseEncoding('utf-8') 
        this.responseweb.setResponseMimeType(result.mimeType) 
        this.responseweb.setResponseCode(200) 
        this.responseweb.setReasonMessage('OK') 
        return this.responseweb 
      } catch (e) { 
        console.log('er:'+`${this.currentPath}/${result.fileName}.${result.extension}`) 
        return null 
      } 
    }else if (url.endsWith('png') || url.endsWith('jpg')) { 
      //图片做替换 
      return null 
    }else { 
      //其他 
      return null 
    } 
  })
分享
微博
QQ
微信
回复
2024-09-05 15:37:58
相关问题
HarmonyOS 离线 下载解压
492浏览 • 0回复 待解决
HarmonyOS web离线加载请求跨域问题
375浏览 • 1回复 待解决
基于HarmonyOS实现H5离线方案有哪些?
160浏览 • 1回复 待解决
离线webview组件有没有相关使用文档
1569浏览 • 1回复 待解决
hsp和har互相转换方案
1081浏览 • 1回复 待解决
应用,求解决方案
1773浏览 • 1回复 待解决
HarmonyOS Web组件高度问题
161浏览 • 1回复 待解决
HarmonyOS web组件上传文件
154浏览 • 1回复 待解决
HarmonyOS 消息推送支持离线场景吗?
100浏览 • 1回复 待解决
应用体积大小优化解决方案
418浏览 • 1回复 待解决
HarmonyOS web组件怎么拦截请求
399浏览 • 1回复 待解决
HarmonyOS web组件加载pdf问题
474浏览 • 1回复 待解决
HarmonyOS web组件的使用
203浏览 • 1回复 待解决
HarmonyOS Web组件回调
107浏览 • 1回复 待解决
HarmonyOS Web组件头部参数问题
111浏览 • 1回复 待解决