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

近年来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…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券