ارائه فایل صوتی و تصویری در حافظه پنهان، ارائه فایل صوتی و تصویری در حافظه پنهان

در نحوه رسیدگی برخی از مرورگرها به درخواست‌های دارایی‌های رسانه-یعنی URL مشخص شده در ویژگی src عناصر <video> و <audio> - که می‌تواند منجر به رفتار نادرست سرویس دهی شود، مگر اینکه مراحل خاصی را هنگام پیکربندی Workbox انجام دهید، وجود دارد.

مشکل

پیچیدگی‌های مشکلی که مرورگرها در مورد ارائه دارایی‌های صوتی و تصویری دارند در این بحث مربوط به GitHub به تفصیل توضیح داده شده است. تصویر کامل پیچیده است، اما نکات کلیدی عبارتند از:

• باید به Workbox گفته شود که با استفاده از ماژول workbox-range-requests برای استراتژی مورد استفاده به عنوان کنترل کننده به سرصفحه های درخواست Range احترام بگذارد.
• عناصر <video> یا <audio> باید با ویژگی crossorigin وارد حالت CORS شوند.
• اگر می‌خواهید رسانه‌ها را از حافظه پنهان ارائه کنید، باید به صراحت آن را از قبل به حافظه پنهان اضافه کنید. شما می توانید این کار را با پیش کش کردن یا با cache.add() یا با استفاده از متد warmStrategyCache در جعبه دستور العمل ها انجام دهید. ذخیره کردن دارایی رسانه در هنگام پخش جریانی در زمان اجرا کار نخواهد کرد، زیرا فقط محتوای جزئی در طول پخش از شبکه واکشی می شود.

در اینجا نحوه تطبیق این الزامات در 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(),
    ],
  }),
);

با این رویکرد، می‌توانید اطمینان حاصل کنید که دارایی‌های رسانه‌ای وب‌سایتتان به‌درستی توسط کارمند خدماتتان واکشی و ذخیره می‌شوند، در حالی که درخواست‌های محدوده و سایر مشکلات احتمالی مرتبط با درخواست‌های رسانه را در نظر می‌گیرید.