ক্যাশে অডিও এবং ভিডিও পরিবেশন করা, ক্যাশে অডিও এবং ভিডিও পরিবেশন করা

কিছু ব্রাউজার মিডিয়া সম্পদের জন্য অনুরোধগুলি কীভাবে পরিচালনা করে তাতে কিছু বলি আছে—অর্থাৎ, <video> এবং <audio> উপাদানগুলির src অ্যাট্রিবিউটে নির্দিষ্ট করা URL—যা ওয়ার্কবক্স কনফিগার করার সময় নির্দিষ্ট পদক্ষেপ না নেওয়া পর্যন্ত ভুল পরিবেশন আচরণের দিকে পরিচালিত করতে পারে।

সমস্যা

অডিও এবং ভিডিও সম্পদ পরিবেশন করার ক্ষেত্রে ব্রাউজারগুলির সমস্যাগুলির জটিলতাগুলি এই GitHub সমস্যা আলোচনায় বিশদভাবে ব্যাখ্যা করা হয়েছে। সম্পূর্ণ চিত্রটি জটিল, তবে মূল পয়েন্টগুলি হল:

• ওয়ার্কবক্সকে অবশ্যই হ্যান্ডলার হিসাবে ব্যবহৃত কৌশলটিতে workbox-range-requests মডিউল ব্যবহার করে Range অনুরোধ শিরোনামকে সম্মান করতে বলা উচিত।
• <video> বা <audio> উপাদানগুলিকে crossorigin বৈশিষ্ট্য সহ CORS মোডে নির্বাচন করতে হবে।
• আপনি যদি ক্যাশে থেকে মিডিয়া পরিবেশন করতে চান, তাহলে আপনাকে স্পষ্টভাবে এটিকে আগে থেকেই ক্যাশে যুক্ত করতে হবে। আপনি precaching, অথবা cache.add() এর মাধ্যমে, অথবা ওয়ার্কবক্স-রেসিপিতে warmStrategyCache পদ্ধতি ব্যবহার করে এটি করতে পারেন। মিডিয়া অ্যাসেটটি রানটাইমে স্ট্রিম হওয়ার কারণে ক্যাশে করা কাজ করবে না, কারণ প্লেব্যাকের সময় নেটওয়ার্ক থেকে শুধুমাত্র আংশিক বিষয়বস্তু আনা হয়।

মিডিয়া সম্পদের জন্য সঠিক মার্কআপ দিয়ে শুরু করে ওয়ার্কবক্সে কীভাবে এই প্রয়োজনীয়তাগুলিকে মিটমাট করা যায় তা এখানে রয়েছে:

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

এই পদ্ধতির সাহায্যে, আপনি নিশ্চিত করতে পারেন যে আপনার ওয়েবসাইটের মিডিয়া সম্পদগুলি আপনার পরিষেবা কর্মী দ্বারা সঠিকভাবে আনা এবং ক্যাশে করা হয়েছে, যখন পরিসরের অনুরোধগুলি এবং মিডিয়া অনুরোধগুলির সাথে সম্পর্কিত অন্যান্য সম্ভাব্য ত্রুটিগুলিকে বিবেচনায় নিয়ে।