近年来web技术爆发式发展

• webpack、rollup等打包工具

• Babel、PostCSS的转译工具

• TypeScript等壳转译为javascript的编程语言

• react、Angular、vue等现代web前端框架

• 同构JavaScript

Web应用体验依然不佳

• 网页资源下载带来的网络延迟

• Web应用依赖于浏览器作为入口

• 没有好的离线使用方案

• 没有好的消息通知方案

PWA的出现

• 显著提高应用加载速度

• Web应用可以在离线环境下使用

• Web应用能够像原生应用一样被添加到主屏

• web应用能在未被激活时发起推送通知

• web应用与操作系统集成能力进一步提高

PWA的优势

• 根据提示或手动添加到主屏幕

• 全屏幕打开，不受困于浏览器的UI

• 无法访问网络时，可以像原生应用一样照常执行

• 像原生一样发起推送通知

PWA模型将继约20年前横空出世的Ajax与约10年前风靡移动互联网的响应式设计一样，掀起web应用模型的第三次革命技术，将web技术带进一个全新的时代

PWA关键技术

• Web App Manifest

  1.承载着web应用与操作系统集成能力的重任

• Service Worker

  1.让web应用离线使用的第一次尝试

  2.通过向LocalServer模块提交一个缓存文件清单来实现离线支持

• Application Cache

  1.让web应用离线使用的第二次尝试

  2.在LocalServer的基础上进一步发展

  3.缺点：不可编程、无法清理缓存、几乎没有路由机制

Service Worker迎来曙光

1.让web应用离线使用的第三次尝试

2.可编程的web worker

3.像一个位于浏览器与网络之间的客户代理，可以拦截、处理、响应流经的HTTP请求

4.配合Cache Storage api,可以自由管理HTTP请求文件粒度的缓存

Service Worker的生命周期

Service Worker的安装

self.oninstall = e => {

  e.waitUntil(
    caches.open('installation')
      .then(cache => cache.addAll(
        [
          './',
          './styles.css',
          './script.js'
        ]
      ))
  )

}

Service Worker使用离线缓存

self.onfetch = e => {
  const fetched = fetch(e.request)
  const cached = caches.match(e.request)

  e.respondWith(
    fetched.catch(_=>cached)  
  )
}

Service Worker的缓存策略

Service Worker总结

Service Worker是支撑PWA的最核心的技术，将带来离线优先的架构革命

Push Notification

1. Push Api的出现让推送服务具备了web应用推送消息的能力

2. Push Api不依赖web应用与浏览器UI存活，所以即使在web应用与浏览器未被用户打开时，也可以通过后台进程推送消息并调用Notification API向用户发出通知

总结

PWA的技术未来可期，作为前端，我们很有必要掌握这门技术，在未来的几年里，必然成为你的核心竞争力，老铁们，赶紧学起来

cloud.tencent.com/developer/s…