कैश मेमोरी में सेव किया गया ऑडियो और वीडियो दिखाया जा रहा है

कुछ ब्राउज़र, मीडिया ऐसेट के अनुरोधों को मैनेज करने के तरीके में कुछ गड़बड़ियां हैं. इसका मतलब है कि <video> और <audio> एलिमेंट के src एट्रिब्यूट में दिया गया यूआरएल. इस वजह से, वर्कबॉक्स को कॉन्फ़िगर करने के दौरान खास तरीके से विज्ञापन दिखाने में गड़बड़ी हो सकती है.

समस्या

ऑडियो और वीडियो ऐसेट दिखाने से जुड़ी, ब्राउज़र में होने वाली समस्या की बारीकियों के बारे में ज़्यादा जानकारी GitHub पर मौजूद इस समस्या के बारे में चर्चा में दी गई है. पूरी जानकारी जटिल है, लेकिन खास बातें ये हैं:

• वर्कबॉक्स को Range अनुरोध के हेडर का पालन करने के लिए कहा जाना चाहिए. इसके लिए, हैंडलर के तौर पर इस्तेमाल की जाने वाली रणनीति के लिए, workbox-range-requests मॉड्यूल का इस्तेमाल करना चाहिए.
• <video> या <audio> एलिमेंट को crossorigin एट्रिब्यूट वाले सीओआरएस मोड में ऑप्ट इन करना होगा.
• अगर आपको कैश मेमोरी से मीडिया भेजना है, तो आपको पहले से यह बता देना चाहिए कि इसे कैश मेमोरी में सेव किया गया है. ऐसा करने के लिए, पहले से कैश मेमोरी में सेव करें या cache.add() की मदद से ऐसा किया जा सकता है. इसके अलावा, वर्कबॉक्स-रेसिपी में WarStrategycache तरीके का इस्तेमाल करके ऐसा किया जा सकता है. मीडिया ऐसेट को रनटाइम के दौरान स्ट्रीम करते समय, कैश मेमोरी में सेव नहीं किया जा सकता. ऐसा इसलिए, क्योंकि वीडियो चलाने के दौरान नेटवर्क से सिर्फ़ कुछ कॉन्टेंट फ़ेच किया जाता है.

मीडिया ऐसेट के लिए सही मार्कअप से शुरुआत करके, वर्कबॉक्स में इन ज़रूरी शर्तों को पूरा करने का तरीका यहां बताया गया है:

<!-- In your page: -->

<!-- You need to set `crossorigin`, even for same-origin URLs! -->
<video src="movie.mp4" crossorigin="anonymous"></video>
<audio src="song.mp3" crossorigin="anonymous"></audio>

इसके बाद, अपने सर्विस वर्कर में, मीडिया ऐसेट को हैंडल करने के लिए workbox-range-request प्लगिन का इस्तेमाल करें. इसके लिए, यह तरीका अपनाएं:

// sw.js
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {RangeRequestsPlugin} from 'workbox-range-requests';

// In your service worker:
// It's up to you to either precache, use warmRuntimeCache, or
// explicitly call cache.add() to populate the cache with media assets.
// If you choose to cache media assets up front, do so with care,
// as they can be quite large and exceed storage quotas.
//
// This route will go to the network if there isn't a cache match,
// but it won't populate the cache at runtime because the response for
// the media asset will be a partial 206 response. If there is a cache
// match, then it will properly serve partial responses.
registerRoute(
  ({request}) => {
    const {destination} = request;

    return destination === 'video' || destination === 'audio'
  },
  new CacheFirst({
    cacheName: 'your-cache-name-here',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200]
      }),
      new RangeRequestsPlugin(),
    ],
  }),
);

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