Progressive Web App เพิ่มฟีเจอร์มากมายที่เคยสงวนไว้สําหรับแอปพลิเคชันเนทีฟลงในเว็บ ฟีเจอร์ที่โดดเด่นที่สุดอย่างหนึ่งที่เชื่อมโยงกับ PWA คือประสบการณ์การใช้งานแบบออฟไลน์
ประสบการณ์ที่ดีกว่าคือการสตรีมสื่อแบบออฟไลน์ ซึ่งเป็นการเพิ่มประสิทธิภาพที่คุณมอบให้แก่ผู้ใช้ได้หลายวิธี อย่างไรก็ตาม วิธีนี้ทำให้เกิดปัญหาที่ไม่เหมือนใครอย่างแท้จริง เนื่องจากไฟล์สื่ออาจมีขนาดใหญ่มาก คุณจึงอาจสงสัยว่า
- ฉันจะดาวน์โหลดและจัดเก็บไฟล์วิดีโอขนาดใหญ่ได้อย่างไร
- และฉันจะแสดงโฆษณาดังกล่าวต่อผู้ใช้ได้อย่างไร
ในบทความนี้ เราจะพูดถึงคำตอบของคำถามเหล่านี้ พร้อมทั้งอ้างอิง PWA สาธิตของ Kino ที่เราสร้างขึ้น ซึ่งแสดงตัวอย่างการใช้งานจริงเกี่ยวกับวิธีใช้ประสบการณ์การรับชมสื่อสตรีมมิงแบบออฟไลน์โดยไม่ต้องใช้เฟรมเวิร์กฟังก์ชันการทำงานหรือการแสดงผล ตัวอย่างต่อไปนี้มีไว้เพื่อวัตถุประสงค์ด้านการศึกษาเป็นหลัก เนื่องจากในกรณีส่วนใหญ่ คุณควรใช้เฟรมเวิร์กสื่อที่มีอยู่เพื่อให้บริการฟีเจอร์เหล่านี้
การสร้าง PWA ที่มีสตรีมมิงแบบออฟไลน์มีความท้าทายอยู่บ้าง เว้นแต่คุณจะมีเหตุผลทางธุรกิจที่ดีในการพัฒนา 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 เป็นวิธีข้ามเบราว์เซอร์ในการเข้าถึงไฟล์ระยะไกลแบบไม่พร้อมกัน ใน Use Case ของเรา ฟีเจอร์นี้จะช่วยให้คุณเข้าถึงไฟล์วิดีโอขนาดใหญ่เป็นสตรีม และจัดเก็บไฟล์เหล่านั้นเป็นกลุ่มๆ โดยใช้คำขอช่วง HTTP
เมื่ออ่านข้อมูลจำนวนมากด้วย Fetch API ได้แล้ว คุณยังต้องจัดเก็บข้อมูลเหล่านั้นด้วย เป็นไปได้ว่าจะมีข้อมูลเมตาจำนวนมากที่เชื่อมโยงกับไฟล์สื่อ เช่น ชื่อ คำอธิบาย ระยะเวลา หมวดหมู่ ฯลฯ
คุณไม่ได้จัดเก็บแค่ไฟล์สื่อไฟล์เดียว แต่จัดเก็บออบเจ็กต์ Structured และไฟล์สื่อเป็นเพียงพร็อพเพอร์ตี้หนึ่งของออบเจ็กต์ดังกล่าว
ในกรณีนี้ IndexedDB API เป็นโซลูชันที่ยอดเยี่ยมในการจัดเก็บทั้งข้อมูลเมตาและข้อมูลสื่อ ซึ่งสามารถเก็บข้อมูลไบนารีจํานวนมหาศาลได้อย่างง่ายดาย และยังมีดัชนีที่ช่วยให้คุณค้นหาข้อมูลได้อย่างรวดเร็ว
การดาวน์โหลดไฟล์สื่อโดยใช้ Fetch API
เราได้สร้างฟีเจอร์ที่น่าสนใจ 2-3 อย่างเกี่ยวกับ 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 จึงเกิดขึ้นน้อยลง ซึ่งส่งผลให้ประสิทธิภาพการเขียนดีขึ้นอย่างมาก
การแสดงไฟล์สื่อจากพื้นที่เก็บข้อมูลแบบออฟไลน์
เมื่อดาวน์โหลดไฟล์สื่อแล้ว คุณอาจต้องการให้ Service Worker แสดงไฟล์จาก 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 ของ PWA สาธิต Kino เพื่อดูวิธีที่เราอ่านข้อมูลไฟล์จาก IndexedDB และสร้างสตรีมในแอปพลิเคชันจริง
ข้อควรพิจารณาอื่นๆ
เมื่อคุณจัดการกับอุปสรรคหลักๆ ได้แล้ว ก็เริ่มเพิ่มฟีเจอร์ที่ควรมีลงในแอปพลิเคชันวิดีโอได้ ต่อไปนี้คือตัวอย่างฟีเจอร์บางส่วนที่คุณจะเห็นใน PWA ของKino
- การผสานรวม Media Session API ที่ช่วยให้ผู้ใช้ควบคุมการเล่นสื่อได้โดยใช้ปุ่มสื่อแบบฮาร์ดแวร์เฉพาะหรือจากป๊อปอัปการแจ้งเตือนสื่อ
- การแคชเนื้อหาอื่นๆ ที่เชื่อมโยงกับไฟล์สื่อ เช่น คำบรรยายแทนเสียง และรูปภาพโปสเตอร์ โดยใช้ Cache API แบบเดิม
- รองรับการดาวน์โหลดสตรีมวิดีโอ (DASH, HLS) ภายในแอป เนื่องจากไฟล์ Manifest ของสตรีมมักจะประกาศแหล่งที่มาหลายแหล่งที่มีอัตราบิตแตกต่างกัน คุณจึงต้องเปลี่ยนรูปแบบไฟล์ Manifest และดาวน์โหลดสื่อเพียงเวอร์ชันเดียวก่อนที่จะจัดเก็บไว้สำหรับการดูแบบออฟไลน์
หัวข้อถัดไปจะอธิบายเกี่ยวกับการเล่นอย่างรวดเร็วด้วยการโหลดเสียงและวิดีโอล่วงหน้า