前言
以前听到的并不是PWA(渐进式网页应用)这么专业的形容词。那个时候其实已经了解到google再做一个东西,之前是这么形容的:不需要操作系统,软件直接在硬件上跑。Surprised,自闭中…
现在也做前端这么久 了,后端也开始涉及的时候。其实很多东西都在一个系列里面,相互支持和依赖。某一天突然看到了PWA这东西,才发现他已经在应用了,还发现有人提供了解决方案。
什么是PWA
PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿的技术或者某一个单一的知识点,我们从英文缩写来看就能看出来,这是一个渐进式的 Web App,是通过一系列新的 Web 特性,配合优秀的 UI 交互设计,逐步的增强 Web App 的用户体验。
什么是SPA
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现UI与用户的交互,其实现在有个高端的词叫路由器。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。得益于ajax,我们可以实现无跳转刷新,又多亏了浏览器的histroy机制,我们用hash的变化从而可以实现推动界面变化。
PWA + SPA有何优势
- https 环境部署。
- 响应式设计,一次部署,可以在移动设备和 PC 设备上运行。
- 在不同浏览器下可正常访问。
- 浏览器离线和弱网环境可极速访问。
- 可以把 App Icon 入口添加到桌面。
- 点击 Icon 入口有类似 Native App 的动画效果。
- 灵活的热更新
模板时代
我为什么称之为模板时代呢?是因为那个时代的的前端被称之为切图崽,后端生成html模板,返回到客户端,在渲染成html网页,啊,慢的一匹。
前后分离的造神时代
传统的MCV形式:前端写html,后端套界面,转成jsp、asp、php等这种模板。前后端分离MVVM形式:前端html5、js、css3、逻辑处理、异步接口获取等。 目前比较主流框架:vue、react、angular等框架。
前后端分离的例子便是SPA(Single-page application),一切用到的展示数据都是后端经由过程异步接口(AJAX/JSONP)的方法供给的,前端尽管展示。
总结
PWA + SPA肯定会创造一个新的web时代,我也非常的期待。他们的结合,高开发效率,低成本,降低维护难度,提高了生命周期等等优点…,估计将是新一个造神的时代来临
Lavas 他是一个解决方案,居然不是一个框架
Lavas解决方案:https://lavas.baidu.com/guide/v1/foundation/lavas-start