PWA 实战读书笔记

Progressive Web App 简称 PWA,是提升 Web 体验的一种新方法,可以给予用户接近原生应用的体验。

几个重要的 PWA 相关内容

  1. Service Worker
  2. 缓存 Cache
  3. 清单文件 manifest.json
  4. 后台同步 BackgroundSync

Service Worker

Service Worker 是 PWA 的核心概念,如果把网络请求比做飞机起飞,那 Service Worker 就是路由请求的空中交通管制员。它可以控制网站每一个请求的处理方式:重定向、从缓存中获取、放弃等。

Service Worker 是用 JavaScript 编写的,但它与之前在网站上运行的 JavaScript 有一些区别:

  1. 运行在它自己的全局上下文中
  2. 不绑定具体的网页
  3. 无法修改网页中的元素,因为它无法访问 DOM
  4. 只能使用 HTTPS

通过 Service Worker 拦截网络的功能,我们可以实现:

  1. 在 Web App 使用应用外壳架构,用缓存加速应用 UI 外壳的加载速度
  2. 给部分请求(如字体)设置超时时间
  3. 按请求头将图片替换成 WebP 的格式

缓存 CacheStorage

CacheStorage 缓存比传统 HTTP 的缓存主要优势在于它对缓存的控制性上做得更好,可以通过编程手段去精准的控制这些缓存。

传统的 HTTP 缓存通过请求头控制文件的过期时间,在过期时间之前浏览器都会使用缓存中的文件,这样会造成我们更新的文件无法在浏览器中得到体现。

使用 Service Worker 配合 CacheStorage 则可以全面的掌控对缓存的操作。

清单文件 manifest.json

清单文件 manifest.json 为 web 提供了添加到手机主屏幕的能力,浏览器内置了添加到主屏幕的功能。

使用清单文件还可以:

  1. 设置浏览器主题
  2. 设置启动样式(通过 display 属性控制 standalone、fullscreen、minimal-ui 等模式)
  3. 监听添加主屏幕事件

ohfree9

继续阅读此作者的更多文章