如何在 Android/iOS 上的 webview/移动浏览器中最好地预缓存视频？

Question

描述

随着同步 的快速移除XMLHttpRequest（即：Chrome 88 正在移除它），我正在寻找下一个预缓存视频的最佳替代方法。

“同步 XMLHttpRequest 是一个可怕的想法” - 从来没有人说过

是的，您适合大多数情况，但这是不同的。

之前

在android和ios 上，我工作的公司有一个 SDK，可以在后台打开webview，将 HTML 注入其中并等待onload事件触发。当 webview 准备好向用户显示时，这会通知 SDK。

这是必要的，当视频播放有NO缓冲任何可能的最佳体验。

这就是为什么当 webview 在后台加载时，我们使用 XMLHttpRequest 同步预缓存视频（因此，延迟onload事件被触发）。

可能的解决方案

我们考虑了一些不同的解决方案，它们各有优缺点；这里有一些：

1. 通过预加载内容<link rel="preload" ... />
2. 将视频嵌入到index.htmlbase64页面内（如果视频重量为2-3Mo，则转换为base64后重量会增加30%）

(1) 是最干净的方法，但由于各种原因需要对我们的后端进行一些重大更改。也不保证在浏览器/网络视图出现时视频将被完全缓存。不能保证预缓存的优先级在 web 视图和移动浏览器中是相同的。用户可以停用预缓存功能，例如，在他们的 Chrome 配置中。当连接为 4G 或更低时，它也不起作用（叹气）。

(2) 是一种笨拙且未经优化的方法，但与 (1) 相比，实施起来相对简单

题

在 webview/移动浏览器的后台预缓存视频的下一个最佳方法是什么：

1. 保证（或严格保证）播放视频时无缓冲
2. 在 webview/浏览器中完成
3. 是（最好）跨移动浏览器/webview 兼容
4. （最好是不需要）延迟onload事件被触发

注意：并非所有用户都有 4g 或 wifi 连接。 注2：标签处于自动播放状态

Answer 1

新的解决方案是使用Cache API

caches = window.caches;
caches.open("app-assets").then((cache) => {
  cache.add(linkToFileToBeCached).then(() => {
    // Now the file is cached. Start rendering the app!
  });
});