下一代的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的最核心的技术,将带来离线优先的架构革命

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章