PWA(渐进式网页应用) + SPA（单页应用）的一个简单的思考

前言

以前听到的并不是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