หน้านี้ได้รับการแปลโดย Cloud Translation API

PWA พร้อมการสตรีมแบบออฟไลน์

เดเร็ก เฮอร์แมน

Jaroslav Polakovič

Progressive Web App มีฟีเจอร์มากมายที่ก่อนหน้านี้สงวนไว้สำหรับแอปพลิเคชันที่มาพร้อมเครื่องลงในเว็บ หนึ่งในฟีเจอร์ที่โดดเด่นที่สุดเกี่ยวกับ PWA คือประสบการณ์การใช้งานแบบออฟไลน์

แต่ถ้าจะให้ดีจะใช้สตรีมมิงสื่อแบบออฟไลน์ ซึ่งเป็นการเพิ่มประสิทธิภาพที่คุณสามารถนำเสนอให้กับผู้ใช้ได้หลายวิธีด้วยกัน แต่วิธีนี้สร้างปัญหาที่เป็นเอกลักษณ์อย่างแท้จริง โดยไฟล์สื่ออาจมีขนาดใหญ่มาก คุณอาจสงสัยว่า

ฉันจะดาวน์โหลดและจัดเก็บไฟล์วิดีโอขนาดใหญ่ได้อย่างไร
และฉันจะแสดงต่อผู้ใช้ได้อย่างไร

ในบทความนี้ เราจะพูดถึงคำตอบสำหรับคำถามเหล่านี้ พร้อมกับพูดถึง PWA ของการสาธิต Kino ที่เราสร้างขึ้นเพื่อยกตัวอย่างที่สามารถนำไปใช้ได้จริงสำหรับการนำประสบการณ์การสตรีมสื่อออฟไลน์ไปใช้โดยไม่ต้องใช้เฟรมเวิร์กการทำงานหรือการนำเสนอใดๆ ตัวอย่างต่อไปนี้มีไว้เพื่อวัตถุประสงค์ด้านการศึกษาเป็นหลัก เพราะในกรณีส่วนใหญ่คุณควรใช้กรอบสื่อที่มีอยู่เพื่อให้บริการฟีเจอร์เหล่านี้

การสร้าง PWA ด้วยสตรีมมิงแบบออฟไลน์ก็มีความท้าทาย เว้นแต่คุณจะมีกรณีทางธุรกิจที่ดีสำหรับการพัฒนาตนเอง บทความนี้จะอธิบายเกี่ยวกับ API และเทคนิคที่ใช้เพื่อให้ผู้ใช้ได้รับประสบการณ์สื่อออฟไลน์คุณภาพสูง

การดาวน์โหลดและการจัดเก็บไฟล์สื่อขนาดใหญ่

โดยปกติแล้ว Progressive Web App จะใช้ Cache API ที่สะดวกทั้งการดาวน์โหลดและจัดเก็บเนื้อหาที่จําเป็นเพื่อมอบประสบการณ์การใช้งานแบบออฟไลน์ เช่น เอกสาร สไตล์ชีต รูปภาพ และอื่นๆ

ตัวอย่างการใช้ Cache API ภายใน Service Worker มีดังนี้

const cacheStorageName = 'v1';

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheStorageName).then(function(cache) {
      return cache.addAll([
        'index.html',
        'style.css',
        'scripts.js',

        // Don't do this.
        'very-large-video.mp4',
      ]);
    })
  );
});

แม้ว่าตัวอย่างข้างต้นจะทำงานในด้านเทคนิคได้ แต่การใช้ Cache API มีข้อจำกัดหลายประการที่ทำให้การใช้งานไฟล์ขนาดใหญ่นั้นไม่เป็นผลดีนัก

ตัวอย่างเช่น Cache API จะไม่ดำเนินการต่อไปนี้

หยุดชั่วคราวและกลับมาดาวน์โหลดต่อได้โดยง่าย
ช่วยให้คุณติดตามความคืบหน้าของการดาวน์โหลด
เสนอวิธีตอบสนองคำขอช่วง HTTP อย่างเหมาะสม

ปัญหาทั้งหมดนี้เป็นข้อจำกัดที่ค่อนข้างร้ายแรงสำหรับแอปพลิเคชันวิดีโอใดๆ มาดูตัวเลือกอื่นๆ ที่อาจเหมาะสมกว่ากัน

ปัจจุบัน Fetch API เป็นวิธีข้ามเบราว์เซอร์ในการเข้าถึงไฟล์ระยะไกลแบบอะซิงโครนัส ในกรณีการใช้งานของเรา คุณจะสามารถเข้าถึงไฟล์วิดีโอขนาดใหญ่เป็นสตรีม และจัดเก็บไฟล์วิดีโอขนาดใหญ่ทีละส่วนโดยใช้คำขอช่วง HTTP

ตอนนี้เมื่อคุณอ่านข้อมูลกลุ่มใดกลุ่มหนึ่งด้วย Fetch API ได้แล้ว คุณยังต้องจัดเก็บข้อมูลเหล่านั้นด้วย เป็นไปได้ที่จะมีข้อมูลเมตาจำนวนมากที่เชื่อมโยงกับไฟล์สื่อของคุณ เช่น ชื่อ คำอธิบาย ความยาวของรันไทม์ หมวดหมู่ ฯลฯ

คุณไม่ได้จัดเก็บเพียงไฟล์สื่อเดียว แต่จัดเก็บออบเจ็กต์ที่มีโครงสร้าง และไฟล์สื่อเป็นเพียงพร็อพเพอร์ตี้หนึ่งเท่านั้น

ในกรณีนี้ IndexedDB API เป็นโซลูชันที่ยอดเยี่ยมในการจัดเก็บทั้งข้อมูลสื่อและข้อมูลเมตา สามารถเก็บข้อมูลไบนารีจำนวนมากได้อย่างง่ายดาย และยังมีดัชนีที่ช่วยให้คุณค้นหาข้อมูลได้อย่างรวดเร็ว

การดาวน์โหลดไฟล์สื่อโดยใช้ Fetch API

เราได้สร้างฟีเจอร์ที่น่าสนใจ 2 รายการเกี่ยวกับ Fetch API ใน PWA สาธิตของเรา ซึ่งเราเรียกว่า Kino โดยซอร์สโค้ดจะเป็นแบบสาธารณะ ดังนั้นโปรดตรวจสอบได้ตามต้องการ

ความสามารถในการหยุดการดาวน์โหลดที่ไม่สมบูรณ์ชั่วคราวและกลับมาดาวน์โหลดต่อได้
บัฟเฟอร์ที่กำหนดเองสำหรับจัดเก็บกลุ่มข้อมูลไว้ในฐานข้อมูล

ก่อนจะแสดงวิธีนำฟีเจอร์เหล่านั้นมาใช้งาน ก่อนอื่นเราจะให้สรุปสั้นๆ เกี่ยวกับวิธีใช้ Fetch API เพื่อดาวน์โหลดไฟล์

/**
 * Downloads a single file.
 *
 * @param {string} url URL of the file to be downloaded.
 */
async function downloadFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  do {
    const { done, dataChunk } = await reader.read();
    // Store the `dataChunk` to IndexedDB.
  } while (!done);
}

สังเกตเห็นว่า await reader.read() อยู่ในลูปใช่ไหม นั่นคือวิธีที่คุณจะได้รับข้อมูลจำนวนมากจากสตรีมที่อ่านได้ เมื่อสตรีมมาถึงเครือข่าย พิจารณาว่าสิ่งนี้มีประโยชน์อย่างไร คุณสามารถเริ่มประมวลผลข้อมูลได้ก่อนที่ข้อมูลจะส่งมาจากเครือข่ายเสียอีก

กำลังกลับมาดาวน์โหลดต่อ

เมื่อการดาวน์โหลดหยุดชั่วคราวหรือถูกขัดจังหวะ กลุ่มข้อมูลที่เข้ามาจะได้รับการจัดเก็บไว้อย่างปลอดภัยในฐานข้อมูล IndexedDB จากนั้นคุณจะสามารถแสดงปุ่ม ดาวน์โหลดต่อในแอปพลิเคชัน เนื่องจากเซิร์ฟเวอร์ PWA สำหรับการสาธิต Kino รองรับคำขอช่วง HTTP ที่ดำเนินการดาวน์โหลดต่อจึงค่อนข้างตรงไปตรงมา ดังนี้

async downloadFile() {
  // this.currentFileMeta contains data from IndexedDB.
  const { bytesDownloaded, url, downloadUrl } = this.currentFileMeta;
  const fetchOpts = {};

  // If we already have some data downloaded,
  // request everything from that position on.
  if (bytesDownloaded) {
    fetchOpts.headers = {
      Range: `bytes=${bytesDownloaded}-`,
    };
  }

  const response = await fetch(downloadUrl, fetchOpts);
  const reader = response.body.getReader();

  let dataChunk;
  do {
    dataChunk = await reader.read();
    if (!dataChunk.done) this.buffer.add(dataChunk.value);
  } while (!dataChunk.done && !this.paused);
}

บัฟเฟอร์การเขียนที่กำหนดเองสำหรับ IndexedDB

ขั้นตอนการเขียนค่า dataChunk ลงในฐานข้อมูล IndexedDB นั้นง่ายมาก ค่าเหล่านั้นเป็นอินสแตนซ์ ArrayBuffer อยู่แล้ว ซึ่งเก็บได้ใน IndexedDB โดยตรง เราจึงสร้างออบเจ็กต์ของรูปร่างที่เหมาะสมและจัดเก็บได้

const dataItem = {
  url: fileUrl,
  rangeStart: dataStartByte,
  rangeEnd: dataEndByte,
  data: dataChunk,
}

// Name of the store that will hold your data.
const storeName = 'fileChunksStorage'

// `db` is an instance of `IDBDatabase`.
const transaction = db.transaction([storeName], 'readwrite');
const store = transaction.objectStore(storeName);
const putRequest = store.put(data);

putRequest.onsuccess = () => { ... }

แม้ว่าวิธีนี้จะได้ผล แต่คุณอาจพบว่าการเขียน IndexedDB ของคุณช้ากว่าการดาวน์โหลดอย่างมาก ซึ่งไม่ใช่เพราะการเขียน IndexedDB ทำงานช้า แต่เป็นเพราะเรากำลังเพิ่มค่าใช้จ่ายในการดำเนินงานจำนวนมากโดยการสร้างธุรกรรมใหม่ให้กับทุกกลุ่มข้อมูลที่เราได้รับจากเครือข่าย

ส่วนที่ดาวน์โหลดไว้อาจมีขนาดเล็กและส่งออกจากสตรีมได้อย่างต่อเนื่องอย่างรวดเร็ว คุณต้องจำกัดอัตราการเขียน IndexedDB ใน PWA ของการสาธิต Kino จะใช้บัฟเฟอร์การเขียนระหว่างกลาง

เมื่อชิ้นส่วนข้อมูลมาถึงจากเครือข่าย เราจะเพิ่มข้อมูลดังกล่าวลงในบัฟเฟอร์ก่อน หากข้อมูลขาเข้ามีไม่พอดี เราจะล้างบัฟเฟอร์ทั้งหมดลงในฐานข้อมูลและล้างข้อมูลก่อนที่จะเพิ่มข้อมูลที่เหลือต่อท้าย การเขียน IndexedDB ของเราเกิดขึ้นไม่บ่อยนัก ซึ่งส่งผลให้การเขียนมีประสิทธิภาพดีขึ้นอย่างมาก

การแสดงไฟล์สื่อจากพื้นที่เก็บข้อมูลออฟไลน์

เมื่อดาวน์โหลดไฟล์สื่อแล้ว คุณอาจต้องการให้โปรแกรมทำงานของบริการส่งไฟล์ดังกล่าวจาก IndexedDB แทนการดึงข้อมูลไฟล์จากเครือข่าย

/**
 * The main service worker fetch handler.
 *
 * @param {FetchEvent} event Fetch event.
 */
const fetchHandler = async (event) => {
  const getResponse = async () => {
    // Omitted Cache API code used to serve static assets.

    const videoResponse = await getVideoResponse(event);
    if (videoResponse) return videoResponse;

    // Fallback to network.
    return fetch(event.request);
  };
  event.respondWith(getResponse());
};
self.addEventListener('fetch', fetchHandler);

แล้วสิ่งที่ต้องทำใน getVideoResponse()

เมธอด event.respondWith() ต้องการออบเจ็กต์ Response เป็นพารามิเตอร์
เครื่องมือสร้าง Response() บอกให้เราทราบว่าเราสามารถใช้ออบเจ็กต์หลายประเภทเพื่อสร้างอินสแตนซ์ Response ได้แก่ Blob, BufferSource, ReadableStream และอื่นๆ
เราต้องการออบเจ็กต์ที่ไม่ได้เก็บข้อมูลทั้งหมดของหน่วยความจำไว้ในหน่วยความจำ เราจึงอาจจะอยากเลือก ReadableStream

นอกจากนี้ เนื่องจากเรากำลังจัดการกับไฟล์ขนาดใหญ่ และต้องการอนุญาตให้เบราว์เซอร์ขอเฉพาะบางส่วนของไฟล์ที่ต้องการในปัจจุบันเท่านั้น เราจึงต้องใช้การสนับสนุนพื้นฐานบางอย่างสำหรับคำขอช่วง HTTP

/**
 * Respond to a request to fetch offline video file and construct a response
 * stream.
 *
 * Includes support for `Range` requests.
 *
 * @param {Request} request  Request object.
 * @param {Object}  fileMeta File meta object.
 *
 * @returns {Response} Response object.
 */
const getVideoResponse = (request, fileMeta) => {
  const rangeRequest = request.headers.get('range') || '';
  const byteRanges = rangeRequest.match(/bytes=(?<from>[0-9]+)?-(?<to>[0-9]+)?/);

  // Using the optional chaining here to access properties of
  // possibly nullish objects.
  const rangeFrom = Number(byteRanges?.groups?.from || 0);
  const rangeTo = Number(byteRanges?.groups?.to || fileMeta.bytesTotal - 1);

  // Omitting implementation for brevity.
  const streamSource = {
     pull(controller) {
       // Read file data here and call `controller.enqueue`
       // with every retrieved chunk, then `controller.close`
       // once all data is read.
     }
  }
  const stream = new ReadableStream(streamSource);

  // Make sure to set proper headers when supporting range requests.
  const responseOpts = {
    status: rangeRequest ? 206 : 200,
    statusText: rangeRequest ? 'Partial Content' : 'OK',
    headers: {
      'Accept-Ranges': 'bytes',
      'Content-Length': rangeTo - rangeFrom + 1,
    },
  };
  if (rangeRequest) {
    responseOpts.headers['Content-Range'] = `bytes ${rangeFrom}-${rangeTo}/${fileMeta.bytesTotal}`;
  }
  const response = new Response(stream, responseOpts);
  return response;

ลองดูซอร์สโค้ด Service Worker สำหรับการสาธิตของ Kino เพื่อดูวิธีอ่านข้อมูลไฟล์จาก IndexedDB และสร้างสตรีมในแอปพลิเคชันจริง

ข้อควรพิจารณาอื่นๆ

เมื่อมีอุปสรรคหลักขวางกั้น ตอนนี้คุณสามารถเริ่มเพิ่มฟีเจอร์ดีๆ ที่มีให้แอปพลิเคชันวิดีโอได้แล้ว ตัวอย่างฟีเจอร์ที่คุณจะพบใน PWA ของการสาธิต Kino มีดังนี้

การผสานรวม Media Session API ที่อนุญาตให้ผู้ใช้ควบคุมการเล่นสื่อโดยใช้คีย์สื่อฮาร์ดแวร์เฉพาะหรือจากป๊อปอัปการแจ้งเตือนสื่อ
การแคชเนื้อหาอื่นๆ ที่เชื่อมโยงกับไฟล์สื่อ เช่น คำบรรยายและภาพโปสเตอร์โดยใช้ Cache API เวอร์ชันเก่า
การรองรับการดาวน์โหลดสตรีมวิดีโอ (DASH, HLS) ภายในแอป เนื่องจากโดยทั่วไปไฟล์ Manifest ของสตรีมจะประกาศแหล่งที่มาของอัตราบิตที่ต่างกันหลายแหล่ง คุณจึงต้องแปลงไฟล์ Manifest และดาวน์โหลดสื่อเพียงเวอร์ชันเดียวก่อนที่จะจัดเก็บไว้เพื่อดูแบบออฟไลน์

ถัดไป คุณจะได้ดูข้อมูลเกี่ยวกับการเล่นอย่างรวดเร็วด้วยเสียงและวิดีโอที่โหลดล่วงหน้า