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

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

...
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="manifest" href="/manifest.json">
...
<!-- here be apple specific icon stuff -->

new workboxPlugin.InjectManifest({
  swSrc: './src/sw.js',
  swDest: 'service-worker.js',
  importWorkboxFrom: 'local'
})