视频作为背景图像在iOS上无法在Gatsby PWA中工作的视频图像

Question

我为我们公司的潜在临时性创建了一个选择加入应用程序，我与盖茨比(Gatsby(合作，目前对结果感到非常满意。我将其作为渐进式网络应用程序，因为盖茨比插件非常容易。

PWA在Android上效果很好，并按预期显示了背景视频，但是在iOS上没有显示视频。

我将所有软件包和依赖项更新为最后一个版本，但这并没有改变。我尝试谷歌搜索这个问题，但在关闭应用程序时(不是我的情况(，试图让PWA播放视频的人们获得了很多搜索结果。

{
   resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Afstuderen bij Arcady`,
        short_name: `Afstuderen`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#00a667`,
        display: `standalone`,
        icon: `src/images/bear_green.png`,
      },
},
'gatsby-plugin-offline',

和服务工作者的内容

importScripts("workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.6.3"});
workbox.core.setCacheNameDetails({prefix: "gatsby-plugin-offline"});
workbox.skipWaiting();
workbox.clientsClaim();
/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 */
self.__precacheManifest = [
  {
    "url": "webpack-runtime-aec2408fe3a97f1352af.js"
  },
  {
    "url": "app-5b624d17337895ddf874.js"
  },
  {
    "url": "component---node-modules-gatsby-plugin-offline-app-shell-js-b97c345e19bb442c644f.js"
  },
  {
    "url": "offline-plugin-app-shell-fallback/index.html",
    "revision": "ac0d57f6ce61fac4bfa64e7e08d076c2"
  },
  {
    "url": "0-d2c3040ae352cda7b69f.js"
  },
  {
    "url": "component---src-pages-404-js-cf647f7c3110eab2f912.js"
  },
  {
    "url": "static/d/285/path---404-html-516-62a-0SUcWyAf8ecbYDsMhQkEfPzV8.json"
  },
  {
    "url": "static/d/604/path---offline-plugin-app-shell-fallback-a-30-c5a-BawJvyh36KKFwbrWPg4a4aYuc8.json"
  },
  {
    "url": "manifest.webmanifest",
    "revision": "5a580d53785b72eace989a49ea1e24f7"
  }
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
workbox.routing.registerRoute(/(.js$|.css$|static/)/, workbox.strategies.cacheFirst(), 'GET');
workbox.routing.registerRoute(/^https?:.*.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/, workbox.strategies.staleWhileRevalidate(), 'GET');
workbox.routing.registerRoute(/^https?://fonts.googleapis.com/css/, workbox.strategies.staleWhileRevalidate(), 'GET');
/* global importScripts, workbox, idbKeyval */
importScripts(`idb-keyval-iife.min.js`)
const WHITELIST_KEY = `custom-navigation-whitelist`
const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
  const { pathname } = new URL(event.request.url)
  return idbKeyval.get(WHITELIST_KEY).then((customWhitelist = []) => {
    // Respond with the offline shell if we match the custom whitelist
    if (customWhitelist.includes(pathname)) {
      const offlineShell = `/offline-plugin-app-shell-fallback/index.html`
      const cacheName = workbox.core.cacheNames.precache
      return caches.match(offlineShell, { cacheName }).then(cachedResponse => {
        if (cachedResponse) return cachedResponse
        console.error(
          `The offline shell (${offlineShell}) was not found ` +
            `while attempting to serve a response for ${pathname}`
        )
        return fetch(offlineShell).then(response => {
          if (response.ok) {
            return caches.open(cacheName).then(cache =>
              // Clone is needed because put() consumes the response body.
              cache.put(offlineShell, response.clone()).then(() => response)
            )
          } else {
            return fetch(event.request)
          }
        })
      })
    }
    return fetch(event.request)
  })
})
workbox.routing.registerRoute(navigationRoute)
let updatingWhitelist = null
function rawWhitelistPathnames(pathnames) {
  if (updatingWhitelist !== null) {
    // Prevent the whitelist from being updated twice at the same time
    return updatingWhitelist.then(() => rawWhitelistPathnames(pathnames))
  }
  updatingWhitelist = idbKeyval
    .get(WHITELIST_KEY)
    .then((customWhitelist = []) => {
      pathnames.forEach(pathname => {
        if (!customWhitelist.includes(pathname)) customWhitelist.push(pathname)
      })
      return idbKeyval.set(WHITELIST_KEY, customWhitelist)
    })
    .then(() => {
      updatingWhitelist = null
    })
  return updatingWhitelist
}
function rawResetWhitelist() {
  if (updatingWhitelist !== null) {
    return updatingWhitelist.then(() => rawResetWhitelist())
  }
  updatingWhitelist = idbKeyval.set(WHITELIST_KEY, []).then(() => {
    updatingWhitelist = null
  })
  return updatingWhitelist
}
const messageApi = {
  whitelistPathnames(event) {
    let { pathnames } = event.data
    pathnames = pathnames.map(({ pathname, includesPrefix }) => {
      if (!includesPrefix) {
        return `${pathname}`
      } else {
        return pathname
      }
    })
    event.waitUntil(rawWhitelistPathnames(pathnames))
  },
  resetWhitelist(event) {
    event.waitUntil(rawResetWhitelist())
  },
}
self.addEventListener(`message`, event => {
  const { gatsbyApi } = event.data
  if (gatsbyApi) messageApi[gatsbyApi](event)
})

我希望iOS PWA(Safari(像在Android上一样显示视频，但它给出了灰色屏幕。

我希望有人可以帮助我或指向正确的方向。

Answer 1

您的视频有多大？

上次我检查时，iOS对于PWA的缓存的限制为50MB，因此，如果您的视频大于50MB，这可能就是它仅在Android上工作的原因(这没有此类限制(。

Answer 2

我找到了这篇博客文章，它帮助我解决了此问题

要将范围请求处理添加到gatsby-plugin-offline，我添加了一个名为range-request-handler.js的脚本，其中包括：

// range-request-handler.js
// Define workbox globally
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
// Bring in workbox libs
const { registerRoute } = require('workbox-routing');
const { CacheFirst } = require('workbox-strategies');
const { RangeRequestsPlugin } = require('workbox-range-requests'); // The fix
// Add Range Request support to fetching videos from cache
registerRoute(
    /(.webm$|.mp4$)/,
    new CacheFirst({
        plugins: [
            new RangeRequestsPlugin(),
        ],
    })
);

然后，在我的gatsby-config.js中，我配置了插件以附加上述脚本：

// gatsby-config.js
module.exports = {
  // ...
  plugins: [
    // ...plugins
    {
      resolve: 'gatsby-plugin-offline',
      options: {
        appendScript: require.resolve('./range-request-handler.js'),
      },
    },
    // ...plugins
  ],
  // ...
};

视频现在为我在Safari浏览器中使用。如果有更好的实施方法，我全都是耳朵。目前它可以按预期