《Progressive Web Apps》读书笔记十

var stream = new ReadableStream({
    start(controller) {},
    pull(controller) {},
    cancel(controller) {}
}, queuingStrategy)

self.addEventListener('fetch', event => {
  event.respondWith(htmlStream()) // 进入fetch事件并用HTML流进行响应
})

function htmlStream() {
  const html = 'html goes here...' // 将要返回的HTML字符串

  const stream = new ReadableStream({ // 创建一个ReadableStream
    start: controller => {
      const encoder = new TextEncoder() // 需要使用TextEncoder将文本转换成字节
      let pos = 0
      let chunkSize = 1

      function push() { // 将结果推送到Web Stream中
        if (pos >= html.length) { // 检查是否超出了HTML的长度，如果超出，则关闭controller
          controller.close()
          return
        }

        controller.enqueue(encoder.encode(html.slice(pos, pos + chunkSize))) // 将下一个HTML块编码并放入队列中

        pos += chunkSize
        setTimeout(push, 50) // 强制延迟500ms，以降低渲染速度
      }

      push() // 开始推送流
    }
  })

  return new Response(stream, { // 返回流的结果作为新的Response对象
    headers: {
      'Content-Type': 'text/html'
    }
  })
}

const cacheName = 'latestNews-v1'

self.addEventListener('install', event => {
  self.skipWaiting() // Service Worker 应该尽早开始控制不受前一个 Service Worker 控制的客户端

  event.waitUntil( // 在安装阶段缓存资源
    caches.open(cacheName)
      .then(cache => cache.addAll([
        './js/main.js',
        './images/newspaper.svg',
        './css/site.css',
        './header.html', // 在安装阶段缓存 header.html 和 footer.html
        '/footer.html',
        'offline-page.html'
      ]))
  )
})

self.addEventListener('activate', event => {
  self.clients.claim() // 强制激活当前的 Service Worker
})

function getQueryString(field, url = window.location.href) { // 从查询字符串中获取指定字段的值
  const reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i')
  const result = reg.exec(url)
  return result ? result[1] : null
}

self.addEventListener('fetch', event => { // 进入 fetch 事件
  const url = new URL(event.request.url)

  if (url.pathname.endsWith('/article.html')) { // 是否请求文章的路由
    const articleId = getQueryString('id') // 获取文章的 ID
    const articleUrl = `data-${articleId}` // 建立文章的 URL

    event.respondWith(streamArticle(articleUrl)) // 使用流结果进行响应
  }
})

function streamArticle(url) {
  try {
    new ReadableStream({}) // 检查当前浏览器是否支持 Web Stream API
  } catch (e) {
    return new Response('Streams not supported')
  }

  const stream = new ReadableStream({ // 创建 ReadableStream
    start(controller) {
      const startFetch = caches.match('header.html') // 从缓存中获取 header.html
      const bodyData = fetch(`data/${url}.html`) // 使用 Fetch API 来获取页面的主体部分
        .catch(() => new Response('Body fetch failed'))
      const endFetch = caches.match('footer.html') // 从缓存中获取 footer.html

      function pushStream(stream) { // 使用 pushStream 函数来将下一个数据块推送到流中
        const reader = stream.getReader()
        function read() {
          return reader.read().then(result => {
            if (result.done) return
            controller.enqueue(result.value)
            return read()
          })
        }

        return read()
      }

      startFetch // 开始获取标题数据并将其推送到流中
        .then(response => pushStream(response.body))
        .then(() => bodyData)
        .then(response => pushStream(response.body)) // 开始获取正文数据并将其推送到流中
        .then(() => endFetch)
        .then(response => pushStream(response.body)) // 开始获取页脚数据并将其推送到流中
        .then(() => controller.close())
    }
  })

  return new Response(stream, { // 创建 Response 对象并返回流的结果
    headers: { 'Content-Type': 'text/html' }
  })
}