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

问题分析

1. 查看请求

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

Chrome视频请求

Safari视频请求

2. ServiceWorker

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

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模式

使用workbox.rangeRequests.Plugin

• 以.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

【完】