最近在思考 Web 环境下，如何能向客户端开发的思维一般，做出交互体验良好的 Mobile App。毕竟 Web 开发调试方便，且用户接入的门槛极低，只要有一个网址就行，没有太多限制，也算能进一步实现 PWA 的愿景。
其中一个比较大的问题点是，从内容向发展而来的 HTML5 语言带着许多历史包袱，在 CSS 基础不好的情况下，很容易踩坑，比如说如何去精确把控浏览器的 Viewport、盒子的设计以及各种不同的布局上下文、滚动区域控制，且有许多浏览器兼容相关的问题需要处理，以及路由、页面栈、不同的屏幕兼容等，属于是一个手艺活，背后也有着不少隐性知识与技巧所在。之前写过一篇 博文 讨论过交互模式这方面。
PWA 与小程序的一个比较大的差别也在于，小程序借助于 Native 能力，把 Web 本身孱弱的 Mobile 多页交互做了补充，开发者只需要关注单个页面的布局就可以，上手门槛也随之大大降低。但大部分时候并不需要太多 native 能力，也不想依赖微信等超级 App，这时候模拟 native 交互的 Ionic Framework 便映入眼帘。
Ionic 最大的特点也是以 Web 为中心，然后交互的层面模拟实现 Native 的页面栈、页面、Tabs 布局、各种常用的全局组件等。由于组件是基于 Web Components 实现，可以很方便整合到 React / Vue / Angular 的体系，并且框架本身提供了对应的脚手架，上手难度也非常低。并且针对 Native API 的扩展还设计了一个针对性的 runtime，Capacitor，可以按需集成。
例子 Demo：https://ionic-react-conference-app.firebaseapp.com/
从练手的视角来看，Ionic 做内容向的 App 比较合适，所以第一步我打算先从 flarum 入手，尝试把一些必要组件分拆出来，通过多个 Iframe 的方式嵌入到 ionic app 的体系，对应页面间通信，跨页面数据同步的能力。
接下来再整合一下 Wiki，再规划起来，最终形态估计可以是一个比较轻量的社区 App，进一步可能会做一些类似 Wiki 互动、活动、课程打卡等等的能力。
谍照：
