title: Issues with PWA in standalone mode on iOS 11.4
body: <p>My web app works just fine in every browser I can find. If I install the app on my desktop in Firefox and Chrome, it works just fine online and offline just fine. Same with desktop Safari. </p>
  
  <p>My issue is with Safari on mobile. If I use the browser, everything seems to work online or offline, no issue. But, when I add the app to my homescreen, open the app at least once in standalone mode (to kick off the caching), and then shut off my network connection. Problem is, when I try and start using the app again, I get the dreaded "No connection" screen inside of my app. </p>
  
  <p>I cannot, for the life of me, figure out why this doesn't work and I'm about ready to toss my computer out the window.</p>
  
  <p>I am currently using the <code>InjectManifest</code> method in the <code>workbox-webpack-plugin</code> in order to put workbox and my precache manifest into my service worker.</p>
  
  <p>My manifest:</p>
  
  <pre><code>{
    "short_name": "React Notes",
    "name": "React PWA notes",
    "icons": [
      {
        "src": "staticAssets/favicon.png",
        "sizes": "64x64 32x32 24x24 16x16",
        "type": "image/png"
      },
      {
        "src": "staticAssets/icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "staticAssets/icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "start_url": "./index.html",
    "scope":"/",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
  }
  </code></pre>
  
  <p>My service-worker:</p>
  
  <pre><code>self.__precacheManifest = [].concat(self.__precacheManifest || []);
  
  workbox.precaching.suppressWarnings();
  workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
  
  self.addEventListener('fetch', function(event) {
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          // Cache hit - return response
          if (response) {
            return response;
          }
          return fetch(event.request);
        }
      )
    );
  });
  </code></pre>
  
  <p>The head on my index.html </p>
  
  <pre><code>...
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"&gt;
  &lt;meta name="theme-color" content="#000000"&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  
  &lt;link rel="manifest" href="/manifest.json"&gt;
  ...
  &lt;!-- here be apple specific icon stuff --&gt;
  </code></pre>
  
  <p>My workbox webpack plugin config</p>
  
  <pre><code>new workboxPlugin.InjectManifest({
    swSrc: './src/sw.js',
    swDest: 'service-worker.js',
    importWorkboxFrom: 'local'
  })
  </code></pre>
  
  <p>I'm half expecting it has something to do with the  of my index.html, or the manifest, BUT nothing I change works.</p>
  
  <p>Anyone have any idea?</p>