ऑफ़लाइन स्ट्रीमिंग की सुविधा वाला PWA

Derek Herman

Jaroslav Polakovič

प्रोग्रेसिव वेब ऐप्लिकेशन में वेब के लिए ऐसी कई सुविधाएं उपलब्ध हैं जो पहले सिर्फ़ नेटिव ऐप्लिकेशन के लिए उपलब्ध थीं. पीडब्ल्यूए की सबसे खास सुविधाओं में से एक है, ऑफ़लाइन अनुभव.

ऑफ़लाइन स्ट्रीमिंग मीडिया का अनुभव और भी बेहतर होगा. इसे अपने उपयोगकर्ताओं को कई तरीकों से ऑफ़र किया जा सकता है. हालांकि, इस वजह से एक अलग तरह की समस्या पैदा हो जाती है—मीडिया फ़ाइलें बहुत बड़ी हो सकती हैं. इसलिए, आपके मन में ये सवाल आ सकते हैं:

• मैं बड़ी वीडियो फ़ाइल कैसे डाउनलोड और सेव करूं?
• और मैं इसे उपयोगकर्ता को कैसे दिखाऊं?

इस लेख में, हम इन सवालों के जवाबों के बारे में चर्चा करेंगे. साथ ही, हमने Kino का डेमो PWA बनाया है. इसकी मदद से, आपको यह पता चलेगा कि किसी भी फ़ंक्शनल या प्रज़ेंटेशनल फ़्रेमवर्क का इस्तेमाल किए बिना, ऑफ़लाइन स्ट्रीमिंग मीडिया का अनुभव कैसे दिया जा सकता है. यहां दिए गए उदाहरण मुख्य रूप से शिक्षा के मकसद से हैं. ज़्यादातर मामलों में, इन सुविधाओं को उपलब्ध कराने के लिए, आपको किसी मौजूदा मीडिया फ़्रेमवर्क का इस्तेमाल करना चाहिए.

अगर आपके पास अपना पीडब्ल्यूए बनाने के लिए कोई अच्छा कारोबारी मामला नहीं है, तो ऑफ़लाइन स्ट्रीमिंग की सुविधा के साथ पीडब्ल्यूए बनाना मुश्किल हो सकता है. इस लेख में, आपको उन एपीआई और तकनीकों के बारे में जानकारी मिलेगी जिनका इस्तेमाल करके, उपयोगकर्ताओं को अच्छी क्वालिटी का ऑफ़लाइन मीडिया अनुभव दिया जाता है.

बड़ी मीडिया फ़ाइल डाउनलोड और सेव करना

आम तौर पर, प्रोग्रेसिव वेब ऐप्लिकेशन, ऑफ़लाइन अनुभव देने के लिए ज़रूरी दस्तावेज़, स्टाइलशीट, इमेज वगैरह को डाउनलोड करने और सेव करने के लिए, Cache API का इस्तेमाल करते हैं.

किसी सर्विस वर्कर में कैश एपीआई इस्तेमाल करने का बुनियादी उदाहरण यहां दिया गया है:

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:

• डाउनलोड को आसानी से रोकने और फिर से शुरू करने की सुविधा
• डाउनलोड की प्रोग्रेस को ट्रैक करने की सुविधा
• एचटीटीपी रेंज के अनुरोधों का सही जवाब देने का तरीका बताएं

ये सभी समस्याएं किसी भी वीडियो ऐप्लिकेशन के लिए काफ़ी गंभीर सीमाएं हैं. आइए, कुछ ऐसे अन्य विकल्पों की समीक्षा करें जो आपके लिए ज़्यादा सही हो सकते हैं.

फ़िलहाल, Fetch API, एसिंक्रोनस तरीके से रिमोट फ़ाइलों को ऐक्सेस करने का क्रॉस-ब्राउज़र तरीका है. हमारे इस्तेमाल के उदाहरण में, यह आपको बड़ी वीडियो फ़ाइलों को स्ट्रीम के तौर पर ऐक्सेस करने की अनुमति देता है. साथ ही, एचटीटीपी रेंज अनुरोध का इस्तेमाल करके, उन्हें चंक्स के तौर पर धीरे-धीरे स्टोर करता है.

अब Fetch API की मदद से, डेटा के हिस्सों को पढ़ा जा सकता है. हालांकि, आपको उन्हें सेव भी करना होगा. ऐसा हो सकता है कि आपकी मीडिया फ़ाइल में बहुत सारा मेटाडेटा हो. जैसे: नाम, ब्यौरा, रनटाइम की अवधि, कैटगरी वगैरह.

इसका मतलब है कि सिर्फ़ एक मीडिया फ़ाइल को सेव नहीं किया जा रहा है, स्ट्रक्चर्ड ऑब्जेक्ट को स्टोर किया जा रहा है. साथ ही, मीडिया फ़ाइल भी इसकी एक प्रॉपर्टी है.

इस मामले में, IndexedDB API, मीडिया डेटा और मेटाडेटा, दोनों को सेव करने का बेहतरीन समाधान उपलब्ध कराता है. यह बड़ी संख्या में बाइनरी डेटा को आसानी से सेव कर सकता है. साथ ही, इसमें इंडेक्स भी होते हैं, जिनकी मदद से डेटा को तेज़ी से लुकअप किया जा सकता है.

Fetch API का इस्तेमाल करके मीडिया फ़ाइलें डाउनलोड करना

हमने अपने डेमो PWA में, फ़ेच एपीआई के लिए कुछ दिलचस्प सुविधाएं बनाई हैं. इसे हमने Kino नाम दिया है. इसका सोर्स कोड सार्वजनिक है. इसलिए, इसे देखें.

• डाउनलोड को रोकने और फिर से शुरू करने की सुविधा.
• डेटाबेस में डेटा के हिस्सों को सेव करने के लिए कस्टम बफ़र.

इन सुविधाओं को लागू करने का तरीका दिखाने से पहले, हम आपको एक बार फिर से बताएंगे कि आप फ़ाइलें डाउनलोड करने के लिए फे़च एपीआई का इस्तेमाल कैसे कर सकते हैं.

/**
 * 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 डेटाबेस में सुरक्षित तरीके से सेव कर लिए जाएंगे. इसके बाद, अपने ऐप्लिकेशन में डाउनलोड फिर से शुरू करने के लिए बटन दिखाया जा सकता है. Kino के डेमो PWA सर्वर पर, एचटीटीपी रेंज के अनुरोध काम करते हैं. इसलिए, डाउनलोड की प्रोसेस को फिर से शुरू करना कुछ हद तक आसान होता है:

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 के लिए कस्टम राइट बफ़र

पेपर पर, किसी IndexedDB डेटाबेस में dataChunk वैल्यू को लिखने की प्रोसेस बहुत आसान है. ये वैल्यू पहले से ही 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 लिखने की दर को सीमित करना होगा. Kino के डेमो PWA में, हम इंटरमीडियरी राइट बफ़र लागू करके ऐसा करते हैं.

नेटवर्क से डेटा के हिस्से आने पर, हम उन्हें पहले अपने बफ़र में जोड़ते हैं. अगर आने वाला डेटा सही नहीं है, तो हम पूरे बफ़र को डेटाबेस में फ़्लश करते हैं और बाकी डेटा को जोड़ने से पहले उसे हटा देते हैं. इस वजह से, 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 को चुनना चाहें.

साथ ही, हम बड़ी फ़ाइलों के साथ काम कर रहे हैं और हम चाहते थे कि ब्राउज़र सिर्फ़ उस फ़ाइल के हिस्से का अनुरोध कर सकें जिसकी उन्हें फ़िलहाल ज़रूरत है. इसलिए, हमें एचटीटीपी रेंज अनुरोधों के लिए कुछ बुनियादी सहायता लागू करनी पड़ी.

/**
 * 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;

Kino के पीडब्ल्यूए का सेवा वर्कर का सोर्स कोड देखें और जानें कि हम IndexedDB से फ़ाइल डेटा को कैसे पढ़ रहे हैं और किसी असली ऐप्लिकेशन में स्ट्रीम कैसे बना रहे हैं.

दूसरी ज़रूरी बातें

अब आपके पास अपने वीडियो ऐप्लिकेशन में, कुछ ऐसी सुविधाएं जोड़ने का विकल्प है जो आपके लिए काम की हो सकती हैं. यहां उन सुविधाओं के कुछ उदाहरण दिए गए हैं जो आपको Kino के डेमो PWA में मिलेंगी:

• Media Session API इंटिग्रेशन. इसकी मदद से आपके उपयोगकर्ता, खास हार्डवेयर मीडिया बटन या मीडिया सूचना पॉप-अप का इस्तेमाल करके, मीडिया वीडियो चलाने की सुविधा को कंट्रोल कर सकते हैं.
• मीडिया फ़ाइलों से जुड़ी अन्य ऐसेट को कैश मेमोरी में सेव करना. जैसे, सबटाइटल और पोस्टर इमेज. इसके लिए, Cache API का इस्तेमाल किया जाता है.
• ऐप्लिकेशन में वीडियो स्ट्रीम (DASH, HLS) डाउनलोड करने की सुविधा. आम तौर पर, स्ट्रीम मेनिफ़ेस्ट में अलग-अलग बिटरेट के कई सोर्स होते हैं. इसलिए, आपको मेनिफ़ेस्ट फ़ाइल को बदलना होगा और उसे ऑफ़लाइन देखने के लिए सेव करने से पहले, मीडिया का सिर्फ़ एक वर्शन डाउनलोड करना होगा.

अगले लेख में, ऑडियो और वीडियो को पहले से लोड करके तेज़ी से चलाने के बारे में बताया जाएगा.