• Home
Name Date Size #Lines LOC

..--

AppScope/06-May-2025-3532

entry/06-May-2025-610551

entry1/06-May-2025-531474

entry2/06-May-2025-764679

entry3/06-May-2025-712628

entry4/06-May-2025-745659

hvigor/06-May-2025-3836

screenshots/06-May-2025-

.gitignoreD06-May-2025133 1212

README.mdD06-May-20258.4 KiB249171

build-profile.json5D06-May-20252.1 KiB10099

code-linter.json5D06-May-2025958 3534

hvigorfile.tsD06-May-2025830 225

oh-package.json5D06-May-2025834 2624

ohosTest.mdD06-May-20253.9 KiB6139

README.md

1# 加速Web页面的访问
2
3### 介绍
4
51. 本工程主要实现了对以下指南文档中 https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/web/web-predictor.md 示例代码片段的工程化，主要目标是实现指南中示例代码需要与sample工程文件同源。
6
7### Entry:
8
9#### PrepareForPageLoad_one
10
11##### 介绍
12
131. 本示例主要介绍加速Web页面的访问，可以通过prepareForPageLoad()来预解析或者预连接将要加载的页面。
14
15##### 效果预览
16
17| 主页                                                         | loadDate                                                     |
18| ------------------------------------------------------------ | ------------------------------------------------------------ |
19| <img src="./screenshots/PrepareForPageLoad_one_1.png" width="360;" /> | <img src="./screenshots/PrepareForPageLoad_one_2.png" width="360;" /> |
20
21使用说明
22
231. 在Web组件的onAppear中对要加载的页面进行预连接。
241. 点击超链接跳转下一界面。
251. 点击loadData按钮返回上个界面。
26
27### Entry1:
28
29#### PrepareForPageLoad_two
30
31##### 介绍
32
331. 本示例主要介绍加速Web页面的访问，可以通过initializeBrowserEngine()来提前初始化内核，然后在初始化内核后调用 prepareForPageLoad()对即将要加载的页面进行预解析、预连接。
34##### 效果预览
35
36| 主页                                                         | loadDate                                                     |
37| ------------------------------------------------------------ | ------------------------------------------------------------ |
38| <img src="./screenshots/PrepareForPageLoad_two_1.png" width="360;" /> | <img src="./screenshots/PrepareForPageLoad_two_2.png" width="360;" /> |
39
40使用说明
41
421. Ability的onCreate中提前初始化Web内核并对首页进行预连接。
43
44### Entry2:
45
46#### Prefetching
47
48##### 介绍
49
501. 本示例主要介绍加速Web页面的访问，如果能够预测到Web组件将要加载的页面或者即将要跳转的页面，可以通过prefetchPage()来预加载即将要加载页面。
51
52##### 效果预览
53
54| 主页                                                     |
55| -------------------------------------------------------- |
56| <img src="./screenshots/Prefetching.png" width="360;" /> |
57
58使用说明
59
601. 在onPageEnd的时候触发下一个要访问的页面的预加载。
61
62#### PrefetchingAPOSTRequest_one
63
64##### 介绍
65
661. 本示例主要介绍加速Web页面的访问，通过prefetchResource()预获取将要加载页面中的post请求。在页面加载结束时，可以通过clearPrefetchedResource()清除后续不再使用的预获取资源缓存。
67
68##### 效果预览
69
70| 主页                                                         |
71| ------------------------------------------------------------ |
72| <img src="./screenshots/PrefetchingAPOSTRequest_one.png" width="360;" /> |
73
74使用说明
75
761. 对要加载页面中的post请求进行预获取。在onPageEnd中，可以清除预获取的post请求缓存。
77
78#### PrefetchingAPOSTRequest_two
79
80##### 介绍
81
821. 本示例主要介绍加速Web页面的访问，如果能够预测到Web组件将要加载页面或者即将要跳转页面中的post请求。可以通过prefetchResource()预获取即将要加载页面的post请求。
83
84##### 效果预览
85
86| 主页                                                         |
87| ------------------------------------------------------------ |
88| <img src="./screenshots/PrefetchingAPOSTRequest_two.png" width="360;" /> |
89
90使用说明
91
921. 在onPageEnd中，触发预获取一个要访问页面的post请求。
93
94#### PrefetchingAPOSTRequest_three
95
96##### 介绍
97
981. 本示例主要介绍加速Web页面的访问，通过initializeBrowserEngine()提前初始化内核，然后在初始化内核后调用prefetchResource()预获取将要加载页面中的post请求。这种方式适合提前预获取首页的post请求。
99
100##### 效果预览
101
102| 主页                                                         |
103| ------------------------------------------------------------ |
104| <img src="./screenshots/PrefetchingAPOSTRequest_three.png" width="360;" /> |
105
106使用说明
107
1081. 在Ability的onCreate中，提前初始化Web内核并预获取首页的post请求。
109
110### Entry3:
111
112#### PrecompForCompCache
113
114##### 介绍
115
1161. 本示例主要介绍加速Web页面的访问，通过precompileJavaScript()在页面加载前提前生成脚本文件的编译缓存。
117
118##### 效果预览
119
120| 主页                                                         | 加载页面                                                     |
121| ------------------------------------------------------------ | ------------------------------------------------------------ |
122| <img src="./screenshots/PrecompForCompCache_1.png" width="360;" /> | <img src="./screenshots/PrecompForCompCache_2.png" width="360;" /> |
123
124使用说明
125
1261. 应用启动时EntryAbility将UIContext存到localstorage，初始化预编译Web组件生成编译缓存。
1272. 点击加载页面按钮，创建businessNode，加载业务用Web组件展示business.html页面，此时会使用之前生成的编译缓存。
128
129### Entry4:
130
131#### InjOffResNoInt
132
133##### 介绍
134
1351. 本示例主要介绍加速Web页面的访问，可以通过injectOfflineResources()在页面加载前提前将图片、样式表或脚本资源注入到应用的内存缓存中。
136
137##### 效果预览
138
139| 主页                                                         | 加载页面                                                     |
140| ------------------------------------------------------------ | ------------------------------------------------------------ |
141| <img src="./screenshots/InjOffResNoInt_1.png" width="360;" /> | <img src="./screenshots/InjOffResNoInt_2.png" width="360;" /> |
142
143使用说明
144
1451. 进入Index.ets页面自动触发aboutToAppear方法。
1462. 点击加载页面按钮创建businessNode，加载业务用Web组件，展示business.html页面。
147
148### 工程目录
149
150```
151entry/src/main/
152|---ets
153|---|---entryability
154|---|---|---EntryAbility.ets
155|---|---pages
156|---|---|---Index.ets						// 首页
157|---resources								// 静态资源
158|---ohosTest
159|---|---ets
160|---|---|---tests
161|---|---|---|---Ability.test.ets            // 自动化测试用例
162
163entry1/src/main/
164|---ets
165|---|---entryability
166|---|---|---EntryAbility.ets
167|---|---pages
168|---|---|---Index.ets						// 首页
169|---resources								// 静态资源
170|---ohosTest
171|---|---ets
172|---|---|---tests
173|---|---|---|---Ability.test.ets            // 自动化测试用例
174
175entry2/src/main/
176|---ets
177|---|---entryability
178|---|---|---EntryAbility.ets
179|---|---pages
180|---|---|---Index.ets						// 首页
181|---|---|---Prefetching.ets
182|---|---|---PrefetchingAPOSTRequest_one.ets
183|---|---|---PrefetchingAPOSTRequest_three.ets
184|---|---|---PrefetchingAPOSTRequest_two.ets
185|---resources								// 静态资源
186|---ohosTest
187|---|---ets
188|---|---|---tests
189|---|---|---|---Ability.test.ets            // 自动化测试用例
190
191entry3/src/main/
192|---ets
193|---|---entryability
194|---|---|---EntryAbility.ets
195|---|---pages
196|---|---|---BusinessWebview.ets
197|---|---|---DynamicComponent.ets
198|---|---|---Index.ets						// 首页
199|---|---|---PrecompileConfig.ets
200|---|---|---Precompile Webview.ets
201|---resources								// 静态资源
202|---ohosTest
203|---|---ets
204|---|---|---tests
205|---|---|---|---Ability.test.ets            // 自动化测试用例
206
207entry4/src/main/
208|---ets
209|---|---entryability
210|---|---|---EntryAbility.ets
211|---|---pages
212|---|---|---BusinessWebview.ets
213|---|---|---DynamicComponent.ets
214|---|---|---Index.ets						// 首页
215|---|---|---Inject Webview.ets
216|---|---|---Resource.ets
217|---resources								// 静态资源
218|---ohosTest
219|---|---ets
220|---|---|---tests
221|---|---|---|---Ability.test.ets            // 自动化测试用例
222```
223
224
225### 相关权限
226
227[ohos.permission.INTERNET](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissioninternet)
228
229### 依赖
230
231不涉及。
232
233### 约束与限制
234
2351. 本示例仅支持标准系统上运行，支持设备：RK3568。
2362. 本示例支持API14版本SDK，SDK版本号(API Version 14 Release)。
2373. 本示例需要使用DevEco Studio 版本号(5.0.1Release)才可编译运行。
238
239### 下载
240
241如需单独下载本工程，执行如下命令：
242
243```
244git init
245git config core.sparsecheckout true
246echo code/DocsSample/ArkWeb/ManageWebPageLoadBrowse/AcceleratePageAccess > .git/info/sparse-checkout
247git remote add origin https://gitee.com/openharmony/applications_app_samples.git
248git pull origin master
249```