Progressive Web App no longer updating after iOS 11.3

Question

I have a Progressive Web App that was built while using iOS 11.2. I can confirm that the app worked 100% as intended prior to 11.3. Something in 11.3 broke my code. When I launched the app after an update to index.php it loaded the newest version, now it doesn't...

It used to update automatically prior to this update, now it keeps using the same files (in cache?). But I have a no-cache policy on index.php set up in htaccess. So on 11.2 when I opened the app it fetched the newest index.php but now it just keeps the old version even if I open the page in safari. The only way to update is to clear website data in safari settings. The manifest and service workers download and update my app properly on iOS<11.3, android, and PC, but not on iOS>=11.3.

Pushing a new service worker to reload content doesn't work either...

.htaccess cache policy

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

I have my manifest included above my meta tags

<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">

My manifest

{
    "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"
}

I noticed that the PWA now gets it's title from the manifest and not the meta tags?

My service worker looks like this...

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

I'm having the same problem, the only solution I could coming up with was moving the app to a completely new URL and then it served the new files since the cache was for the old URL. Obviously, this is not an ideal solution and if your app is already in production you won't want to change its url, but anyway, it worked for me