jonnyom/customer-page.js

## customer-page.js
importScripts('https://cdn.evervault.com/serviceWorker.js');

## register.js
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
    navigator.serviceWorker.register('customer-page.js', {scope: '/'}).then(
        function (registration) {
          console.log(
            'ServiceWorker registration successful with scope: ',
            registration.scope
          );
        },
        function (err) {
          console.log('ServiceWorker registration failed: ', err);
        }
      );
    });
  }

## remote-hosted-cdn.html
<!-- @format -->

<!DOCTYPE html>
<header>
  <title>Service boi</title>
  // include this to register service worker
  <script src="https://cdn.jonny.com/register.js"></script>
  <script>
    window
      .fetch('https://anything.hello.com', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: 'bob@testing.com',
          social_identity: 'abc123',
          name: 'bob',
        }),
      })
      .then((r) => {
        console.log('Fetch happened', r);
      });
  </script>
</header>
<body>
  <p>Hello</p>
</body>

## service-worker.js
serialize = (request) => {
  let headers = {};
  for (let entry of request.headers.entries()) {
    headers[entry[0]] = entry[1];
  }
  let serialized = {
    url: 'https://testing.com',
    headers: headers,
    method: request.method,
    mode: request.mode,
    credentials: request.credentials,
    cache: request.cache,
    redirect: request.redirect,
    referrer: request.referrer,
  };

  // Only if method is not `GET` or `HEAD` is the request allowed to have body.
  if (request.method !== 'GET' && request.method !== 'HEAD') {
    return request
      .clone()
      .text()
      .then((body) => {
        serialized.body = body;
        return Promise.resolve(serialized);
      });
  }
  return Promise.resolve(serialized);
};

self.addEventListener('fetch', (event) => {
  let response;
  if (event.request.url.includes('anything')) {
    const newEvent = event.request.clone();
    response = serialize(event.request).then((serializedRequest) => {
      return fetch(serializedRequest.url, serializedRequest).then((r) => {
        return r;
      });
    });
  } else {
    response = fetch(event.request).then((r) => {
      return r;
    });
  }
  event.respondWith(response);
});
	if ('serviceWorker' in navigator) {
	window.addEventListener('load', function () {
	navigator.serviceWorker.register('customer-page.js', {scope: '/'}).then(
	function (registration) {
	console.log(
	'ServiceWorker registration successful with scope: ',
	registration.scope
	);
	},
	function (err) {
	console.log('ServiceWorker registration failed: ', err);
	}
	);
	});
	}
	<!-- @format -->

	<!DOCTYPE html>
	<header>
	<title>Service boi</title>
	// include this to register service worker
	<script src="https://cdn.jonny.com/register.js"></script>
	<script>
	window
	.fetch('https://anything.hello.com', {
	method: 'post',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
	email: 'bob@testing.com',
	social_identity: 'abc123',
	name: 'bob',
	}),
	})
	.then((r) => {
	console.log('Fetch happened', r);
	});
	</script>
	</header>
	<body>
	<p>Hello</p>
	</body>
	serialize = (request) => {
	let headers = {};
	for (let entry of request.headers.entries()) {
	headers[entry[0]] = entry[1];
	}
	let serialized = {
	url: 'https://testing.com',
	headers: headers,
	method: request.method,
	mode: request.mode,
	credentials: request.credentials,
	cache: request.cache,
	redirect: request.redirect,
	referrer: request.referrer,
	};

	// Only if method is not `GET` or `HEAD` is the request allowed to have body.
	if (request.method !== 'GET' && request.method !== 'HEAD') {
	return request
	.clone()
	.text()
	.then((body) => {
	serialized.body = body;
	return Promise.resolve(serialized);
	});
	}
	return Promise.resolve(serialized);
	};

	self.addEventListener('fetch', (event) => {
	let response;
	if (event.request.url.includes('anything')) {
	const newEvent = event.request.clone();
	response = serialize(event.request).then((serializedRequest) => {
	return fetch(serializedRequest.url, serializedRequest).then((r) => {
	return r;
	});
	});
	} else {
	response = fetch(event.request).then((r) => {
	return r;
	});
	}
	event.respondWith(response);
	});