w3cTrain

Keep Moving

在开始和 Service Workers 打招呼之前,我们先来对比一下 Native App 和 Web 在性能和可及性之间的差异。

差异
为了结合两者的优点,各大厂商推出了各自的解决方案,Hibrid、Weex、Reative Native 等等。
Google 团队推出了 Progressive Web Apps。

Progressive Web Apps 能做什么

  • Notification
  • Add To Home Screen
  • Instant Loading
  • Fast
  • Responsive
  • Secure

Anyways,这是理想状态,在中国难免会遇上障碍,我们还是必须走中国特色 ** 道路。

  • Notification 依赖于 Google Push API,除非你能让用户都翻过 GFW。
  • 国内 Android 自定义程度极高,大部分厂商自定义桌面,自带浏览器也没有 Add To Home Screen 选项。

上面这两个功能都没法用在正式环境上,不过还好对注重用户体验的我们来说,它们并非必要。接下来看 PWA 的核心,也是这篇文章的重点,Service Worker。

初识 Service Worker

  • Service Worker 是运行在浏览器后台的脚本,运行环境与普通的脚本不同,它不能直接参与页面交互。
  • Service Worker 类似于网络代理,可以用来请求转发,伪造响应。
  • Service Worker 可以用来拦截网络请求,处理推送消息以及执行其他任务。
  • Service worker 权限很高,所以需要运行在 HTTPS 上,防止被人从中攻击,Github Page 支持 HTTPS,是块极好的试验田。

网络代理

Service Worker 生命周期

生命周期

Service Worker 基于事件监听机制,在没有接受到事件时,它几乎不占内存。Service Worker 可接收的事件主要有下面几个:

install 事件通常在 ServiceWorker 首次运行的时候被激活,通常在这个时间点缓存资源,以便于用户在下次访问时能提速。
activate 事件在一次成功的 install 之后被触发。
fetch 事件能截取当前 ServiceWorker 作用域下发出的请求,这时候我们可以拦截请求并作出响应。
message 事件在接收到消息的时候执行。

Read More...
1