我有一个简单的 PWA，可以在网上正常运行。我还在 Chrome 开发工具中测试了离线行为，并且 Service Worker 正在完美地完成其工作。但是，当我从 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 开发工具在其 url 上测试应用程序时，它也会离线响应。但由于它在手机上不起作用，我将设备连接到 Chrome 并进行调试。这是手机在线时的缓存存储：

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

看来缓存没有离线持久化！！发生了什么？

Thanks.

EDIT

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

我已经修复了它，如果任何用户发现自己处于相同的情况，我会详细说明该问题。

问题是在 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');

    })
  );
});