hybrid app

Flutter

Flutter 最大的改进就是自己重做了渲染引擎去渲染页面,将混合应用的渲染性能推向了另一个高度。
跨平台:ios android linux fushia
对比 rn:生成原生APP,但以view为基础嵌入(复杂的时候层层嵌套)
flutter:在渲染技术上,选择了自己实现(GDI)

weex

weex是一套跨平台移动开发工具,主要解决频繁发版和多端研发痛点,同时解决前端语言性能差和显示结果受限的问题。开发者只需要在自己的app中嵌入weex的sdk, 就可以通过撰写htmL/css/js开发native级weex界面,weex界面的生成码是一段很小的js,可以像发布网页一样轻松部署在服务端,在app中请求执行。

不过weex的生态确实不太行,据本人向其他部门使用了weex的同事了解,weex坑比较多,文档写的不好,写不全和该写没写的,标签的限制比较多,比如文本必须只能text标签,安卓和ios实际可能会有样式兼容问题。
实际开发后上线的情况是,打包的时候文件名经过加密,因为是嵌入app中的,必须考虑安全加密,配置好统跳系统,app拦截到请求的url,会去加载相关weex的js文件,渲染在app中的weexview中。对于h5是webview,weex则是weexview。可以一个界面上有多个webview和weexview。

react native

facebook开源的一套用于开发移动端跨平台APP的技术框架
why rn?

  • 传统开发痛点 (开发成本高 安卓/ios代码复用率低 无法动态更新(应用市场))
  • rn 优点 (跨平台 低投入高回报 性能高不是在webkit上浏览器运行js,而是自己构建一个渲染js的引擎 支持动态更新 开发成本低 代码复用率高)

PWA & service worker

PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。

web应用体验依然不佳

  • 网页资源下载带来的网络延迟
  • web应用依赖于浏览器作为入口
  • 没有好的离线应用方案
  • 没有好的消息通知方案

pwa 的出现:

  • 显著提高以用下载速度
  • 在离线环境下使用
  • 像原生一样添加到主屏
  • 未被激活时发起推送通知
  • web应用与操作系统集成能力进一步提高

核心技术
serviceWorker

  • 像一个位于浏览器与网络之间的客户端代理,可以拦截/处理/相应流经的http请求
  • 配合Cache Storage API, 可以自由管理HTTP请求文件粒度的缓存。

来自MDN解释:
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。