Read the original article：How to add html file in arkts project
Introduction
ArkWeb provides Web components to display web page content in applications. You can use the components in the following scenarios:
Web page integration: Applications can use Web components to embed web page content to reduce development costs and improve development and operation efficiency.
Web browsing: Browser applications can use Web components to open third-party web pages, browse web pages in traceless mode, and set advertisement blocking.
Applet: Host applications of applets can use Web components to render the pages of the applets.
Features
ArkWeb is a multi-process model, which consists of the application process, Web rendering process, Web GPU process, Web incubation process, and Foundation process.
Note : The Web kernel does not limit the allocated memory size. Theoretically, the memory size can be infinite until it is released by the resource management module.
- Web-related threads in the application process (unique for the application)
- The application process is the main process, which includes the network thread, video thread, audio thread, and I/O thread.
- Processes application APIs and callbacks of the Web component, and provides functionalities that require interaction with other system services, such as network requests and media services.
- Foundation process (unique in the system)
- Receives requests from the application process to incubate processes and manages the binding relationship between the application process and Web rendering process.
- Web incubation process (unique in the system)
- Receives requests from the Foundation process and incubates the Web rendering and Web GPU processes.
- Processes privilege dropping using security sandbox and pre-loads dynamic libraries after incubation to improve performance.
- Web rendering process (shared or independent processes can be specified for multiple Web instances)
- Runs the Web rendering process engine, which implements HTML parsing, typesetting, drawing, and rendering.
- Runs the ArkWeb execution engine, which executes JavaScript and Web Assembly.
- Provides APIs for applications to choose whether to share rendering processes among multiple Web instances, meeting requirements on security, stability, and memory usage in different scenarios.
- Default policy: Share rendering processes on mobile devices to save memory, and use independent rendering processes on 2-in-1 devices to improve security and stability.
- Web GPU process (unique for an application)
- Responsible for interaction with GPU and RenderService, such as rasterization and composition for display. Improves the stability and security of the application process.
How to implements
- First you can create html file like fit_content.html in rawfile folder
<!--fit_content.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resource://rawfile/fit_content.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Fit-Content</title>
</head>
<body>
<div>
<div><h2 class="Whentouse">When to use</h2>
<p>ArkWeb provides Web components to display web page content in applications. The common application scenarios are as follows:</p>;
<ul>
<li><p>
Web page integration: Applications can use Web components to embed web page content to reduce development costs and improve development and operation efficiency.</p>
</li>
<li><p>
Web browsing: Browser applications can use Web components to open third-party web pages, browse web pages in traceless mode, and set advertisement blocking.</p>
</li>
<li><p>Applet: Host applications of the applet type can use web components to render applet pages. </p></li>
</ul>
</div>
<div><h2 id="Capabilities">Capabilities</h2>
<p>The Web component provides various capabilities for controlling web pages, including: </p>;
<ul>
<li><p>Web page loading: Declarative loading and off-screen loading of web pages. </p></li>
<li><p>Lifecycle management: Managing the lifecycle of components and notifying web pages of loading status changes. </p></li>
<li><p>Common attributes and events: User-Agent management, cookie and storage management, font and dark mode management, and permission management. </p>
</li>
<li><p>
Interaction with the application UI: The text selection menu, context menu, and file upload page can be customized to interact with the application UI. </p>
</li>
<li><p>Applications can interact with web pages through JavaScriptProxy. </p></li>
<li><p>Security and privacy: Incognito browsing mode, advertisement blocking, and Advanced Security mode. </p></li>
<li><p>Maintenance and debugging capability: DevTools debugging and Crashpad (used to collect Web component crash information).
</p></li>
<li><p>
Other advanced capabilities: same-layer rendering with native components, network and media playback takeover, and custom input method for Web component text boxes. </p>
</li>
</ul>
</div>
<div><h2 id="Constraints">Constraints</h2>
<ul>
<li>Web kernel version: ArkWeb is developed based on Chromium M114.</li>
</ul>
</div>
</div>
</body>
</html>
- Second you can create css file like fit_content.css in rawfile folder then you should add css file in html
h2 {
background-color: #948459;
}
p{
background-color:#948459;
}
#Capabilities{
background-color: #ff5733;
}
.Whentouse{
background-color: #46ff33 ;
}
// fit_content_test.ets
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebHeightPage {
private webviewController: WebviewController = new webview.WebviewController()
private scroller: Scroller = new Scroller()
build() {
Navigation() {
Column() {
Scroll(this.scroller) {
Column() {
Web({
src: $rawfile("fit_content.html"),
controller: this.webviewController,
renderMode: RenderMode.SYNC_RENDER // Set the synchronous rendering mode.
})
.layoutMode (WebLayoutMode.FIT_CONTENT) // Set the Web component size to fit in the page content.
.overScrollMode (OverScrollMode.NEVER) // Disable the overscroll mode.
Text('Comments')
.fontSize(28)
.fontColor("#FF0F0F")
.height(100)
.width("100%")
.backgroundColor("#f89f0f")
}
}
}
}
.title ("Title bar")
}
}
Conclusion
- Set the rendering mode to synchronous to avoid exceptions (white screen and layout errors) caused by the component size exceeding the limit.
- Disable the overscroll mode. When the overscroll mode is enabled and a user slides to the edge of a web page, the web page is displayed with a spring animation, which conflicts with the rebound effect of the Scroll component, affecting user experience.
- Set the attribute of keyboard avoidance mode to RESIZE_CONTENT to disable this mode.
- Do not support page zooming.
- Do not support using the height attribute of the Web component to change the component height.
- Support only component height fitting in the page content, but not width fitting.