Phân phát âm thanh và video được lưu vào bộ nhớ đệm

Có một số hạn chế trong cách một số trình duyệt xử lý yêu cầu đối với nội dung đa phương tiện, tức là URL được chỉ định trong thuộc tính src của các phần tử <video> và <audio>. Điều này có thể dẫn đến hành vi phân phát không chính xác trừ phi bạn thực hiện các bước cụ thể khi định cấu hình Workbox.

Vấn đề

Những vấn đề phức tạp của các trình duyệt gặp phải liên quan đến việc phân phát thành phần âm thanh và video sẽ được giải thích chi tiết trong nội dung thảo luận về vấn đề này trên GitHub. Bức tranh toàn cảnh phức tạp, nhưng những điểm chính là:

  • Hộp công việc phải được yêu cầu tuân theo tiêu đề của yêu cầu Range bằng cách sử dụng mô-đun workbox-range-requests cho chiến lược dùng làm trình xử lý.
  • Các phần tử <video> hoặc <audio> cần chọn sử dụng chế độ CORS bằng thuộc tính crossorigin.
  • Nếu muốn phân phát nội dung nghe nhìn từ bộ nhớ đệm, bạn nên thêm rõ ràng vào bộ nhớ đệm trước. Bạn có thể thực hiện việc này bằng cách lưu vào bộ nhớ đệm, hoặc sử dụng cache.add(), hoặc sử dụng phương thức khởi động chiến lược trong công thức hộp công việc. Bạn không thể lưu thành phần nội dung nghe nhìn vào bộ nhớ đệm khi nội dung đó được phát trực tuyến trong thời gian chạy, vì chỉ một phần nội dung được tìm nạp từ mạng trong khi phát.

Dưới đây là cách đáp ứng những yêu cầu này trong Workbox, bắt đầu với việc đánh dấu phù hợp cho nội dung đa phương tiện:

<!-- 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>

Sau đó, trong trình chạy dịch vụ, hãy sử dụng trình bổ trợ workbox-range-request để xử lý các thành phần nội dung nghe nhìn cho phù hợp:

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

Với phương pháp này, bạn có thể đảm bảo rằng nội dung đa phương tiện trên trang web của mình được tìm nạp và lưu vào bộ nhớ đệm đúng cách bởi trình chạy dịch vụ, trong khi vẫn tính đến các yêu cầu về phạm vi và các lỗi có thể xảy ra khác liên quan đến yêu cầu nội dung đa phương tiện.