Question

我正在开发一个渐进式Web应用程序，但在非常特殊的条件下，服务人员遇到了问题。我搜索了，但是没有答案可以解决我的问题。

我看到了问题Chrome install Service Worker addAll failed to fetch，但我认为这不是我的问题，因为我的软件无法仅获取OGG文件。

这是事件和问题：

应用程序缓存png和ogg文件。
在台式机或Android移动设备上通过网络访问打开，声音和图像都可以很好地工作。
可以在桌面上离线打开，并且声音和图像效果很好。
使用Firefox在移动设备中离线打开，声音和图像效果很好。
使用Android上的Chrome 67.0.3396.87或Opera或其他Webkit浏览器在移动设备中离线打开，图像效果很好，但听起来失败。
如果我立即关闭并重新打开网络，则缓存仅存储播放的声音，仅存储Chrome（或在开发人员工具的“网络”标签中激活离线选项）。这表明我在Chrome中仅在使用声音后才对其进行缓存。但是过了一会儿，我重新打开并发生与第5点相同的情况。没有声音，完美的图像，脚本和CSS。

我得到以下错误和详细信息：

Description in the console, using remote debugging

Network tab information for Chrome using remote debugging

这是我的服务人员（对我来说这是一个新主题）：

//13jul2018_8pm
var dataCacheName = 'name-pwa';
var cacheName = 'name-pwa';
var filesToCache = [
    '/',
    'manifest.json',
    'index.html',
    'main.js',
    'img/img1.png',
    'img/img2.png',
    'img/spellHeal_8.png',
    'img/heal.png',
    'ogg/ogg1.ogg',
    'ogg/ogg2.ogg',
    'ogg/heal.ogg'
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

我试图修复它，以更改使用ogg文件的模式：一种。在<audio>元素中 b。将JavaScript注入与audio = new Audio一起使用我用一些预构建版本更改了整个软件，以检查是否是问题所在，但并不能解决问题。

也许有人有这个问题以及解决方法？

预先感谢，欢迎提出任何建议，

Answer 1

尝试了许多事情之后，我发现Android和台式机中的Chrome对缺少缓存承诺问题特别敏感，但是该问题仅在脱机时获取OGG（或其他音频文件）时在我的应用中有效。正如我的问题中所述，PNG文件工作异常。

我终于通过修改服务工作者的提取事件解决了该问题，包括按照Google帮助网页中的建议克隆请求。如果有人遇到相同的问题，我将分享解决方案。 Google Chrome中的行为异常。

这是修改后的提取事件。

QRect screenGeometry = qApp->primaryScreen()->virtualGeometry();
QPixmap screenPixmap = qApp->primaryScreen()->grabWindow(qApp->desktop()->winId(), screenGeometry.x(), screenGeometry.y(), screenGeometry.width(), screenGeometry.height());

服务工作者无法在Android和其他Webkit浏览器的Chrome中获取OGG文件

1 个答案: