个人很少看视频进修新手艺，以为和读文档比起来看视频太浪费时间了。然则近来在看google I/O 2016的时刻，发明引见Progressive Web Apps的一段视频很不错。近50分钟的内容，深入浅出，为了轻易分享和今后回忆，决议将其内容整顿成文章。
什么是Progressive Web App(PWA)
字面上就是先进的web app。下面是官方诠释：
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They’re reliable, fast, and engaging.
Chrome在PC上有Chrome App，觉得PWA和这个有些相似：在桌面上的，能自力运转的web app。但PWA不仅如此，先看看结果对照图：
可以看到，明显的不一样，在offline情况下，PWA依旧可以衬着界面，读取历史数据。别的，和现在的add to home screen不一样的是，这里已不是简朴的在桌面上增加一个网页的快捷体式格局，而更像一个webview包装的app，供应了加载过场页面，而且地址栏也没有了。
那它究竟供应些什么样的新手艺让PWA和原生的媲美呢？答案是运用Offline First开辟形式和Service Worker手艺，优化了web app的体验。
Service Worker
就像曾的Web Worker一样，这是一个新的浏览器特征，它的诠释以下：
Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.
简朴来讲它就是个代办，在收集和浏览器之间，以事宜的体式格局让开辟者参与，来完成资本和数据的掌握。
开始运用
和Web Worker相似的，Service Worker中的逻辑须要零丁放在一个JS文件中，然后在当前页面经由历程其URL举行建立。
当register以后，你的service worker剧本将阅历download, install and activate历程，接着就进入和它的事宜驱动阶段。
Chrome调试东西中也增加有Service Worker相干的选项：
事宜驱动
在视频中简朴触及到了以下事宜：
install: 当被下载的worker文件是新的时刻（第一次下载，或许和老的worker内容不一样），会举行装置，触发install事宜
activate: 在worker装置以后，而且假如没有老的worker，或许老的worker已没有页面在运用它的时刻，就会激活新的worker
fetch: 任何浏览器发送要求时都是触发fetch事宜，例以下载html页面，js文件，css或许font等，固然另有ajax要求
更多事宜请参考这里
比方，在fetch事宜中阻拦一切的要求，设置response为Hello：
或许说是，阻拦404，显现为一个特定的画面：
再看下面这个更有意义一点的例子：
这里在install的时刻，将offline的提醒页面和它的css文件缓存在cache中（假如缓存满了或许其他缘由致使放入缓存失利，那末这个worker将不会被install，以后也就不会掌握页面）。然后在以后的fetch中，举行要求阻拦：
假如要求在cache中，返回cache中的response，不然经由历程收集去fetch这个request的response
假如一个navigate范例的request（HTML跳转的要求）fetch失利，即offline，那末去缓存中读取我们的offline提醒页面作为response
相似的，我们可以将app的页面做成一个壳，数据去由javascript去添补，如许的话，我们就可以经由历程service worker将页面缓存起来，翻开app的时刻从当地缓存中读取衬着页面，然后经由历程收集去要求数据。这个历程，基础就和native app一直了。（这里太合适那些MVVM的框架了！）
背景同步
在视频的末了，还展现了一个background sync的功用，这个功用很壮大（sync也是Service Worker的一个事宜）。其展现的例子结果相似于，在微信上发送信息，就算没有收集，发送信息在页面上的操纵都能完成，但由于收集缘由不可以真正的发送出去。那这时刻假如收集信号恢复了，就算页面关掉，这些被信息会在背景被发送出去。
其他
增加到桌面
有了上面的页面离线机制，我们像native接近了一步，然则还不够。下面的内容则针对app翻开的历程，举行优化和接近native。
经由历程manifest文件举行设置，能设置：
桌面图片，桌面显现称号
翻开app时的过场页面中的的图标，称号，背景色
翻开app后的初始化URL（这里的URL和在你add to home screen时的URL可以不一样）
等等
经由历程上面的设置，我们的PWA就可以想native app一样翻开，而且在不管有收集，没有收集或许收集环境很差的情况下，都再也看不到那让人讨厌的，只能看着地址栏不停加载的空缺页面。
前端存储
可以经由历程浏览器端的DB存储app的一些历史数据，比方聊天记录，然后在Service Worker中给对应的数据要求举行来接，那末在下次翻开时，就算没有收集，在页面从缓冲中衬着以后，也可以从DB中读取一部分历史数据。如许一来，这真的native app就没有区别了。
兼容性
现在基础只要chrome支撑。
