第八章 构建更富弹性的应用

8.1 现代网站所面临的网络问题

lie-fi

即使信号满格也无法下载任何东西。

单点故障（SPOF）

浏览器加载过程中，当解析器遇到脚本或 CSS 文件时，必须停止并执行文件，然后才能继续解析 HTML。若网页中引用的第三方网站出现加载时间过长或者宕机，那么网页应用将会收到影响。但第三方应用完全不受控制，可以用 Service Worker 来弹性处理这些问题。

8.2 Service Worker 的营救

在网速慢时返回 408 响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function timeout(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve(new Response('', {
        status: 408,
        statusText: 'Request timed out.'
      }))
    }, delay)
  })
}

self.addEventListener('fetch', function (event) {
  if (/googleapis/.test(event.request.url)) {
    event.respondWith(Promise.race([timeout(3000), fetch(event.request.url)]))
  } else {
    event.respondWith(fetch(event.request))
  }
})

8.3 使用 Workbox

使用 Workbox 处理网络超时

1
2
3
4
5
6
7
8
9
importScripts('workbox-sw.prod.js')

const workboxSW = new self.WorkboxSW()

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)', // 选择缓存任何匹配“googleapis.com”域名的资源
  workboxSW.strategies.cacheFirst({ // 使用缓存优先策略来缓存资源
  cacheName: 'googleapis',
  networkTimeoutSeconds: 4 // 如果网络请求4s还没响应，降级至缓存版本
}))
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。