使用 Workbox 在 Safari 中缓存视频答案

【问题标题】：Caching Videos in Safari using Workbox使用 Workbox 在 Safari 中缓存视频
【发布时间】：2021-03-01 23:57:10
【问题描述】：

我有一个 Vue.js 应用程序，我目前正在使用工作箱进行缓存，因此它可以脱机工作。但是，视频似乎无法在 Safari 中播放。

我进行了研究，所有迹象都表明这一点： https://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av

但它似乎对我不起作用。

这是我的代码：

Webpack

configureWebpack: {
plugins: [
  new InjectManifest({
    swSrc: './src/sw.js',
    swDest: "sw.js",
    maximumFileSizeToCacheInBytes: 5000000000
  })
]}

sw.js（服务工作者）

import { skipWaiting, clientsClaim } from "workbox-core";
import { precacheAndRoute } from "workbox-precaching";
import { registerRoute } from "workbox-routing";
import { CacheFirst } from "workbox-strategies";
import { CacheableResponsePlugin } from "workbox-cacheable-response";
import { RangeRequestsPlugin } from "workbox-range-requests";

registerRoute(
  ({ url }) => url.pathname.endsWith(".mp4"),
  new CacheFirst({
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new RangeRequestsPlugin()
    ]
  })
);

skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);

【问题讨论】：

标签： safari workbox workbox-webpack-plugin

【解决方案1】：

这可能是因为您的 .mp4 文件在缓存中附加了一个 __WB_MANIFEST URL 查询参数，因为它们需要由 Workbox 的预缓存逻辑进行版本控制。

一个快速的解决方案是在构建策略时设置matchOptions：

new CacheFirst({
  matchOptions: { ignoreSearch: true },
  plugins: [
    new CacheableResponsePlugin({ statuses: [200] }),
    new RangeRequestsPlugin()
  ]
})

【讨论】：

这真是个好主意！但不幸的是，它并非完全如此。但是很高兴知道和使用。我只需要设置它正在使用的缓存——事后看来这似乎相当明显。

【解决方案2】：

我意识到，在进行预缓存时，我必须在 CacheFirst 对象中指定要使用的缓存，因为默认设置为运行时缓存。为此，我从 workbox-core 导入了 cacheNames

import { skipWaiting, clientsClaim, cacheNames } from "workbox-core";

然后我设置预缓存名称

const precacheCacheName = cacheNames.precache;

然后在设置 CacheFirst 对象时，我指定了这样的名称：

  new CacheFirst({
    cacheName: precacheCacheName,

完整代码如下：

import { skipWaiting, clientsClaim, cacheNames } from "workbox-core";
import { precacheAndRoute } from "workbox-precaching";
import { registerRoute } from "workbox-routing";
import { CacheFirst } from "workbox-strategies";
import { CacheableResponsePlugin } from "workbox-cacheable-response";
import { RangeRequestsPlugin } from "workbox-range-requests";

const precacheCacheName = cacheNames.precache;

registerRoute(
  ({ url }) => url.pathname.endsWith(".mp4"),
  new CacheFirst({
    cacheName: precacheCacheName,
    matchOptions: { ignoreSearch: true },
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new RangeRequestsPlugin()
    ]
  })
);

skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);

【讨论】：