---
title: Webview Site
---
# Webview Site
A webview site is a static file site released along with the mini-program, reducing the burden on developers to deploy static HTML files and supporting offline mode technology. Developers can use the webview component within the mini-program to load webview sites, achieving seamless integration between the mini-program and the webview site.
## Features of Webview Site
- Supports offline mode to improve access speed
- Supports communication with the mini-program logic layer
## Using the Webview Site
### 1. Declare the Webview Site File Directory
Declare the `webviewRoot` field in `app.json` to specify the webview site file directory, as shown below:
```json5
// app.json
{
"pages": [
"pages/index/index"
],
"webviewRoot": "my-webview"
}
```
The mini-program will deploy and load the webview site files from the directory specified by the `webviewRoot` field.
The directory structure is as follows:
```bash
├── app.json
├── pages
│ └── index
│ ├── index.js
│ ├── index.json
│ ├── index.tyml
│ └── index.tyss
└── my-webview
├── index.html
└── index.js
```
> Note: The `webviewRoot` field can only be declared once in `app.json` and must use a relative path, not an absolute path. Pay attention to the directory relationship.
### 2. Use the Webview Component to Load the Webview Site
The site protocol is `webview://`. Use the webview component in the mini-program page as shown below:
```html
```
The `src` attribute value starts with `webview://` followed by the directory specified by the `webviewRoot` field and the path to the webview site file.
- `bind:message` event: Communication between the webview site and the mini-program logic layer
- `bind:load` event: Webview site loaded successfully
- `bind:error` event: Webview site failed to load
### 3. Communication Between Webview Site and Mini-Program Logic Layer
Communication between the webview site and the mini-program logic layer is achieved through [@tuya-miniapp/jssdk](https://www.npmjs.com/package/@tuya-miniapp/jssdk).
```html
Webview Site
```
```js | pure
// my-webview/index.js
// Send a message to the logic layer
window.ty.miniProgram.postMessage({
data: {
msg: 'Sent to logic layer -> ' + Date.now()
}
})
// Receive messages from the logic layer
window.ty.miniProgram.onMessage(function(event){
const messageData = event.data;
// messageData = {msg: 'Sent to H5 -> 13991818111'}
})
```
```js | pure
// pages/index/index.js
Page({
onReady() {
if (ty.createWebviewContext) {
this.webviewContext = ty.createWebviewContext('yourId');
}
},
// Receive messages from the webview site
message(event) {
const messageData = event.detail
// messageData = { msg: 'Sent to logic layer -> 13891819819'}
},
// Send a message to the webview site
sendMessage() {
this.webviewContext.postMessage({
data: {
msg: 'Sent to H5 -> ' + Date.now(),
},
});
}
})
```
## Webview Site File Types
Supported file extensions: `.jpg` `.jpeg` `.png` `.gif` `.bmp` `.ico` `.tiff` `.svg` `.ttf` `.woff` `.woff2` `.json` `.html` `.htm` `.js` `.css` `.mp3` `.mp4`.
Although the webview site supports many file types, not all files should be placed in the webview site. Developers need to choose appropriate file types and sizes based on actual situations. Large files can slow down the mini-program loading speed, affecting user experience or even preventing upload to the mini-program platform.
## Requirements
- Tuya MiniApp IDE `>= 0.5.10`
- Base library version `>= 2.14.2`
- Container version `>= 3.12.0`
- @tuya-miniapp/jssdk `>= 0.1.2`
## Notes
1. Files in the webview site directory do not support using mini-program components such as `view` and `scroll-view`, only static HTML tags are supported.
2. Developers must ensure the legality of webview site files, which must not contain illegal, pornographic, or violent content, otherwise, the mini-program platform will ban them.
3. JavaScript scripts must be secure and free of malicious code, or the mini-program platform will ban them.
4. JavaScript scripts must ensure compatibility, for example, using ES5 syntax instead of ES6 syntax, to avoid compatibility issues on mobile browsers.