PWA初探

1、背景

从2018年到如今，做为号称下一代web应用模型的PWA，逐渐成为一个各大前端厂商争先涉足，布局的一个新的技术。

PWA是小程序的“老祖宗”？  PWA例子：微博、饿了么

2、什么是PWA

　　PWA是Progressive Web App的英文缩写，就是渐进式加强web应用。是Google在2016年提出的概念。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。

　　引荐他人的理解：

　　（1）通常写web应用，在pc上是没有缓存的，打开页面时去请求数据。没法离线使用

　　（2）web应用没有像app同样的小图标放在桌面，一点开就进入了应用；而是经过打开浏览器输入网址，移动端须要借助浏览器入口；

　　（3）不能像app同样给用户推送消息，像微博会跟你推送说谁评论了你的微博之类的功能。

 

而Google推出的PWA，就是具备这些特色，是咱们的web应用，可以像一款app同样使用。而且对比app，他不用复杂的安装，也不用下载更新包，刷新页面就能够了。

 

　　玩PWA，操做上能够理解成“将网页书签添加到手机屏幕”这样一个过程。

　　先访问微博的pwa网址：https://m.weibo.cn/beta?pwa=1。

       

 

3、核心功能

　　PWA并非单指某一项技术，能够理解为一种思想和概念，目的就是对比原生app，将web网站经过一系列的web技术去优化它，提高其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app同样的感受。

　　核心功能：

　　（1）Web App Manifest

　　（2）Service Worker：用户离线时，能够从缓存中启动web应用

　　（3）Cache API缓存

　　（4）Push&Notification推送与通知

 

4、特色

（1）可靠性————即便在不肯定的网络条件下也不会受影响。

　　当用户从主屏幕启动时，service work能够当即加载渐进式Web应用程序，彻底不受网络环境的影响。service work就像一个客户端代理，它控制缓存以及如何响应资源请求逻辑，经过预缓存关键资源，能够消除对网络的依赖，确保为用户提供即时可靠的体验。

（2）快速

　　据统计，若是站点加载时间超过 3s，53% 的用户会放弃等待。页面展示以后，用户指望有平滑的体验，过渡动画和快速响应。

（3）沉浸式体验————感受就像是设备上的原生应用程序，具备沉浸式的用户体验。

　　渐进式Web应用程序能够安装并在用户的主屏幕上，无需从应用程序商店下载安装。他们提供了一个沉浸式的全屏幕体验，甚至能够从新与用户接触的Web推送通知。

 

　　Web应用程序中，能够经过manifest.json控制应用程序的显示方式和启动方式，指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向，甚至能够指定是否显示浏览器Chrome。

 

5、优点

（1）无需安装、无需下载，只要你输入网址访问一次，而后将其添加到设备桌面就能够继续使用了。

（2）发布不须要提交到app商店审核。

（3）更新迭代版本不须要审核，不须要从新发布审核。

（4）现有的web网页都可以经过改进称为PWA，能很快转型，上线，实现业务、获取流量。

（5）不须要开发Android和IOS两套不一样的版本。

6、劣势

（1）浏览器对技术的支持还不够全面，不是每款浏览器都能100%的支持全部PWA。

（2）PWA如今尚未那么火。

 

 PWA对于开发者来讲，最重要的意义就在于绕过APP商店的审核直接推给用户。若是普及，这将威胁到平台权威，APP商店确定不干。

 

 

 

SPA单页应用

　　定义：单页应用（SPA）将全部的活动局限于一个web页面中，仅在该Web页面初始化时加载相应的HTML、Javascript、CSS。一旦页面加载完成了，SPA不会由于用户的操做而进行页面的从新加载或跳转。取而代之的是利用js动态的变换HTML的内容，从而实现UI与用户的交互。因为避免了页面的从新加载，SPA能够提供较为流畅的用户体验。

 

优势：

（1）因为避免了页面的从新加载，SPA能够提供较为流畅的用户体验。得益于Ajax，能够实现无跳转刷新。因为与浏览器的hsitory机制，可使用hash的变化从而推进界面的变化。

（2）先后端分离

（3）减轻服务器压力

 

缺点：

（1）不容易管理，且不安全

（2）由于没了一页页地网页给搜索引擎的爬虫来抓取，因此在搜索引擎优化上须要花费额外的功夫。