Progressive Web App：离线缓存在 Android 上不工作，在 Chrome 开发工具上工作

Question

我有一个简单的 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 并进行了调试。这是手机在线时的缓存：

但是如果我在 service worker 窗格中检查 Offline 标志并刷新页面，缓存就会消失（见下面的截图）！

看起来缓存不是持久离线的！！发生了什么事？

谢谢。

编辑

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

Answer 1

我已经解决了，如果有用户发现自己处于相同的情况，我会详细说明问题。

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

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

离线时，应用程序不知道该做什么，所以它显示“无连接”屏幕。

为了修复它，我在 service worker fetch 函数中添加了一个错误函数，将应用程序重定向到 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');

    })
  );
});