渐进式Web应用程序：离线缓存在Android上无效，适用于Chrome开发者工具

Question

我有一个简单的PWA，在线工作正常。我还测试了Chrome Dev Tools中的离线行为，服务工作者正在完美地完成其工作。但是当我从我的Android手机上运行应用程序时，它不能脱机工作，因为离线时缓存存储不再存在。

这是服务工作者：

DECLARE @country varchar(30) = 'UK'
  DECLARE @table varchar(50)
  SET @table = 'NORTHWND.dbo.Employees'
  EXEC('select e.LastName, e.FirstName, e.PostalCode
  from ' + @table +' as e
  where e.Country like '''+ @country +'''' )

在Chrome开发工具的网址上测试应用时，它也会离线响应。但由于它没有在手机上工作，我将设备连接到Chrome并进行了调试。这是手机上线时的缓存存储：

但是如果我检查服务工作者窗格中的脱机标志并刷新页面，缓存就会消失（参见下面的屏幕截图）！

看起来缓存不是永久脱机!!发生了什么？

感谢。

修改

如果在Chrome上运行，它可以在移动设备上运行。只有从＆＃34; Home＆＃34;运行时才会出现脱机问题。图标，作为PWA。

Answer 1

我已修复它，如果任何用户发现自己处于相同状态，我会详细说明问题。

问题是在manifest.json中我输入了Google Analytics的起始网址：

 "start_url": "/meteosurf/?utm_source=mobile&utm_medium=device&utm_campaign=standalone",

离线时，应用程序不知道该怎么做，因此它显示了＆＃34; No Connection＆＃34;屏幕。

为了解决这个问题，我在服务工作者获取功能中添加了一个错误函数，将应用程序重定向到index.html。这样：

self.addEventListener('fetch', function(event) {
  console.log('Fetch event for ', event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found ', event.request.url, ' in cache');
        return response;
      }
      console.log('Network request for ', event.request.url);
      return fetch(event.request)

    }).catch(function(error) {

      return caches.match('index.html');

    })
  );
});