下一代的web应用-pwa,它将成为你未来的核心竞争力!

·  阅读 277

近年来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.jpeg

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的缓存策略

cache.jpeg

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…

分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改