0

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

我已经研究过，所有迹象都指向这一点： https ://developers.google.com/web/tools/workbox/guides/advanced-recipes#cached-av

但这似乎对我不起作用。

这是我的代码：

网页包

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

2 回答 2

0

我意识到，在进行预缓存时，我必须指定要在 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);
于 2020-11-24T12:16:01.790 回答
0

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

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

new CacheFirst({
  matchOptions: { ignoreSearch: true },
  plugins: [
    new CacheableResponsePlugin({ statuses: [200] }),
    new RangeRequestsPlugin()
  ]
})
于 2020-11-18T19:10:08.190 回答