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

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

समस्या

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

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

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

<!-- 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(),
    ],
  }),
);

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