docs(console-web): explain iframe retention lifecycle

- document opt-in page policy and the bounded cache
- define activate, deactivate, and dispose responsibilities
- explain hidden-frame state and command handling
- provide a Solid activity accessor example
This commit is contained in:
Maofeng
2026-07-30 09:43:27 +08:00
parent 1b2c50c951
commit 93f4a505ba
+36 -4
View File
@@ -11,9 +11,37 @@ index.html / src/host
└── src/pages/<view>
```
Host 始终只保留一个 iframe。切换一级页面时,Host 先发送 `dispose`,再销毁 iframe
并创建新的文档。页面所属的 Solid reactive owner、事件监听器、第三方 UI 库和页面局部
缓存会随文档一起释放,避免长期导航后把页面资源都留在同一个 JavaScript realm 中。
普通页面切换时,Host 先发送 `dispose`,再销毁 iframe 并创建新的文档。页面所属的
Solid reactive owner、事件监听器、第三方 UI 库和页面局部缓存会随文档一起释放,避免
长期导航后把所有页面资源都留在同一个 JavaScript realm 中。
需要保留表单、筛选器或昂贵页面状态时,可以在 `src/host/app.tsx``NAVIGATION`
配置中设置 `keepAlive: true`。当前服务版本和运行设置启用保活。Host 会隐藏而不是销毁
这些 iframe,并保持其 DOM、JavaScript realm 和 Solid 状态:
- 离开时发送 `deactivate`,页面应暂停轮询、媒体、动画或其它后台工作。
- 返回时发送 `activate`,恢复页面任务,iframe 的 `instance``timeOrigin` 不变。
- LRU 淘汰、关闭 Host 或普通页面离开时发送 `dispose`,随后销毁文档。
- `MAX_KEEP_ALIVE_IFRAMES` 限制保活文档数量;活动的非保活页面最多临时多占一个 iframe。
页面可以使用 `PageProps.active` 响应生命周期,也可以监听
`wasmeld:activate``wasmeld:deactivate``wasmeld:dispose` 或统一的
`wasmeld:lifecycle` 事件。页面自身不应通过 `display: none` 判断状态,因为 Host
可能改变具体的隐藏实现。
```tsx
export default function StreamPage(props: PageProps) {
createEffect(() => {
if (props.active()) {
resumeStream();
} else {
pauseStream();
}
});
onCleanup(closeStream);
// ...
}
```
iframe 是资源生命周期边界,不是安全边界。Host 和 Page 都是 Wasmeld 自己构建并同源
发布的可信代码;Wasm 服务的安全边界仍然在后端 Wasmtime Sandbox 和 Host Capability
@@ -22,7 +50,7 @@ Registry 中。
## 目录
```text
src/host/ 常驻 Host Shell 和 Host-owned dialogs
src/host/ 常驻 Host Shell、iframe LRU 和 Host-owned dialogs
src/components/ui/ 跨页面复用的无业务 UI
src/lib/ API client、领域模型和纯函数
src/primitives/ Solid reactive primitivesSolid 不使用 React Hooks 约定
@@ -35,6 +63,10 @@ src/styles/ Tailwind v4 theme 和共享组件样式
删除字段、改变字段语义或产生不兼容状态时必须升级版本,并让两侧同时发布。消息接收端
同时检查 origin、source、channel 和 version,不接收任意窗口的控制命令。
Host 会继续向隐藏的保活页面发送只读状态快照,但拒绝其管理命令。这样页面可以在恢复时
立即显示最新 Runtime 状态,同时停用后的定时器不能意外触发注册、启停或 Deployment
操作。
## 开发
先在仓库根目录启动 Rust 后端: