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

Question

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

这是服务工作者：

var dataCacheName = 'myappData-v3n';
var cacheName = 'myapp-3n';
var filesToCache = [
  '/meteosurf/',
  '/meteosurf/index.html',
  'scripts/hammer.min.js',
  'images/play_white.svg', 
  'images/stop_white.svg',
  'images/back_white.svg',
  'images/forward_white.svg',
  'images/sfondo.jpg',
  'images/ic_refresh_white_24px.svg',
  'scripts/meteo-zoom.js',
  'scripts/meteosurf_200.js',
  'scripts/jquery3-2-1.min.js',
  'scripts/jqueryui1-12-1.min.js',
  'styles/inline_01.css',
  'styles/meteosurf_200.css',
  'styles/jqueryui-smoothness.css',
  'styles/images/ui-bg_glass_65_ffffff_1x400.png',
  'styles/images/ui-icons_454545_256x240.png',
  'images/icons/icon-64x64.png',
];

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(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) {

      // TODO 6 

    })
  );
});

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

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

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

谢谢。

编辑

如果在Chrome上运行，它可以通过移动设备运行。 仅当从“主页”图标（作为PWA）运行时，才会出现脱机问题。

Answer 1

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

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

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

离线时，应用程序不知道该怎么做，因此显示“无连接”屏幕。

为了解决这个问题，我在服务工作者获取功能中添加了一个错误函数，将应用程序重定向到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');

    })
  );
});