关于Safari无法播放视频的问题研究

最近浏览官网时，突然发现在Safari中视频播放不了了，上线前是可以播放的，在Chrome中打开也是能播放的，这就很奇怪了。

问题分析

1. 查看请求

首先打开开发者工具，对比Chrome和Safari的视频请求：

Chrome视频请求
Safari视频请求
通过比较Chrome和Safari的请求我们发现，Chrome请求头中range字段的值是bytes=0-，而Safari请求头中range字段的值是bytes=0-1。从此得知，浏览器请求视频时是使用的范围请求，Chrome是用一个HTTP请求请求了整个视频，即请求视频的第0个字节到最后一个字节，Chrome不强制要求服务端支持范围请求，服务端响应200或206，Chrome都能支持。但是Safari要求服务端必须支持视频的范围请求，Safari会先请求视频的第0个字节到第一个字节，来测试服务端是否支持范围请求，如果服务端支持范围请求，则响应状态码206，响应头中有正确的Content-Range字段，响应体是视频的第一个字节，此时，Safari才会继续请求视频的其他字节，否则Safari会放弃该视频的请求。从图中可以看到，我们视频的服务端不支持范围请求，响应的是整个视频，状态码200，所以导致无法在Safari播放。

2. ServiceWorker

刚才所说的视频服务端并不是指nginx或CDN，阿里云CDN和nginx都是支持视频的范围请求的。这个不支持范围请求的服务端是ServiceWorker。因为我们官网采用了PWA技术，视频使用ServiceWorker缓存了，浏览器请求视频时，请求是由ServiceWorker在处理。这就是为什么上线前没有发现这个问题，因为上线前视频还没被缓存，测试不够充分，那时Safari是请求到CDN，可以正常请求到视频，如下图：

Safari正常请求
从图中可以看到，Safari将一个视频分成了多次范围请求，每次请求部分字节，只有当第一个0-1字节的测试请求被正确响应时，Safari才会发送其他范围请求。

问题解决

问题已经定位清楚了，解决办法就是使ServiceWorker支持视频的范围请求。
我们官网是采用的nextjs框架，PWA是通过next-offline这个插件实现的，next-offline封装的workbox-webpack-plugin，workbox-webpack-plguin是workbox库提供的一个webpack插件，workbox是Google开发的一个功能强大的用于搭建PWA站点的库。workbox还提供了一个workbox.rangeRequests.Plugin插件来支持范围请求，所以我们只需要使用这个插件就可以了。
首先，workbox-webpack-plugin支持使用两种模式：GenerateSw和InjectMainfest。
GenerateSw模式是根据配置自动生成整个service-worker.js文件，它适用于简单的使用场景。
InjectMainfest模式是需要你自定义service-worker.js文件，然后由workbox-webpack-plugin将webpack打包生成的静态资源precache自动插入到你的service-worker.js文件中。
我们要使用workbox.rangeRequests.Plugin就需要使用InjectMainfest模式。
next-offline默认是使用workbox-webpack-plugin的GenerateSw模式，所以需要在next.config.js中加入如下配置：

配置InjectMainfest模式
然后在service-worker.js中使用workbox.rangeRequests.Plugin：
使用workbox.rangeRequests.Plugin
在service-worker.js中，我们用到了两个缓存策略：

• 以.mp4结尾的所有请求都用CacheFirst策略，并且在这个策略中使用了workbox.rangeRequests.Plugin以支持范围请求。
• 以https开头的所有请求都用NetworkFirst策略。

匹配.mp4的策略必须写在匹配https策略之前，因为视频也能被https策略匹配到，其实这里可以将https匹配的正则改成以https开头但不以.mp4结尾:/^https?.*(?<!\.mp4)$/，但是Safari不支持否定逆序环视。

还有需要注意的一点，如果我们对mp4使用CacheFirst策略，需要在servicer-worker.js install的时候将视频都添加到缓存。

其他一些限制参见官网文档：Serve cached audio and video

这样配置了之后，Safari也能播放ServiceWorker缓存的视频了：

ServiceWorker响应范围请求

Workbox调试技巧

Chrome的开发者工具很强大，在Application标签下可以看到Service Workers和Cache、Storage。具体教程参见官网文档。

但是Safari就不行了，很难调试。首先我们可以配置Workbox Debug模式：

Workbox Debug模式

这个配置必须写在所有引用Workbox的代码之前。配置好之后，Workbox会打印拦截请求的详情信息：

Workbox日志

可以清楚的看到哪个请求被命中，使用了什么缓存策略处理。

但是这个日志不是打印到控制台的。Safari需要在开发-服务工作线程-<你的站点域名>打开ServiceWorker网页检查器，才能看到Workbox日志:

打开ServiceWorker网页检查器

Safari也没给你控制ServiceWorker的调试工具，即使你修改了service-worker.js代码，也有可能浏览器还在用老的service-worker.js。

你可以将以下代码复制粘贴到Safari控制台执行，然后重新打开浏览器以调试最新代码：

注销ServiceWorker

【完】