渐进式Web应用程序：离线缓存在Android上无效，适用于Chrome开发者工具 [英] Progressive Web App: offline cache does not work on Android, it works on Chrome dev Tools

问题描述

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

I have a simple PWA that works fine online. I have also tested the offline behaviour in Chrome Dev Tools, and the service worker is doing its job perfectly. But when I run the app from my Android phone, it doesn't work offline as the Cache Storage is no more present when offline.

这是服务工作者：

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并进行了调试。这是手机上线时的缓存存储：

When testing the app on its url from Chrome Dev tools, it responds also offline. But as it was not working on the phone, I connected the device to Chrome and debugged. This is the cache storage when the phone is online:

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

but if I check the Offline flag in service worker pane and refresh the page, the cache disappears (see following screenshot)!

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

It looks like the cache is not persistent offline!! What's happening?

谢谢。

如果在Chrome上运行，则可以通过移动设备运行。离线问题仅在从主页图标（作为PWA）运行时出现。

It is working from the mobile device if running on Chrome. The offline problem appears only when running from the "Home" icon, as a PWA.

推荐答案

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

I have fixed it, and I detail the problem if any user will find himself in the same condition.

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

The problem was that in the manifest.json I had entered a start url for Google Analytics:

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

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

When offline, the application didn't know what to do, so it displayed the "No Connection" screen.

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

In order to fix it, I have added an error function in the service worker fetch funtion, to redirect the app to index.html. This way:

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');

    })
  );
});

这篇关于渐进式Web应用程序：离线缓存在Android上无效，适用于Chrome开发者工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！