Service Worker 缓存/播放视频：什么是最兼容的方法？

发布于 2025-01-11 07:26:40 字数 714 浏览 3 评论 0原文

我目前正在开发一个小型 PWA，其中还应该包含几个本地离线视频文件。（使用预缓存szenario）我已经注意到，此类文件的缓存并不简单，尤其是对于 iOS 设备，因为范围请求有限。我已经尝试过在类似问题中提出的解决方案： PWA - 缓存的视频不会在 Mobile Safari 中播放(11.4) 但对我来说这也不起作用。

我在网上找到的唯一可行的解决方案使用某种形式的 blob 处理与文件 API 或索引数据库存储相结合 https://simpl.info/video/offline/

是否可以缓存整个 HTML5 视频使用用于离线使用的 Service Worker API？

由于这是相当旧的帖子，我想知道哪种策略适合当前的 api（但也针对较旧的 iO 设备），

提前谢谢您。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

娜些时光，永不杰束 2025-01-18 07:26:40

如果您愿意全力使用 Workbox，请参阅“提供缓存的音频和视频”在多个浏览器和平台上应该是准确的。

如果您宁愿自己处理缓存，但只想在创建 HTTP 206 部分响应时获得一些帮助，并且给定传入的 Request 和您从缓存中读取的 Response 对象，您可以只需使用workbox-range-requests 中的 createPartialResponse() 方法，而不使用 Workbox 的其余部分：

import {createPartialResponse} from 'workbox-range-requests';

self.addEventListener('fetch', (event) => {
  const {request} = event;
  if (request.headers.has('range')) {
    event.respondWith((async () => {
      const cache = await caches.open('media');
      const fullResponse = await cache.match(request);
      if (fullResponse) {
        return createPartialResponse(request, fullResponse);
      }
      // If there's a cache miss, fall back to the network.
      return fetch(request);
    })());
  }
});

您还可以查看 createPartialResponse() 方法的源代码（如果您想自己实现）。

If you're willing to go all-in on Workbox, the information at "Serve cached audio and video" should be accurate across multiple browsers and platforms.

If you'd rather handle caching yourself but just want some help creating an HTTP 206 partial response, given an incoming Request and a Response object that you've read from a cache, you can just use the createPartialResponse() method from workbox-range-requests, without using the rest of Workbox:

import {createPartialResponse} from 'workbox-range-requests';

self.addEventListener('fetch', (event) => {
  const {request} = event;
  if (request.headers.has('range')) {
    event.respondWith((async () => {
      const cache = await caches.open('media');
      const fullResponse = await cache.match(request);
      if (fullResponse) {
        return createPartialResponse(request, fullResponse);
      }
      // If there's a cache miss, fall back to the network.
      return fetch(request);
    })());
  }
});

You can also take a look at the createPartialResponse() method's source if you want to implement that yourself.

回复收藏 0 原文

~没有更多了~