前端新趋势--PWA
PWA
PWA
A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction
PWA-Feature
- Fullscreen Experience
- Add to home screen
- Offline Mode
- Message Push
- Payout API
- Share
How to build a PWA
- build a app shell
- make your app quick load and cached immediately
- https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
How to build a PWA
Declare an app manifest with a manifest.json file
How to build a PWA
-
create a service worker js file
- service worker is a web proxy , it run in browser process. so your website must support https for safety
PWA-Yeamobi
PWA-Yeamobi
PWA-Demo
PWA-Eleme
- 生产环境实践
- 降级方案
- 错误统计
- 适合MPA的模式
- APP SHell
- 多手机浏览器兼容测试
小程序
小程序
小程序是一种不需要下载、安装即可使用的应用，它实现了触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。
小程序
小程序
- 技术
- 利用前端技术栈（js，WXML 和 WXSS）搭建了Mvvm风格的技术框架，提供了数据响应管理以及整个页面管理功能。并提供了许多基础的组件以及微信原生API
-
生态
- 基于微信, 打造线上-线下
小米直达服务
直达服务实际上是运行在一个由直达服务的核心引擎管理的安卓进程上，使用安卓原生渲染，所以从开放能力、性能、内存、权限控制和管理方面的设计理念等同于原生应用。
小米直达服务
小米直达服务
小米直达服务--秒开
小米直达服务--秒开
小米直达服务
https://dev.mi.com/console/app/newapp.html
PWA VS 小程序 VS 小米直达号
- 生态体系
- 各自的平台 产业链
- 发展前景
- 一次开发多端运行
- 融合app和web各有优势，屏蔽不足
- 新技术场景探讨
- 下一代的交互设计方式
Q&A
