鸿蒙HarmonyOS开发学习笔记：Web组件隐私模式

于 2024-08-23 19:50:06 发布
阅读量723 收藏 13
点赞数 10
分类专栏： OpenHarmony HarmonyOS 鸿蒙 文章标签： harmonyos 华为 前端 linux 鸿蒙 移动开发 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84917132/article/details/141467917
版权
OpenHarmony 同时被 3 个专栏收录
159 篇文章 0 订阅
订阅专栏
HarmonyOS
159 篇文章 0 订阅
订阅专栏
鸿蒙
159 篇文章 0 订阅
订阅专栏

当使用隐私模式时，浏览网页时的cookies、 cache data 等数据不会保存在本地的持久化文件，当隐私模式的Web组件被销毁时，cookies、 cache data等数据将不被记录下来。

  • 创建隐私模式的Web组件。

    // xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
 controller: webview.WebviewController = new webview.WebviewController();

 build() {
   Column() {
     Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
   }
 }
}

  • 通过isIncogntoMode 判断当前Web组件是否是隐私模式。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('isIncognitoMode')
        .onClick(() => {
          try {
            let result = this.controller.isIncognitoMode();
            console.log('isIncognitoMode' + result);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

隐私模式提供了一系列接口，用于操作地理位置、Cookie以及Cache Data。

  • 通过allowGeolocation设置隐私模式下的Web组件允许指定来源使用地理位置。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  origin: string = "file:///";

  build() {
    Column() {
      Button('allowGeolocation')
        .onClick(() => {
          try {
            // allowGeolocation第二个参数表示隐私模式（true）或非隐私模式（false）下，允许指定来源使用地理位置。
            webview.GeolocationPermissions.allowGeolocation(this.origin, true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

  • 通过deleteGeolocation清除隐私模式下指定来源的地理位置权限状态。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  origin: string = "file:///";

  build() {
    Column() {
      Button('deleteGeolocation')
        .onClick(() => {
          try {
            // deleteGeolocation第二个参数表示隐私模式（true）或非隐私模式（false）下，清除指定来源的地理位置权限状态。
            webview.GeolocationPermissions.deleteGeolocation(this.origin, true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

  • 通过getAccessibleGeolocation以回调方式异步获取隐私模式下指定源的地理位置权限状态。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  origin: string = "file:///";

  build() {
    Column() {
      Button('getAccessibleGeolocation')
        .onClick(() => {
          try {
            // getAccessibleGeolocation第三个参数表示隐私模式（true）或非隐私模式（false）下，以回调方式异步获取指定源的地理位置权限状态。
            webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
              if (error) {
                console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
                return;
              }
              console.log('getAccessibleGeolocationAsync result: ' + result);
            }, true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

  • 通过deleteAllData清除隐私模式下Web SQL当前使用的所有存储。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('deleteAllData')
        .onClick(() => {
          try {
            // deleteAllData参数表示删除所有隐私模式（true）或非隐私模式（false）下，内存中的web数据。
            webview.WebStorage.deleteAllData(true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.controller, incognitoMode: true })
        .databaseAccess(true)
    }
  }
}

  • 通过fetchCookieSync获取隐私模式下指定url对应cookie的值。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('fetchCookieSync')
        .onClick(() => {
          try {
            // fetchCookieSync第二个参数表示获取隐私模式（true）或非隐私模式（false）下，webview的内存cookies。
            let value = webview.WebCookieManager.fetchCookieSync('https://www.example.com', true);
            console.log("fetchCookieSync cookie = " + value);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

  • 通过configCookieSync设置隐私模式下指定url的单个cookie的值。

    // xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('configCookieSync')
        .onClick(() => {
          try {
            // configCookieSync第三个参数表示获取隐私模式（true）或非隐私模式（false）下，对应url的cookies。
            webview.WebCookieManager.configCookieSync('https://www.example.com', 'a=b', true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

  • 通过existCookie查询隐私模式下是否存在cookie。

    // xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('existCookie')
        .onClick(() => {
          // existCookie参数表示隐私模式（true）或非隐私模式（false）下，查询是否存在cookies。
          let result = webview.WebCookieManager.existCookie(true);
          console.log("result: " + result);
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

  • 通过clearAllCookiesSync清除隐私模式下所有cookie。

    // xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('clearAllCookiesSync')
        .onClick(() => {
          // clearAllCookiesSync参数表示清除隐私模式（true）或非隐私模式（false）下，webview的所有内存cookies。
          webview.WebCookieManager.clearAllCookiesSync(true);
        })
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

 →【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.视频学习资料+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习资料（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

【纯血版鸿蒙全套最新学习资料】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

太空人_喜之郎
关注
专栏目录
鸿蒙HarmonyOS开发学习笔记
01-21
学习鸿蒙HarmonyOS开发，首先需要掌握其基本架构和组件。HarmonyOS开发主要使用 ArkTS 语言，这是一种基于TypeScript的编程语言，适用于构建HarmonyOS应用。 鸿蒙应用的工程结构通常包括以下几个关键部分： 1. **...
鸿蒙开发基础-Web组件之cookie操作
2301_76813281的博客
01-14 733
使用ArkTS语言实现一个简单的免登录过程，向大家介绍基本的cookie管理操作。
OpenHarmony实战开发-如何使用隐私模式
2401_82546228的博客
05-06 504
开发者在创建Web组件时，可以将可选参数incognitoMode设置为’true’，来开启Web组件的隐私模式。 当使用隐私模式时，浏览网页时的cookies、 cache data 等数据不会保存在本地的持久化文件，当隐私模式的Web组件被销毁时，cookies、 cache data等数据将不被记录下来。
HarmonyOS Next开发学习手册——ArkWeb设置基本属性和事件
maniuT的博客
07-21 770
从API version 11起，Web组件基于ArkWeb的内核，默认UserAgent定义如下：建议通过ArkWeb关键字识别是否是HarmonyOS设备以及web内核是否为ArkWeb，同时可以通过deviceType识别设备类型用于不同设备上的页面显示。
HarmonyOS Next开发学习手册——管理Web组件
maniuT的博客
07-22 1173
为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。因此，在使用Web组件加载本地离线资源的时候，Web组件会拦截file协议和resource协议的跨域访问。
openharmony开发最新4.0版本---数据库连接（二）(基于api10,devstudio4.0) 中relationalStore的使用
m0_55673121的博客
01-04 1400
rdb的使用
openharmony开发最新4.0版本---数据库连接(基于api10,devstudio4.0) 中首选项preferences的工具类的使用
m0_55673121的博客
01-03 904
首选项preferences工具类的使用
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
通过这套课程的学习，你可以系统地掌握HarmonyOS开发的基础知识，包括UI设计、数据处理、组件通信等，为成为合格的鸿蒙开发者打下坚实基础。随着HarmonyOS生态的不断壮大，掌握这些技能将为你的职业生涯开辟新的可能...
鸿蒙HarmonyOS壁纸，万物皆鸿蒙（无水印版）.rar
06-20
鸿蒙HarmonyOS是华为公司开发的一款面向全场景的分布式操作系统，旨在打破设备间的界限，实现万物互联。这款操作系统的设计理念源于中国古代哲学中的"鸿蒙"概念，寓意着开创一切的原始状态，象征着系统能够无缝连接...
HCIA-HarmonyOS Application Development2.0学习笔记
06-12
- **统一 OS 弹性部署**：HarmonyOS 作为一个统一的操作系统，可以适应不同规模的硬件平台，从小型嵌入式设备到大型计算机系统均可运行。 #### 三、HarmonyOS 架构层次 HarmonyOS 遵循分层设计的原则，从下至上...
华为鸿蒙HarmonyOS开发者资料汇总.zip
09-16
华为鸿蒙HarmonyOS开发者资料汇总.zip包含了丰富的资源，旨在帮助开发者深入了解并开始构建鸿蒙OS应用程序。这个压缩包中的各个文件提供了从基础到高级的全方位指导，涵盖了鸿蒙OS开发的多个关键领域。 首先，...
【鸿蒙开发】 使用ArkWeb组件加载H5页面
m0_56255097的博客
04-10 2571
相当于iOS/Android中的WebView控件，给个url就可以展示H5页面。我也是带着这些问题去学习使用ArkWeb的。
构建第一个ArkTS应用
希望我的博客能帮助你
06-26 1131
本篇文章是简单实现页面跳转的一个ArkTs的应用，较于基础，由于我也在学，希望也可以帮助到大家。
【HarmonyOS NEXT】鸿蒙customScan (自定义界面扫码)
wu1004019946的博客
06-17 1276
HarmonyOS NEXT 自定义界面扫码能力。
【HarmonyOS NEXT】FAQ之应用服务开发(用户通知服务)
最新发布
qq_45789342的博客
08-20 874
应用消息推送则是指应用程序在后台发送的消息通知，可以显示在手机的通知栏或电脑的任务栏等位置，例如社交媒体应用的新消息提醒、邮件应用的邮件到达提醒等。A：在UIAbility中使用EventHub订阅事件，EventHub模块提供了事件中心，提供订阅、取消订阅、触发事件的能力。A：是的，emitter.off取消订阅某个事件后，所有订阅这个事件的地方都不会再收到这个事件的消息。A：发布通知时，需要在真机端系统设置中，开启对应应用的通知开关，然后才能在通知栏中看到发布的通知。
HarmonyOS Next开发学习手册——文件授权访问(ArkTS)
maniuT的博客
07-24 1025
文件授权访问的场景仅支持部分设备。下面介绍几种常用操作示例。
OpenHarmony实战开发-通用属性协议开发指导。
m0_70749039的博客
05-13 801
通用属性协议是GATT（Generic Attribute）的缩写，它是一种用于在蓝牙低功耗设备之间传输数据的协议，定义了一套通用的属性和服务框架。通过GATT协议，蓝牙设备可以向其他设备提供服务，也可以从其他设备获取服务。
OpenHarmony实例：【资源管理器】
m0_62167422的博客
04-09 1096
本工程使用[@ohos.app.ability.common] 接口中的AbilityContext类，获取资源管理器resourceManager，使用[@ohos.resourceManager.d.ts]中的接口，展示了格式化字符串查询、基于指定屏幕分辨率查询媒体资源、获取系统资源管理对象等基础功能，以及展示了资源静态overlay以及运行时overlay的特性功能。而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由。
鸿蒙HarmonyOS ArkTS开发详解与资源指南
"鸿蒙HarmonyOS开发学习笔记包含了组件用法、参数、属性的详细介绍，补充了官网课程未涵盖的内容，旨在帮助开发者更高效地使用ArkTS进行鸿蒙应用开发。笔记提到了DevEco Studio的安装配置，以及工程和模块的文件目录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值