Rails中的CacheStorage PWA始终为空。在service-worker.js中，cache.addAll似乎没有缓存任何东西

Question

在寻找了几天的解决方案后，我一无所获。我的服务工作者注册、安装和激活都没有问题，但是cache.addAll似乎静默地失败了。

我使用一个控制器来服务服务工作者和manifest.json作为erb视图。我只是使用webpacker，而不是资产管道，它排除了一些用于这类事情的常见gem。

这是我的服务-worker.js.erb：

const expectedCaches = ['static-v2'];

function onInstall(event) {
    console.log('[Serviceworker]', "Installing!", event);
    event.waitUntil(
    caches.open("static-v2")
        .then(function(cache) {
            return cache.addAll([
                '/offline.html',
                '<%= asset_pack_path 'application.js' %>',
                '<%= asset_pack_path 'media/images/Convertable.png' %>',
                '<%= root_path %>',

            ])
            .then(function(e){ 
                console.log(e);
            })
            .catch(function(e){
                console.log(e.message);
            });
    }).catch(function(err){
        console.log(err.message);
    })
  );
}

function onActivate(event) {
  console.log('[Serviceworker]', "Activating!", event);
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
          return expectedCaches.includes(cacheName);
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
}


function onFetch(event) {
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      return caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          console.log('[Serviceworker]', "Fetching offline content", event);
          return caches.match('/offline.html');
        }
      })
    })
  );
}

self.addEventListener('install', onInstall);
self.addEventListener('activate', onActivate);
self.addEventListener('fetch', onFetch);

还有我的manifest.json.erb

{
  "short_name": "My APP",
  "name": "My APP for Everyone!",
  "icons": [
    {
      "src": "<%= asset_pack_path 'media/images/Convertable.png' %>",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "<%= asset_pack_path 'media/images/Convertable.png' %>",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "<%= root_path %>",
  "background_color": "#fff",
  "display": "standalone",
  "scope": "<%= root_path %>",
  "theme_color": "#000"
}

就像我说的，它注册和安装都很好，但是当我使用chrome dev工具进入离线模式时，它无法加载任何应该缓存的东西，我在控制台中得到了以下内容：

The FetchEvent for "http://localhost:3000/offline.html" resulted in a network error response: an object that was not a Response was passed to respondWith().
Promise.then (async)
onFetch @ service-worker.js:47

这是因为由于在高速缓存中什么也没有找到，所以未定义被作为响应返回。调试到fetch事件处理程序时，我发现CacheStorage对象确实是空的。在chrome dev工具的应用程序选项卡中，我找不到任何缓存，尽管我不太确定它应该放在哪个缓存中(列出了几个)。

我在Firefox中也得到了同样的结果。我希望我错过了一些简单的东西，有人可以向我指出，或者至少有人可以带我走上正确的道路。我会尽量对任何要求更多信息的请求作出非常积极的回应。

谢谢!

Answer 1

在onActivate事件处理程序中，您将从缓存中删除先前在onInstall事件中添加的项。

您应该删除不在expectedCaches数组中的缓存(现在您正在执行相反的操作：-)。因此，尝试将条件更改为return !expectedCaches.includes(cacheName); (添加感叹号)，这将只过滤旧的缓存。