1# 使用离线Web组件 2 3### 介绍 4 51. 本工程主要实现了对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-offline-mode.md 示例代码片段的工程化，主要目标是实现指南中示例代码需要与sample工程文件同源。 6 7### Entry: 8 9#### CreatingOfflineWebComponents 10 11##### 介绍 12 131. 本示例主要介绍使用离线Web组件加载显示页面。在需要离屏创建Web组件时，定义一个自定义组件以封装Web组件，此Web组件在离线状态下被创建，封装于无状态的NodeContainer节点中，并与相应的NodeController组件绑定。Web组件在后台预渲染完毕后，当需要展示时，通过NodeController将其挂载到ViewTree的NodeContainer中，即与对应的NodeContainer组件绑定，即可挂载上树并显示。 14 15##### 效果预览 16 17| 主页 | 18| ------------------------------------------------------------ | 19| <img src="./screenshots/CreatingOfflineWebComponents.png" width="360;" /> | 20 21使用说明 22 231. Index.ets通过getNWeb从NodeMap获取myNodeController，将其传入NodeContainer，实现动态组件在页面的显示。 24 25### Entry1: 26 27#### PreLaunchingRenderingProcess_one 28 29##### 介绍 30 311. 本示例主要介绍预启动ArkWeb渲染进程。在后台预先创建一个Web组件，以启动用于渲染的Web渲染进程，这样可以节省后续Web组件加载时启动Web渲染进程所需的时间。 32 33##### 效果预览 34 35| 主页 | 跳转页 | 36| ------------------------------------------------------------ | ------------------------------------------------------------ | 37| <img src="./screenshots/PreLaunchingRenderingProcess_one_1.png" width="360;" /> | <img src="./screenshots/PreLaunchingRenderingProcess_one_2.png" width="360;" /> | 38 39使用说明 40 411. 在onWindowStageCreate时期预创建了一个Web组件加载blank页面，从而提前启动了Render进程，从index跳转到index2时，优化了Web的Render进程启动和初始化的耗时。 421. 点击跳转到web页面按钮跳转到Web页面。 43 44### Entry2: 45 46#### PreLaunchingRenderingProcess_two 47 48##### 介绍 49 501. 本示例主要介绍使用预渲染Web页面。预预渲染Web页面优化方案适用于Web页面启动和跳转场景，例如，进入首页后，跳转到子页。建议在高命中率的页面使用该方案。渲染Web页面的实现方案是提前创建离线Web组件，并设置Web为Active状态来开启渲染引擎，进行后台渲染。 51 52##### 效果预览 53 54| 主页 | 跳转页面 | 55| ------------------------------------------------------------ | ------------------------------------------------------------ | 56| <img src="./screenshots/PreLaunchingRenderingProcess_two_1.png" width="360;" /> | <img src="./screenshots/PreLaunchingRenderingProcess_two_2.png" width="360;" /> | 57 58使用说明 59 601. 点击跳转到web页面按钮跳转到Web页面。 61 62### 工程目录 63 64``` 65entry/src/main/ 66|---ets 67|---|---entryability 68|---|---|---EntryAbility.ets 69|---|---pages 70|---|---|---common.ets 71|---|---|---Index.ets // 首页 72|---resources // 静态资源 73|---ohosTest 74|---|---ets 75|---|---|---tests 76|---|---|---|---Ability.test.ets // 自动化测试用例 77 78entry1/src/main/ 79|---ets 80|---|---entry1ability 81|---|---|---Entry1Ability.ets 82|---|---pages 83|---|---|---common.ets 84|---|---|---Index.ets // 首页 85|---|---|---index2.ets 86|---resources // 静态资源 87|---ohosTest 88|---|---ets 89|---|---|---tests 90|---|---|---|---Ability.test.ets // 自动化测试用例 91 92entry2/src/main/ 93|---ets 94|---|---entry2ability 95|---|---|---Entry2Ability.ets 96|---|---pages 97|---|---|---common.ets 98|---|---|---Index.ets // 首页 99|---|---|---index2.ets 100|---resources // 静态资源 101|---ohosTest 102|---|---ets 103|---|---|---tests 104|---|---|---|---Ability.test.ets // 自动化测试用例 105``` 106 107 108### 相关权限 109 110[ohos.permission.INTERNET](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet) 111 112### 依赖 113 114不涉及。 115 116### 约束与限制 117 1181. 本示例仅支持标准系统上运行，支持设备：RK3568。 1192. 本示例支持API14版本SDK，SDK版本号(API Version 14 Release)。 1203. 本示例需要使用DevEco Studio 版本号(5.0.1Release)才可编译运行。 121 122### 下载 123 124如需单独下载本工程，执行如下命令： 125 126``` 127git init 128git config core.sparsecheckout true 129echo code/DocsSample/ArkWeb/UseOfflineWebComp > .git/info/sparse-checkout 130git remote add origin https://gitee.com/openharmony/applications_app_samples.git 131git pull origin master 132```
