使用Workbox在Safari中缓存视频

我有一个Vue.js应用程序，我目前正在使用workbox进行缓存，以便脱机工作。然而，视频在Safari中似乎不起作用

我已经研究过了，所有迹象都表明：

但这似乎对我不起作用

以下是我的代码：

网页包

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

sw.js（服务人员）

---

这可能是因为您的

.mp4

文件在缓存中附加了一个

\uuuwb\u MANIFEST

URL查询参数，因为它们需要通过Workbox的预缓存逻辑进行版本控制

快速解决方案是在制定战略时设定：

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

---

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

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

然后我设置了precache名称

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);

---

那真是个好主意！但不幸的是，这并不是全部。但知道并使用它是很棒的。我只需要设置它正在使用的缓存，这在事后看来是相当明显的。

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);