PWA Plus


flutter 版的 Cordova

目的:让 WebApp 运行在所有平台,是一套完整跨平台 App 开发方案。虽然,PWA 已经解决了一些问题,比如通知,安装到主屏幕,但是暂时还不能和操作系统以及其他 APP 完美集成。PWA Plus 可以扩充 WebAPI,让 WebApp 也能使用一些只有 Native App 才有的功能。

类似 Xcode 的开发工具

特点:
  • 开发者不需要接触原生平台的开发,只需要关注 Web App

好处:
  • 你只需要招 Web 前端工程师
  • 你也许只需要开发一款 WebApp
  • 你做的任一种优化将快速的应用到所有平台
  • 你的 App 将自动更新(App Store 不允许这样的 App)

调研:

桌面端: Electron App = Nodejs API + Electron API + Web API
  • File System
  • 协议处理 // http url 只能在浏览器中打开

// 像 Lantern 一样直接在浏览器中显示 UI 也是可行的

移动端/小程序:原生平台代码 + WebView
  • Splash Screen(使用 web manifest)
  • 支付(AliPay,Weixin)
  • 第三方登陆(QQ,Weixin,Weibo,Facebook)
  • 分享(源/目标)(QQ,Weixin,Weibo,Facebook)
  • 解决部分兼容性问题,Chrome <-> Safari(如 IOS 下的 vibrate,状态栏占位
  • 读取 SMS
  • Contacts API
  • File System?
  • Clipboard 访问?
  • GPS 定位(Web 好像是 IP 地址定位)?
  • Notification?

小程序可能不能隐藏 Host App UI(?),所以小程序中的 WebApp 很可能需要重新设计
// 多分支+平台文件区分隔离处理平台间的交互差异

移动端使用已有框架调用 WebView 的问题:
  • React Native 启动速度慢,Android 多实例请求的 Bug
  • Flutter 虽然统一了 Android 和 IOS 代码,但是插件生态环境还不成熟
  • Cordova 可靠性、稳定性不够

TODO:
  • icon 设计
  • pwap-cli 根据配置文件生成目标平台的代码
  • JSAPI 兼容 WebAPI 的实现
  • IOS Webview 根据配置文件生成 IOS 平台的代码
  • Android Webview 根据配置文件生成 Android 平台的代码
  • WeChat Webview 根据配置文件生成小程序平台的代码
  • Best Practices 前端开发的最佳实践,一些场景场景的解决方案,对标原生端性能
  • Awesome pwap 使用 pwap 的例子