browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/images/mstile-150x150.png"/>
      <TileColor>#0068ac</TileColor>
    </tile>
  </msapplication>
</browserconfig>

getToken.js

const messaging = firebase.messaging()

messaging.requestPermission().then(() => {
  getToken()
}).catch(function(err) {
  console.log('Unable to get permission to notify.', err);
});

const getToken = () => {
  messaging.getToken().then(currentToken => {
    if (currentToken) {
      console.log('Current Token ', currentToken)
    } else {
      // Show permission request.
      console.log('No Instance ID token available. Request permission to generate one.');
      // Show permission UI.
      // updateUIForPushPermissionRequired();
      // setTokenSentToServer(false);
    }
  }).catch(function(err) {
    console.log('An error occurred while retrieving token. ', err);
    // showToken('Error retrieving Instance ID token. ', err);
    // setTokenSentToServer(false);
  });
}

index.html

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('/sw.js', { scope: '/' })
      .then()
      .catch(err => console.error('There is a problem', err))
  }
</script>

manifest.json

{
  "name": "Autobutler",
  "short_name": "Autobutler",
  "icons": [
    {
      "src": "/images/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#0068ac",
  "background_color": "#0068ac",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "gcm_sender_id": "103953800507"
}

notification.js

self.addEventListener('notificationclick', event=> {
  let url = 'https://example.com/some-path/';
  event.notification.close(); // Android needs explicit close.
  event.waitUntil(
    clients.matchAll({type: 'window'}).then( windowClients => {
      // Check if there is already a window/tab open with the target URL
      for (var i = 0; i < windowClients.length; i++) {
        var client = windowClients[i];
        // If so, just focus it.
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      // If not, then open the target URL in a new window/tab.
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })
  );
});

sw.js

const version = 'V2'

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(version).then(function(cache) {
      return  cache.addAll([
        '/api/job_task_types',
        '/css/app.css',
        '/css/font-awesome.min.css',
        '/js/app.js',
        '/offline',
        '/images/favicon-16x16.png',
        '/images/favicon-32x32.png'
      ]);
    });
  )
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        return response;
      } else if (!navigator.onLine) {
        return caches.match(new Request('/offline'));
      } else {
	return fetchAndUpdate(event.request);
      }
    })
  );
});

function fetchAndUpdate(request) {
  return fetch(request).then(response => {
    if (response) {
      return caches.open(version).then(cache => {
        if (request.method == 'GET' && !request.url.includes('/api/')) {
          return cache.put(request, response.clone()).then(() => {
            return response;
          });
        } else {
          return response;
        }
      });
    }
  });
}

sync.js

// Somewhere in code
navigator.serviceWorker.ready.then(swRegistration => {
  return swRegistration.sync.register('myFirstSync');
});


// sw.js
self.addEventListener('sync', event => {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});