跳到主要内容

谈谈PWA

PWA全称Progressive Web App，即渐进式WEB应用

  • PWA是离线缓存的web的应用，网页浏览器进行访问，不需要下载安装
  • Service Worker和Cache API来实现离线缓存和离线访问功能
  • Service Worker在web worker的基础上增加了离线缓存的能力
  • 节省流量，一些静态资源都已经缓存在了本地，离线就可以访问，无需再次下载
  • 自动更新内容，当重新联网的时候，会自动获取最新的数据，保证用户看到最新的信息

PWA 的主要 技术点​

  • 离线可用 ( Service Worker )
  • 主屏图标 ( App Manifest )
  • 通知 ( Push API & Notification API )

Service Worker如何实现PWA离线缓存​

要使用Cache API实现离线缓存和访问，需要在Service Worker中编写缓存逻辑

  • 1、在Service Worker脚本中，使用caches.open()方法创建一个新的缓存。

  • 2、在caches.open()方法的回调函数中，使用cache.addAll()或cache.put()方法将您的静态资源添加到缓存中。cache.addAll()方法接受一个URL数组，将这些URL指定的文件添加到缓存中。cache.put()方法接受一个Request对象和一个Response对象，将Response对象添加到缓存中

  • 3、在Service Worker脚本中，使用fetch事件拦截网络请求，并在缓存中查找相应的资源。如果缓存中存在匹配的资源，则返回缓存的响应。如果缓存中不存在匹配的资源，则继续从网络请求资源。

  • 4、配置Service Worker的生命周期，使其在更新时自动清除旧的缓存。在Service Worker更新时，您可以使用caches.delete()方法从缓存中删除旧的缓存。

PWA的离线缓存的场景​

  • 快应用