iOS 11.3 后 Progressive Web App 不再更新

Question

我有一个使用 iOS 11.2 构建的 Progressive Web App。我可以确认该应用程序在 11.3 之前按预期工作 100%。 11.3 中的某些东西破坏了我的代码。当我在更新 index.php 后启动应用程序时，它加载了最新版本，现在它没有...

它曾经在此更新之前自动更新，现在它继续使用相同的文件（在缓存中？）。但是我在 htaccess 中设置了 index.php 的无缓存策略。所以在 11.2 上，当我打开应用程序时，它会获取最新的 index.php，但现在即使我在 safari 中打开页面，它也只会保留旧版本。更新的唯一方法是清除 Safari 设置中的网站数据。清单和服务工作者在 iOS=11.3 上不正确。

推动新的 Service Worker 重新加载内容也不起作用...

.htaccess 缓存策略

<Files index.php>
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
</Files>

我的清单包含在我的元标记上方

<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My App">
<link rel="apple-touch-icon" href="media/images/app_icon_256.png">

我的清单

{
    "name": "My App",
    "short_name": "My App",
    "icons": [
        {
            "src": "media/images/app_icon_192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "media/images/app_icon_256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "media/images/app_icon_384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "media/images/app_icon_512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "index.php",
    "display": "standalone",
    "background_color": "#2e4668",
    "theme_color": "#d0a331"
}

我注意到 PWA 现在从清单而不是元标记中获取它的标题？

我的 Service Worker 看起来像这样......

var CACHE_NAME = 'toh-app-cache-1-0056';
var expectedCaches = [CACHE_NAME];
var urlsToCache = [
    "css/bootstrap.min.css",
    "css/fontawesome.min.css",
    "js/jquery-3.3.1.min.js",
    "js/popper.min.js",
    "js/bootstrap.min.js",
    "media/images/home.jpg",
    "media/images/toh_logo.png",
    "media/images/download/add-to-homescreen-android.jpg",
    "media/images/download/add-to-homescreen-apple.jpg",
];

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!expectedCaches.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log('New cahce now ready to handle fetches!');
    })
  );
});

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            console.log('Opened cache');
            return cache.addAll(urlsToCache);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            }

            var fetchRequest = event.request.clone();

            return fetch(fetchRequest).then(
                function(response) {
                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }
                    var responseToCache = response.clone();

                    caches.open(CACHE_NAME)
                        .then(function(cache) {
                            cache.put(event.request, responseToCache);
                        });

                    return response;
                }
            );
        })
    );
});

Answer 1

我遇到了同样的问题，我能想出的唯一解决方案是将应用程序移动到一个全新的 URL，然后它为新文件提供服务，因为缓存是针对旧 URL 的。显然，这不是一个理想的解决方案，如果您的应用程序已经投入生产，您将不想更改其 url，但无论如何，它对我有用