认识达内从这里开始

任何一项编程开发技术的发展都离不开运行环境和开发工具的辅助支持。今天，我们就通过案例分析来简单了解一下关于web前端开发技术的一些编程工具的使用。

PWA全称ProgressiveWebApps(渐进式Web应用程序)，旨在使用现有的web技术提供用户更优的使用体验。

基本要求

可靠(Reliable)

即使在不稳定的网络环境下，也能瞬间加载并展现

快速响应(Fast)

快速响应，并且有平滑的动画响应用户的操作

粘性(Engaging)

像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过PWAChecklist查看现有的特征。

除以上的基准要求外，还应该包括以下特性：

渐进式-适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的

连接无关性-能够借助ServiceWorker在离线或者网络较差的情况下正常访问

类似应用-由于是在AppShell模型基础上开发，因为应具有NativeApp的交互和导航，给用户NativeApp的体验

持续更新-始终是新的，无版本和更新问题

安全-通过HTTPS协议提供服务，防止窥探和确保内容不被篡改

可索引-应用清单文件和ServiceWorker可以让搜索引擎索引到，从而将其识别为『应用』

粘性-通过推送离线通知等，可以让用户回流

可安装-用户可以添加常用的webapp到桌面，免去去应用商店下载的麻烦

可链接-通过链接即可分享内容，无需下载安装

看起来有点眼花缭乱，这又是一个新的飞起的轮子吗?这里重申一下,PWA背后不是一种新的技术，而是集合当前多种web技术的一种集合。分别利用各自的功能来完成渐进式的整体需求。

离线缓存背景

针对网页的体验，从前到后都做了很多努力，极力去降低响应时间，这里就不表述多样的技术手段。

另一个方向的就是缓存，减少与服务器非必要的交互，不过对于离线的情况下浏览器缓存就无力了，

这样离线缓存的需求就出现了。

离线缓存的历程

web应用在离线缓存发展的过程中也不是一簇而就的，经历了逐渐完善的过程。

初期的解决方案是AppCache(原来阿波罗的h5接入过)

然而，事实证明这是一个失败的尝试，缺陷太多，已经被废弃了。具体可以查看ApplicationCacheisadouchebag

但是方向还是正确的，那就继续孜孜不倦的探索。

workers

持久化先放一边，来谈谈另一个问题

基于浏览器中的javaScript单线程的现实逐渐不能满足现代web需求的现状,例如耗时的计算，用户的交互显然会受影响。

为了将这些耗时操作从主线程中解放出来，早期W3C新增了一个WebWorker的API，可以脱离主线程单独执行，并且可以与主线程交互。

不过WebWorker是临时性的依赖于创建页面，不能满足我们持久化的需求。

冲着这个目标，下面就比较容易解决了，搞个能持久存在的就行了。

在WebWorker的基础上，W3C新增了serviceworker来满足我们持久化的需求。

其生命周期与页面无关，关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动。

作者：潇湘待雨

节选：博客园

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!