Network aware asset optimization

network-aware-sw.js

function modifyURL(url) {
  // ect can be 'slow-2g', '2g', '3g', or '4g'.
  const connectionType = navigator.connection.effectiveType;
  if (connectionType === "slow-2g" || connectionType === "2g") {
    return url + "?opt=aggressive";
  } else if (connectionType === "4g") {
    return url + "?opt=mild";
  } else {
    return url + "?opt=default";
  }
}

self.addEventListener("fetch", async event => {

  if (event.request.method != "GET") {
    return;
  }

  if (event.request.destination != "image") {
    return;
  }

  event.respondWith(fetch(modifyURL(event.request.url)));
});